From e909d21039bc8aa0c07fda48e91c0f18fe091cfc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Fri, 7 Sep 2018 10:23:29 -0300 Subject: [PATCH 01/13] Adding Message Matching the exact values --- .../client/ui/components/Message/Message.css | 29 +++++++++ .../client/ui/components/Message/Message.mdx | 27 ++++++++ .../ui/components/Message/Message.spec.tsx | 15 +++++ .../client/ui/components/Message/Message.tsx | 61 +++++++++++++++++++ .../client/ui/components/Message/index.ts | 1 + src/core/client/ui/components/index.ts | 1 + 6 files changed, 134 insertions(+) create mode 100644 src/core/client/ui/components/Message/Message.css create mode 100644 src/core/client/ui/components/Message/Message.mdx create mode 100644 src/core/client/ui/components/Message/Message.spec.tsx create mode 100644 src/core/client/ui/components/Message/Message.tsx create mode 100644 src/core/client/ui/components/Message/index.ts diff --git a/src/core/client/ui/components/Message/Message.css b/src/core/client/ui/components/Message/Message.css new file mode 100644 index 000000000..86c7f0129 --- /dev/null +++ b/src/core/client/ui/components/Message/Message.css @@ -0,0 +1,29 @@ +.root { + composes: alertMessage from "talk-ui/shared/typography.css"; + position: relative; + display: inline-flex; + justify-content: flex-start; + align-items: center; + padding: calc(0.8 * var(--spacing-unit)) var(--spacing-unit); + box-sizing: border-box; + border-radius: var(--round-corners); + border-width: 1px; + border-left-width: calc(0.8 * var(--spacing-unit)); + border-style: solid; +} + +.color { + background-color: var(--palette-common-white); + border-color: var(--palette-grey-main); + color: var(--palette-grey-main); +} + +.fullWidth { + display: flex; + width: 100%; +} + +.icon { + margin-right: calc(0.8 * var(--spacing-unit)); + color: var(--palette-grey-main); +} diff --git a/src/core/client/ui/components/Message/Message.mdx b/src/core/client/ui/components/Message/Message.mdx new file mode 100644 index 000000000..9a876d76c --- /dev/null +++ b/src/core/client/ui/components/Message/Message.mdx @@ -0,0 +1,27 @@ +--- +name: Message +menu: UI Kit +--- + +import { Playground } from 'docz' +import Message from './Message' +import HorizontalGutter from '../HorizontalGutter' + +# Message + +## Basic Use + + + This is a message + Contrary to popular belief, Lorem Ipsum is not simply random text. + + + +## Usage with icon + + + Edit: 1 min 23 secs Remaining + + + + diff --git a/src/core/client/ui/components/Message/Message.spec.tsx b/src/core/client/ui/components/Message/Message.spec.tsx new file mode 100644 index 000000000..d1335f8d9 --- /dev/null +++ b/src/core/client/ui/components/Message/Message.spec.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import TestRenderer from "react-test-renderer"; + +import { PropTypesOf } from "talk-ui/types"; + +import Message from "./Message"; + +it("renders correctly", () => { + const props: PropTypesOf = { + className: "custom", + children: "Hello World", + }; + const renderer = TestRenderer.create(); + expect(renderer.toJSON()).toMatchSnapshot(); +}); diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx new file mode 100644 index 000000000..19bb8ece5 --- /dev/null +++ b/src/core/client/ui/components/Message/Message.tsx @@ -0,0 +1,61 @@ +import cn from "classnames"; +import React, { ReactNode, StatelessComponent } from "react"; + +import { withStyles } from "talk-ui/hocs"; + +import Icon from "../Icon"; +import * as styles from "./Message.css"; + +export interface MessageProps { + /** + * The content of the component. + */ + children: ReactNode; + /** + * Convenient prop to override the root styling. + */ + className?: string; + /** + * Override or extend the styles applied to the component. + */ + classes: typeof styles; + /* + * If set renders a full width message + */ + fullWidth?: boolean; + /* + * Name of the icon, render if provided + */ + icon?: string; +} + +const Message: StatelessComponent = props => { + const { className, classes, fullWidth, children, icon, ...rest } = props; + + const rootClassName = cn( + classes.root, + classes.color, + { + [classes.fullWidth]: fullWidth, + }, + className + ); + + return ( +
+ {icon && ( + + {icon} + + )} + {children} +
+ ); +}; + +Message.defaultProps = { + fullWidth: false, +}; + +const enhanced = withStyles(styles)(Message); +export default enhanced; diff --git a/src/core/client/ui/components/Message/index.ts b/src/core/client/ui/components/Message/index.ts new file mode 100644 index 000000000..a6d22dd86 --- /dev/null +++ b/src/core/client/ui/components/Message/index.ts @@ -0,0 +1 @@ +export { default } from "./Message"; diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts index f701660dd..61970ed25 100644 --- a/src/core/client/ui/components/index.ts +++ b/src/core/client/ui/components/index.ts @@ -20,3 +20,4 @@ export { default as Spinner } from "./Spinner"; export { default as HorizontalGutter } from "./HorizontalGutter"; export { default as Icon } from "./Icon"; export { default as AriaInfo } from "./AriaInfo"; +export { default as Message } from "./Message"; From 994b0f7fb3502752be97df6058a02df9ae15c09a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Fri, 7 Sep 2018 10:56:03 -0300 Subject: [PATCH 02/13] Updated API --- .../client/ui/components/Message/Message.css | 11 ++++-- .../client/ui/components/Message/Message.tsx | 18 ++++++++-- .../ValidationMessage/ValidationMessage.css | 27 --------------- .../ValidationMessage/ValidationMessage.mdx | 2 +- .../ValidationMessage/ValidationMessage.tsx | 34 ++++--------------- 5 files changed, 31 insertions(+), 61 deletions(-) delete mode 100644 src/core/client/ui/components/ValidationMessage/ValidationMessage.css diff --git a/src/core/client/ui/components/Message/Message.css b/src/core/client/ui/components/Message/Message.css index 86c7f0129..267de3201 100644 --- a/src/core/client/ui/components/Message/Message.css +++ b/src/core/client/ui/components/Message/Message.css @@ -8,16 +8,22 @@ box-sizing: border-box; border-radius: var(--round-corners); border-width: 1px; - border-left-width: calc(0.8 * var(--spacing-unit)); border-style: solid; + border-left-width: calc(0.8 * var(--spacing-unit)); } -.color { +.colorInfo { background-color: var(--palette-common-white); border-color: var(--palette-grey-main); color: var(--palette-grey-main); } +.colorValidation { + background-color: var(--palette-error-light); + border-color: var(--palette-error-darkest); + color: var(--palette-common-white); +} + .fullWidth { display: flex; width: 100%; @@ -25,5 +31,4 @@ .icon { margin-right: calc(0.8 * var(--spacing-unit)); - color: var(--palette-grey-main); } diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx index 19bb8ece5..9eb678f4f 100644 --- a/src/core/client/ui/components/Message/Message.tsx +++ b/src/core/client/ui/components/Message/Message.tsx @@ -27,15 +27,28 @@ export interface MessageProps { * Name of the icon, render if provided */ icon?: string; + /* + * Name of color, "info" stays by default - common gray one + */ + color?: "validation" | "info"; } const Message: StatelessComponent = props => { - const { className, classes, fullWidth, children, icon, ...rest } = props; + const { + className, + classes, + fullWidth, + children, + icon, + color, + ...rest + } = props; const rootClassName = cn( classes.root, - classes.color, { + [classes.colorInfo]: color === "info", + [classes.colorValidation]: color === "validation", [classes.fullWidth]: fullWidth, }, className @@ -54,6 +67,7 @@ const Message: StatelessComponent = props => { }; Message.defaultProps = { + color: "info", fullWidth: false, }; diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css b/src/core/client/ui/components/ValidationMessage/ValidationMessage.css deleted file mode 100644 index b3d6a6290..000000000 --- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css +++ /dev/null @@ -1,27 +0,0 @@ -.root { - composes: alertMessage from "talk-ui/shared/typography.css"; - position: relative; - display: inline-flex; - justify-content: flex-start; - align-items: center; - padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit); - box-sizing: border-box; - border-radius: var(--round-corners); - border-left-width: calc(0.5 * var(--spacing-unit)); - border-left-style: solid; -} - -.colorError { - background-color: var(--palette-error-light); - border-color: var(--palette-error-darkest); - color: var(--palette-common-white); -} - -.fullWidth { - display: flex; - width: 100%; -} - -.icon { - margin-right: var(--spacing-unit); -} diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx index c8e7b11ad..28bbec5a6 100644 --- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx +++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx @@ -4,7 +4,7 @@ menu: UI Kit --- import { Playground } from 'docz' -import ValidationMessage from './ValidationMessage.tsx' +import ValidationMessage from './ValidationMessage' import HorizontalGutter from '../HorizontalGutter' # ValidationMessage diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx index 0cc781560..c7abbb8cc 100644 --- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx +++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx @@ -1,10 +1,5 @@ -import cn from "classnames"; import React, { ReactNode, StatelessComponent } from "react"; - -import { withStyles } from "talk-ui/hocs"; - -import Icon from "../Icon"; -import * as styles from "./ValidationMessage.css"; +import Message from "../Message"; export interface ValidationMessageProps { /** @@ -16,34 +11,18 @@ export interface ValidationMessageProps { */ className?: string; /** - * Override or extend the styles applied to the component. + * If set renders a full width message */ - classes: typeof styles; - /* - * If set renders a full width message - */ fullWidth?: boolean; } const ValidationMessage: StatelessComponent = props => { - const { className, classes, fullWidth, children, ...rest } = props; - - const rootClassName = cn( - classes.root, - classes.colorError, - { - [classes.fullWidth]: fullWidth, - }, - className - ); + const { className, fullWidth, children, ...rest } = props; return ( -
- - warning - + {children} -
+ ); }; @@ -51,5 +30,4 @@ ValidationMessage.defaultProps = { fullWidth: false, }; -const enhanced = withStyles(styles)(ValidationMessage); -export default enhanced; +export default ValidationMessage; From b37ec2b944e16aa4b58634866d4f579a070d550e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Fri, 7 Sep 2018 12:54:22 -0300 Subject: [PATCH 03/13] Supporting icons with ValidationMessages --- .../ValidationMessage/ValidationMessage.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx index c7abbb8cc..34782a29d 100644 --- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx +++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx @@ -14,13 +14,22 @@ export interface ValidationMessageProps { * If set renders a full width message */ fullWidth?: boolean; + /* + * Name of the icon, if not provided it will default to warning icon + */ + icon?: string; } const ValidationMessage: StatelessComponent = props => { - const { className, fullWidth, children, ...rest } = props; + const { className, fullWidth, children, icon, ...rest } = props; return ( - + {children} ); From dce2177dcd99d4eebb58d18b58fdfa6da519a7a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Fri, 7 Sep 2018 13:03:56 -0300 Subject: [PATCH 04/13] Updated snapshots --- .../test/__snapshots__/signIn.spec.tsx.snap | 24 +-- .../test/__snapshots__/signUp.spec.tsx.snap | 164 +++++++++--------- .../__snapshots__/Message.spec.tsx.snap | 9 + 3 files changed, 103 insertions(+), 94 deletions(-) create mode 100644 src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap index cb01d2c1b..770f604f0 100644 --- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap @@ -34,11 +34,11 @@ exports[`accepts correct password 1`] = ` value="" />
@@ -180,11 +180,11 @@ exports[`accepts valid email 1`] = ` value="" />
@@ -290,11 +290,11 @@ exports[`checks for invalid email 1`] = ` value="invalid-email" />
@@ -321,11 +321,11 @@ exports[`checks for invalid email 1`] = ` value="" />
@@ -546,11 +546,11 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
@@ -577,11 +577,11 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap index 6293da7d8..b382a8713 100644 --- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap @@ -34,11 +34,11 @@ exports[`accepts correct password 1`] = ` value="" />
@@ -70,11 +70,11 @@ exports[`accepts correct password 1`] = ` value="" />
@@ -124,11 +124,11 @@ exports[`accepts correct password 1`] = ` value="" />
@@ -215,11 +215,11 @@ exports[`accepts correct password confirmation 1`] = ` value="" />
@@ -251,11 +251,11 @@ exports[`accepts correct password confirmation 1`] = ` value="" />
@@ -287,11 +287,11 @@ exports[`accepts correct password confirmation 1`] = ` value="" />
@@ -318,11 +318,11 @@ exports[`accepts correct password confirmation 1`] = ` value="testtest" />
@@ -432,11 +432,11 @@ exports[`accepts valid email 1`] = ` value="" />
@@ -468,11 +468,11 @@ exports[`accepts valid email 1`] = ` value="" />
@@ -499,11 +499,11 @@ exports[`accepts valid email 1`] = ` value="" />
@@ -590,11 +590,11 @@ exports[`accepts valid username 1`] = ` value="" />
@@ -649,11 +649,11 @@ exports[`accepts valid username 1`] = ` value="" />
@@ -680,11 +680,11 @@ exports[`accepts valid username 1`] = ` value="" />
@@ -771,11 +771,11 @@ exports[`checks for invalid characters in username 1`] = ` value="" />
@@ -807,11 +807,11 @@ exports[`checks for invalid characters in username 1`] = ` value="$%$§$%$§%" />
@@ -843,11 +843,11 @@ exports[`checks for invalid characters in username 1`] = ` value="" />
@@ -874,11 +874,11 @@ exports[`checks for invalid characters in username 1`] = ` value="" />
@@ -965,11 +965,11 @@ exports[`checks for invalid email 1`] = ` value="invalid-email" />
@@ -1001,11 +1001,11 @@ exports[`checks for invalid email 1`] = ` value="" />
@@ -1037,11 +1037,11 @@ exports[`checks for invalid email 1`] = ` value="" />
@@ -1068,11 +1068,11 @@ exports[`checks for invalid email 1`] = ` value="" />
@@ -1159,11 +1159,11 @@ exports[`checks for too long username 1`] = ` value="" />
@@ -1195,11 +1195,11 @@ exports[`checks for too long username 1`] = ` value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
@@ -1231,11 +1231,11 @@ exports[`checks for too long username 1`] = ` value="" />
@@ -1262,11 +1262,11 @@ exports[`checks for too long username 1`] = ` value="" />
@@ -1353,11 +1353,11 @@ exports[`checks for too short password 1`] = ` value="" />
@@ -1389,11 +1389,11 @@ exports[`checks for too short password 1`] = ` value="" />
@@ -1425,11 +1425,11 @@ exports[`checks for too short password 1`] = ` value="pass" />
@@ -1456,11 +1456,11 @@ exports[`checks for too short password 1`] = ` value="" />
@@ -1547,11 +1547,11 @@ exports[`checks for too short username 1`] = ` value="" />
@@ -1583,11 +1583,11 @@ exports[`checks for too short username 1`] = ` value="u" />
@@ -1619,11 +1619,11 @@ exports[`checks for too short username 1`] = ` value="" />
@@ -1650,11 +1650,11 @@ exports[`checks for too short username 1`] = ` value="" />
@@ -1741,11 +1741,11 @@ exports[`checks for wrong password confirmation 1`] = ` value="" />
@@ -1777,11 +1777,11 @@ exports[`checks for wrong password confirmation 1`] = ` value="" />
@@ -1813,11 +1813,11 @@ exports[`checks for wrong password confirmation 1`] = ` value="" />
@@ -1844,11 +1844,11 @@ exports[`checks for wrong password confirmation 1`] = ` value="not-matching" />
@@ -2077,11 +2077,11 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
@@ -2113,11 +2113,11 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
@@ -2149,11 +2149,11 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
@@ -2180,11 +2180,11 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
diff --git a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap new file mode 100644 index 000000000..0b0f3046d --- /dev/null +++ b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +
+ Hello World +
+`; From b5db80b1e1cbee6989682ee0cb305fd0bc9cb470 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Tue, 11 Sep 2018 09:47:59 -0300 Subject: [PATCH 05/13] Updated colors --- src/core/client/ui/components/Message/Message.css | 4 ++-- src/core/client/ui/components/Message/Message.tsx | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/core/client/ui/components/Message/Message.css b/src/core/client/ui/components/Message/Message.css index 267de3201..57dbe34bf 100644 --- a/src/core/client/ui/components/Message/Message.css +++ b/src/core/client/ui/components/Message/Message.css @@ -12,13 +12,13 @@ border-left-width: calc(0.8 * var(--spacing-unit)); } -.colorInfo { +.colorGrey { background-color: var(--palette-common-white); border-color: var(--palette-grey-main); color: var(--palette-grey-main); } -.colorValidation { +.colorError { background-color: var(--palette-error-light); border-color: var(--palette-error-darkest); color: var(--palette-common-white); diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx index 9eb678f4f..258174288 100644 --- a/src/core/client/ui/components/Message/Message.tsx +++ b/src/core/client/ui/components/Message/Message.tsx @@ -28,9 +28,9 @@ export interface MessageProps { */ icon?: string; /* - * Name of color, "info" stays by default - common gray one + * Name of color, "grey" stays by default - common gray one */ - color?: "validation" | "info"; + color?: "error" | "grey"; } const Message: StatelessComponent = props => { @@ -47,8 +47,8 @@ const Message: StatelessComponent = props => { const rootClassName = cn( classes.root, { - [classes.colorInfo]: color === "info", - [classes.colorValidation]: color === "validation", + [classes.colorGrey]: color === "grey", + [classes.colorError]: color === "error", [classes.fullWidth]: fullWidth, }, className @@ -67,7 +67,7 @@ const Message: StatelessComponent = props => { }; Message.defaultProps = { - color: "info", + color: "grey", fullWidth: false, }; From a35ee7909837d708e3b7edd6afe7fb55dd272365 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Tue, 11 Sep 2018 09:57:55 -0300 Subject: [PATCH 06/13] Adding MessageIcon --- .../client/ui/components/Message/Message.mdx | 3 +- .../client/ui/components/Message/Message.tsx | 19 +--------- .../ui/components/Message/MessageIcon.css | 5 +++ .../ui/components/Message/MessageIcon.tsx | 36 +++++++++++++++++++ 4 files changed, 44 insertions(+), 19 deletions(-) create mode 100644 src/core/client/ui/components/Message/MessageIcon.css create mode 100644 src/core/client/ui/components/Message/MessageIcon.tsx diff --git a/src/core/client/ui/components/Message/Message.mdx b/src/core/client/ui/components/Message/Message.mdx index 9a876d76c..828d18036 100644 --- a/src/core/client/ui/components/Message/Message.mdx +++ b/src/core/client/ui/components/Message/Message.mdx @@ -5,6 +5,7 @@ menu: UI Kit import { Playground } from 'docz' import Message from './Message' +import MessageIcon from './MessageIcon' import HorizontalGutter from '../HorizontalGutter' # Message @@ -20,7 +21,7 @@ import HorizontalGutter from '../HorizontalGutter' ## Usage with icon - Edit: 1 min 23 secs Remaining + alarmEdit: 1 min 23 secs Remaining diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx index 258174288..c3f4ea2e8 100644 --- a/src/core/client/ui/components/Message/Message.tsx +++ b/src/core/client/ui/components/Message/Message.tsx @@ -24,25 +24,13 @@ export interface MessageProps { */ fullWidth?: boolean; /* - * Name of the icon, render if provided - */ - icon?: string; - /* * Name of color, "grey" stays by default - common gray one */ color?: "error" | "grey"; } const Message: StatelessComponent = props => { - const { - className, - classes, - fullWidth, - children, - icon, - color, - ...rest - } = props; + const { className, classes, fullWidth, children, color, ...rest } = props; const rootClassName = cn( classes.root, @@ -56,11 +44,6 @@ const Message: StatelessComponent = props => { return (
- {icon && ( - - {icon} - - )} {children}
); diff --git a/src/core/client/ui/components/Message/MessageIcon.css b/src/core/client/ui/components/Message/MessageIcon.css new file mode 100644 index 000000000..df730b2de --- /dev/null +++ b/src/core/client/ui/components/Message/MessageIcon.css @@ -0,0 +1,5 @@ +.root { + &:first-child { + margin-right: calc(0.5 * var(--spacing-unit)); + } +} diff --git a/src/core/client/ui/components/Message/MessageIcon.tsx b/src/core/client/ui/components/Message/MessageIcon.tsx new file mode 100644 index 000000000..cd4d0ad13 --- /dev/null +++ b/src/core/client/ui/components/Message/MessageIcon.tsx @@ -0,0 +1,36 @@ +import cn from "classnames"; +import React, { HTMLAttributes, Ref, StatelessComponent } from "react"; + +import Icon, { IconProps } from "talk-ui/components/Icon"; +import { withForwardRef, withStyles } from "talk-ui/hocs"; + +import * as styles from "./MessageIcon.css"; + +interface InnerProps extends HTMLAttributes { + /** + * This prop can be used to add custom classnames. + * It is handled by the `withStyles `HOC. + */ + classes: typeof styles & IconProps["classes"]; + + size?: IconProps["size"]; + + /** The name of the icon to render */ + children: string; + + /** Internal: Forwarded Ref */ + forwardRef?: Ref; +} + +export const MessageIcon: StatelessComponent = props => { + const { classes, className, forwardRef, ...rest } = props; + const rootClassName = cn(classes.root, className); + return ; +}; + +MessageIcon.defaultProps = { + size: "sm", +}; + +const enhanced = withForwardRef(withStyles(styles)(MessageIcon)); +export default enhanced; From 91d421ad46a215be976a0a0fd24924e56873721e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Tue, 11 Sep 2018 10:01:14 -0300 Subject: [PATCH 07/13] Updated tests --- .../ui/components/Message/Message.spec.tsx | 14 ++++++++++++++ .../Message/__snapshots__/Message.spec.tsx.snap | 16 +++++++++++++++- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/src/core/client/ui/components/Message/Message.spec.tsx b/src/core/client/ui/components/Message/Message.spec.tsx index d1335f8d9..6f7bfc8cc 100644 --- a/src/core/client/ui/components/Message/Message.spec.tsx +++ b/src/core/client/ui/components/Message/Message.spec.tsx @@ -4,6 +4,7 @@ import TestRenderer from "react-test-renderer"; import { PropTypesOf } from "talk-ui/types"; import Message from "./Message"; +import MessageIcon from "./MessageIcon"; it("renders correctly", () => { const props: PropTypesOf = { @@ -13,3 +14,16 @@ it("renders correctly", () => { const renderer = TestRenderer.create(); expect(renderer.toJSON()).toMatchSnapshot(); }); + +it("renders icon", () => { + const props: PropTypesOf = { + className: "custom", + }; + + const renderer = TestRenderer.create( + + alertAlert Message + + ); + expect(renderer.toJSON()).toMatchSnapshot(); +}); diff --git a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap index 0b0f3046d..ae81503dc 100644 --- a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap +++ b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap @@ -2,8 +2,22 @@ exports[`renders correctly 1`] = `
Hello World
`; + +exports[`renders icon 1`] = ` +
+ + Alert Message +
+`; From f7fa1dae23e12d20f902a1ff23c2eed16f14bb7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Tue, 11 Sep 2018 10:17:46 -0300 Subject: [PATCH 08/13] Updated tests --- .../test/__snapshots__/signIn.spec.tsx.snap | 54 +-- .../test/__snapshots__/signUp.spec.tsx.snap | 369 ++++-------------- .../ValidationMessage.spec.tsx.snap | 9 +- 3 files changed, 96 insertions(+), 336 deletions(-) diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap index 770f604f0..b4db66fc7 100644 --- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap @@ -34,14 +34,9 @@ exports[`accepts correct password 1`] = ` value="" />
- This field is required. @@ -180,14 +175,9 @@ exports[`accepts valid email 1`] = ` value="" />
- This field is required. @@ -290,14 +280,9 @@ exports[`checks for invalid email 1`] = ` value="invalid-email" />
- Please enter a valid email address. @@ -321,14 +306,9 @@ exports[`checks for invalid email 1`] = ` value="" />
- This field is required. @@ -546,14 +526,9 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
- This field is required. @@ -577,14 +552,9 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
- This field is required. diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap index b382a8713..e18788d70 100644 --- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap @@ -34,14 +34,9 @@ exports[`accepts correct password 1`] = ` value="" />
- This field is required. @@ -70,14 +65,9 @@ exports[`accepts correct password 1`] = ` value="" />
- This field is required. @@ -124,14 +114,9 @@ exports[`accepts correct password 1`] = ` value="" />
- This field is required. @@ -215,14 +200,9 @@ exports[`accepts correct password confirmation 1`] = ` value="" />
- This field is required. @@ -251,14 +231,9 @@ exports[`accepts correct password confirmation 1`] = ` value="" />
- This field is required. @@ -287,14 +262,9 @@ exports[`accepts correct password confirmation 1`] = ` value="" />
- This field is required. @@ -318,14 +288,9 @@ exports[`accepts correct password confirmation 1`] = ` value="testtest" />
- Passwords do not match. Try again. @@ -432,14 +397,9 @@ exports[`accepts valid email 1`] = ` value="" />
- This field is required. @@ -468,14 +428,9 @@ exports[`accepts valid email 1`] = ` value="" />
- This field is required. @@ -499,14 +454,9 @@ exports[`accepts valid email 1`] = ` value="" />
- This field is required. @@ -590,14 +540,9 @@ exports[`accepts valid username 1`] = ` value="" />
- This field is required. @@ -649,14 +594,9 @@ exports[`accepts valid username 1`] = ` value="" />
- This field is required. @@ -680,14 +620,9 @@ exports[`accepts valid username 1`] = ` value="" />
- This field is required. @@ -771,14 +706,9 @@ exports[`checks for invalid characters in username 1`] = ` value="" />
- This field is required. @@ -807,14 +737,9 @@ exports[`checks for invalid characters in username 1`] = ` value="$%$§$%$§%" />
- Invalid characters. Try again. @@ -843,14 +768,9 @@ exports[`checks for invalid characters in username 1`] = ` value="" />
- This field is required. @@ -874,14 +794,9 @@ exports[`checks for invalid characters in username 1`] = ` value="" />
- This field is required. @@ -965,14 +880,9 @@ exports[`checks for invalid email 1`] = ` value="invalid-email" />
- Please enter a valid email address. @@ -1001,14 +911,9 @@ exports[`checks for invalid email 1`] = ` value="" />
- This field is required. @@ -1037,14 +942,9 @@ exports[`checks for invalid email 1`] = ` value="" />
- This field is required. @@ -1068,14 +968,9 @@ exports[`checks for invalid email 1`] = ` value="" />
- This field is required. @@ -1159,14 +1054,9 @@ exports[`checks for too long username 1`] = ` value="" />
- This field is required. @@ -1195,14 +1085,9 @@ exports[`checks for too long username 1`] = ` value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
- Usernames cannot be longer than ⁨20⁩ characters. @@ -1231,14 +1116,9 @@ exports[`checks for too long username 1`] = ` value="" />
- This field is required. @@ -1262,14 +1142,9 @@ exports[`checks for too long username 1`] = ` value="" />
- This field is required. @@ -1353,14 +1228,9 @@ exports[`checks for too short password 1`] = ` value="" />
- This field is required. @@ -1389,14 +1259,9 @@ exports[`checks for too short password 1`] = ` value="" />
- This field is required. @@ -1425,14 +1290,9 @@ exports[`checks for too short password 1`] = ` value="pass" />
- Password must contain at least ⁨8⁩ characters. @@ -1456,14 +1316,9 @@ exports[`checks for too short password 1`] = ` value="" />
- This field is required. @@ -1547,14 +1402,9 @@ exports[`checks for too short username 1`] = ` value="" />
- This field is required. @@ -1583,14 +1433,9 @@ exports[`checks for too short username 1`] = ` value="u" />
- Username must contain at least ⁨3⁩ characters. @@ -1619,14 +1464,9 @@ exports[`checks for too short username 1`] = ` value="" />
- This field is required. @@ -1650,14 +1490,9 @@ exports[`checks for too short username 1`] = ` value="" />
- This field is required. @@ -1741,14 +1576,9 @@ exports[`checks for wrong password confirmation 1`] = ` value="" />
- This field is required. @@ -1777,14 +1607,9 @@ exports[`checks for wrong password confirmation 1`] = ` value="" />
- This field is required. @@ -1813,14 +1638,9 @@ exports[`checks for wrong password confirmation 1`] = ` value="" />
- This field is required. @@ -1844,14 +1664,9 @@ exports[`checks for wrong password confirmation 1`] = ` value="not-matching" />
- Passwords do not match. Try again. @@ -2077,14 +1892,9 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
- This field is required. @@ -2113,14 +1923,9 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
- This field is required. @@ -2149,14 +1954,9 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
- This field is required. @@ -2180,14 +1980,9 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
- This field is required. diff --git a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap index 7f03e37e0..da5a985c1 100644 --- a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap +++ b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap @@ -2,14 +2,9 @@ exports[`renders correctly 1`] = `
- Hello World
`; From 5a8ce7655cb191316965d2c0b04630dfd35651e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Tue, 11 Sep 2018 13:09:49 -0300 Subject: [PATCH 09/13] Updated tests --- .../test/__snapshots__/signIn.spec.tsx.snap | 54 ++- .../test/__snapshots__/signUp.spec.tsx.snap | 369 ++++++++++++++---- .../ui/components/Message/Message.spec.tsx | 6 +- .../client/ui/components/Message/Message.tsx | 3 - .../__snapshots__/Message.spec.tsx.snap | 2 +- .../ValidationMessage/ValidationMessage.tsx | 9 +- .../ValidationMessage.spec.tsx.snap | 9 +- 7 files changed, 341 insertions(+), 111 deletions(-) diff --git a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap index b4db66fc7..c21b65546 100644 --- a/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap @@ -34,9 +34,14 @@ exports[`accepts correct password 1`] = ` value="" />
+ This field is required. @@ -175,9 +180,14 @@ exports[`accepts valid email 1`] = ` value="" />
+ This field is required. @@ -280,9 +290,14 @@ exports[`checks for invalid email 1`] = ` value="invalid-email" />
+ Please enter a valid email address. @@ -306,9 +321,14 @@ exports[`checks for invalid email 1`] = ` value="" />
+ This field is required. @@ -526,9 +546,14 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
+ This field is required. @@ -552,9 +577,14 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
+ This field is required. diff --git a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap index e18788d70..88ec82da6 100644 --- a/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap +++ b/src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap @@ -34,9 +34,14 @@ exports[`accepts correct password 1`] = ` value="" />
+ This field is required. @@ -65,9 +70,14 @@ exports[`accepts correct password 1`] = ` value="" />
+ This field is required. @@ -114,9 +124,14 @@ exports[`accepts correct password 1`] = ` value="" />
+ This field is required. @@ -200,9 +215,14 @@ exports[`accepts correct password confirmation 1`] = ` value="" />
+ This field is required. @@ -231,9 +251,14 @@ exports[`accepts correct password confirmation 1`] = ` value="" />
+ This field is required. @@ -262,9 +287,14 @@ exports[`accepts correct password confirmation 1`] = ` value="" />
+ This field is required. @@ -288,9 +318,14 @@ exports[`accepts correct password confirmation 1`] = ` value="testtest" />
+ Passwords do not match. Try again. @@ -397,9 +432,14 @@ exports[`accepts valid email 1`] = ` value="" />
+ This field is required. @@ -428,9 +468,14 @@ exports[`accepts valid email 1`] = ` value="" />
+ This field is required. @@ -454,9 +499,14 @@ exports[`accepts valid email 1`] = ` value="" />
+ This field is required. @@ -540,9 +590,14 @@ exports[`accepts valid username 1`] = ` value="" />
+ This field is required. @@ -594,9 +649,14 @@ exports[`accepts valid username 1`] = ` value="" />
+ This field is required. @@ -620,9 +680,14 @@ exports[`accepts valid username 1`] = ` value="" />
+ This field is required. @@ -706,9 +771,14 @@ exports[`checks for invalid characters in username 1`] = ` value="" />
+ This field is required. @@ -737,9 +807,14 @@ exports[`checks for invalid characters in username 1`] = ` value="$%$§$%$§%" />
+ Invalid characters. Try again. @@ -768,9 +843,14 @@ exports[`checks for invalid characters in username 1`] = ` value="" />
+ This field is required. @@ -794,9 +874,14 @@ exports[`checks for invalid characters in username 1`] = ` value="" />
+ This field is required. @@ -880,9 +965,14 @@ exports[`checks for invalid email 1`] = ` value="invalid-email" />
+ Please enter a valid email address. @@ -911,9 +1001,14 @@ exports[`checks for invalid email 1`] = ` value="" />
+ This field is required. @@ -942,9 +1037,14 @@ exports[`checks for invalid email 1`] = ` value="" />
+ This field is required. @@ -968,9 +1068,14 @@ exports[`checks for invalid email 1`] = ` value="" />
+ This field is required. @@ -1054,9 +1159,14 @@ exports[`checks for too long username 1`] = ` value="" />
+ This field is required. @@ -1085,9 +1195,14 @@ exports[`checks for too long username 1`] = ` value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
+ Usernames cannot be longer than ⁨20⁩ characters. @@ -1116,9 +1231,14 @@ exports[`checks for too long username 1`] = ` value="" />
+ This field is required. @@ -1142,9 +1262,14 @@ exports[`checks for too long username 1`] = ` value="" />
+ This field is required. @@ -1228,9 +1353,14 @@ exports[`checks for too short password 1`] = ` value="" />
+ This field is required. @@ -1259,9 +1389,14 @@ exports[`checks for too short password 1`] = ` value="" />
+ This field is required. @@ -1290,9 +1425,14 @@ exports[`checks for too short password 1`] = ` value="pass" />
+ Password must contain at least ⁨8⁩ characters. @@ -1316,9 +1456,14 @@ exports[`checks for too short password 1`] = ` value="" />
+ This field is required. @@ -1402,9 +1547,14 @@ exports[`checks for too short username 1`] = ` value="" />
+ This field is required. @@ -1433,9 +1583,14 @@ exports[`checks for too short username 1`] = ` value="u" />
+ Username must contain at least ⁨3⁩ characters. @@ -1464,9 +1619,14 @@ exports[`checks for too short username 1`] = ` value="" />
+ This field is required. @@ -1490,9 +1650,14 @@ exports[`checks for too short username 1`] = ` value="" />
+ This field is required. @@ -1576,9 +1741,14 @@ exports[`checks for wrong password confirmation 1`] = ` value="" />
+ This field is required. @@ -1607,9 +1777,14 @@ exports[`checks for wrong password confirmation 1`] = ` value="" />
+ This field is required. @@ -1638,9 +1813,14 @@ exports[`checks for wrong password confirmation 1`] = ` value="" />
+ This field is required. @@ -1664,9 +1844,14 @@ exports[`checks for wrong password confirmation 1`] = ` value="not-matching" />
+ Passwords do not match. Try again. @@ -1892,9 +2077,14 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
+ This field is required. @@ -1923,9 +2113,14 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
+ This field is required. @@ -1954,9 +2149,14 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
+ This field is required. @@ -1980,9 +2180,14 @@ exports[`shows error when submitting empty form 1`] = ` value="" />
+ This field is required. diff --git a/src/core/client/ui/components/Message/Message.spec.tsx b/src/core/client/ui/components/Message/Message.spec.tsx index 6f7bfc8cc..ac69cea85 100644 --- a/src/core/client/ui/components/Message/Message.spec.tsx +++ b/src/core/client/ui/components/Message/Message.spec.tsx @@ -16,12 +16,8 @@ it("renders correctly", () => { }); it("renders icon", () => { - const props: PropTypesOf = { - className: "custom", - }; - const renderer = TestRenderer.create( - + alertAlert Message ); diff --git a/src/core/client/ui/components/Message/Message.tsx b/src/core/client/ui/components/Message/Message.tsx index c3f4ea2e8..7547d8442 100644 --- a/src/core/client/ui/components/Message/Message.tsx +++ b/src/core/client/ui/components/Message/Message.tsx @@ -1,9 +1,6 @@ import cn from "classnames"; import React, { ReactNode, StatelessComponent } from "react"; - import { withStyles } from "talk-ui/hocs"; - -import Icon from "../Icon"; import * as styles from "./Message.css"; export interface MessageProps { diff --git a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap index ae81503dc..38381f0c6 100644 --- a/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap +++ b/src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap @@ -10,7 +10,7 @@ exports[`renders correctly 1`] = ` exports[`renders icon 1`] = `