wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-14 11:18:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into next-edit

Browse Source
This commit is contained in:
Chi Vinh Le
2018-09-12 21:44:16 +02:00
parent 32e56e805c 185b3de8e1
commit aa904ab0e2
14 changed files with 292 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap
+12 -12
View File
@@ -34,11 +34,11 @@ exports[`accepts correct password 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -180,11 +180,11 @@ exports[`accepts valid email 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -290,11 +290,11 @@ exports[`checks for invalid email 1`] = `
value="invalid-email"
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -321,11 +321,11 @@ exports[`checks for invalid email 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -546,11 +546,11 @@ exports[`shows error when submitting empty form 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -577,11 +577,11 @@ exports[`shows error when submitting empty form 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap
+82 -82
View File
@@ -34,11 +34,11 @@ exports[`accepts correct password 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -70,11 +70,11 @@ exports[`accepts correct password 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -124,11 +124,11 @@ exports[`accepts correct password 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -215,11 +215,11 @@ exports[`accepts correct password confirmation 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -251,11 +251,11 @@ exports[`accepts correct password confirmation 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -287,11 +287,11 @@ exports[`accepts correct password confirmation 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -318,11 +318,11 @@ exports[`accepts correct password confirmation 1`] = `
value="testtest"
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -432,11 +432,11 @@ exports[`accepts valid email 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -468,11 +468,11 @@ exports[`accepts valid email 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -499,11 +499,11 @@ exports[`accepts valid email 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -590,11 +590,11 @@ exports[`accepts valid username 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -649,11 +649,11 @@ exports[`accepts valid username 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -680,11 +680,11 @@ exports[`accepts valid username 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -771,11 +771,11 @@ exports[`checks for invalid characters in username 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -807,11 +807,11 @@ exports[`checks for invalid characters in username 1`] = `
value="$%$§$%$§%"
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -843,11 +843,11 @@ exports[`checks for invalid characters in username 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -874,11 +874,11 @@ exports[`checks for invalid characters in username 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -965,11 +965,11 @@ exports[`checks for invalid email 1`] = `
value="invalid-email"
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1001,11 +1001,11 @@ exports[`checks for invalid email 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1037,11 +1037,11 @@ exports[`checks for invalid email 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1068,11 +1068,11 @@ exports[`checks for invalid email 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1159,11 +1159,11 @@ exports[`checks for too long username 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1195,11 +1195,11 @@ exports[`checks for too long username 1`] = `
value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1231,11 +1231,11 @@ exports[`checks for too long username 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1262,11 +1262,11 @@ exports[`checks for too long username 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1353,11 +1353,11 @@ exports[`checks for too short password 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1389,11 +1389,11 @@ exports[`checks for too short password 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1425,11 +1425,11 @@ exports[`checks for too short password 1`] = `
value="pass"
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1456,11 +1456,11 @@ exports[`checks for too short password 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1547,11 +1547,11 @@ exports[`checks for too short username 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1583,11 +1583,11 @@ exports[`checks for too short username 1`] = `
value="u"
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1619,11 +1619,11 @@ exports[`checks for too short username 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1650,11 +1650,11 @@ exports[`checks for too short username 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1741,11 +1741,11 @@ exports[`checks for wrong password confirmation 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1777,11 +1777,11 @@ exports[`checks for wrong password confirmation 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1813,11 +1813,11 @@ exports[`checks for wrong password confirmation 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -1844,11 +1844,11 @@ exports[`checks for wrong password confirmation 1`] = `
value="not-matching"
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -2077,11 +2077,11 @@ exports[`shows error when submitting empty form 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -2113,11 +2113,11 @@ exports[`shows error when submitting empty form 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -2149,11 +2149,11 @@ exports[`shows error when submitting empty form 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
@@ -2180,11 +2180,11 @@ exports[`shows error when submitting empty form 1`] = `
value=""
/>
<div
className="ValidationMessage-root ValidationMessage-colorError ValidationMessage-fullWidth"
className="Message-root Message-colorError Message-fullWidth"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
src/core/client/ui/components/ValidationMessage/ValidationMessage.css → src/core/client/ui/components/Message/Message.css
+8 -5
View File
@@ -7,8 +7,15 @@
padding: calc(0.5 * var(--spacing-unit)) var(--spacing-unit);
box-sizing: border-box;
border-radius: var(--round-corners);
border-width: 1px;
border-style: solid;
border-left-width: calc(0.5 * var(--spacing-unit));
border-left-style: solid;
}
.colorGrey {
background-color: var(--palette-common-white);
border-color: var(--palette-grey-main);
color: var(--palette-grey-main);
}
.colorError {
@@ -21,7 +28,3 @@
display: flex;
width: 100%;
}
.icon {
margin-right: var(--spacing-unit);
}
src/core/client/ui/components/Message/Message.mdx
+28
View File
@@ -0,0 +1,28 @@
---
name: Message
menu: UI Kit
---
import { Playground } from 'docz'
import Message from './Message'
import MessageIcon from './MessageIcon'
import HorizontalGutter from '../HorizontalGutter'
# Message
## Basic Use
<Playground>
<HorizontalGutter>
<Message>This is a message</Message>
<Message fullWidth>Contrary to popular belief, Lorem Ipsum is not simply random text.</Message>
</HorizontalGutter>
</Playground>
## Usage with icon
<Playground>
<HorizontalGutter>
<Message><MessageIcon size="sm">alarm</MessageIcon>Edit: 1 min 23 secs Remaining</Message>
</HorizontalGutter>
</Playground>
src/core/client/ui/components/Message/Message.spec.tsx
+25
View File
@@ -0,0 +1,25 @@
import React from "react";
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<typeof Message> = {
className: "custom",
children: "Hello World",
};
const renderer = TestRenderer.create(<Message {...props} />);
expect(renderer.toJSON()).toMatchSnapshot();
});
it("renders icon", () => {
const renderer = TestRenderer.create(
<Message>
<MessageIcon>alert</MessageIcon>Alert Message
</Message>
);
expect(renderer.toJSON()).toMatchSnapshot();
});
src/core/client/ui/components/Message/Message.tsx
+55
View File
@@ -0,0 +1,55 @@
import cn from "classnames";
import React, { ReactNode, StatelessComponent } from "react";
import { withStyles } from "talk-ui/hocs";
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 color, "grey" stays by default - common gray one
*/
color?: "error" | "grey";
}
const Message: StatelessComponent<MessageProps> = props => {
const { className, classes, fullWidth, children, color, ...rest } = props;
const rootClassName = cn(
classes.root,
{
[classes.colorGrey]: color === "grey",
[classes.colorError]: color === "error",
[classes.fullWidth]: fullWidth,
},
className
);
return (
<div className={rootClassName} {...rest}>
{children}
</div>
);
};
Message.defaultProps = {
color: "grey",
fullWidth: false,
};
const enhanced = withStyles(styles)(Message);
export default enhanced;
src/core/client/ui/components/Message/MessageIcon.css
+5
View File
@@ -0,0 +1,5 @@
.root {
&:first-child {
margin-right: calc(0.5 * var(--spacing-unit));
}
}
src/core/client/ui/components/Message/MessageIcon.tsx
+36
View File
@@ -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<HTMLSpanElement> {
/**
* 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<HTMLSpanElement>;
}
export const MessageIcon: StatelessComponent<InnerProps> = props => {
const { classes, className, forwardRef, ...rest } = props;
const rootClassName = cn(classes.root, className);
return <Icon className={rootClassName} {...rest} forwardRef={forwardRef} />;
};
MessageIcon.defaultProps = {
size: "sm",
};
const enhanced = withForwardRef(withStyles(styles)(MessageIcon));
export default enhanced;
src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap
+23
View File
@@ -0,0 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<div
className="Message-root Message-colorGrey custom"
>
Hello World
</div>
`;
exports[`renders icon 1`] = `
<div
className="Message-root Message-colorGrey"
>
<span
aria-hidden="true"
className="Icon-root MessageIcon-root Icon-sm"
>
alert
</span>
Alert Message
</div>
`;
src/core/client/ui/components/Message/index.ts
+1
View File
@@ -0,0 +1 @@
export { default } from "./Message";
src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
+1 -1
View File
@@ -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
src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
+13 -28
View File
@@ -1,10 +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 "./ValidationMessage.css";
import Message from "../Message";
import MessageIcon from "../Message/MessageIcon";
export interface ValidationMessageProps {
/**
@@ -16,34 +12,24 @@ 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<ValidationMessageProps> = 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 (
<div className={rootClassName} {...rest}>
<Icon size="sm" className={classes.icon}>
warning
</Icon>
<Message
color="error"
className={className}
fullWidth={fullWidth}
{...rest}
>
<MessageIcon>warning</MessageIcon>
{children}
</div>
</Message>
);
};
@@ -51,5 +37,4 @@ ValidationMessage.defaultProps = {
fullWidth: false,
};
const enhanced = withStyles(styles)(ValidationMessage);
export default enhanced;
export default ValidationMessage;
src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
+2 -2
View File
@@ -2,11 +2,11 @@
exports[`renders correctly 1`] = `
<div
className="ValidationMessage-root ValidationMessage-colorError custom"
className="Message-root Message-colorError custom"
>
<span
aria-hidden="true"
className="Icon-root ValidationMessage-icon Icon-sm"
className="Icon-root MessageIcon-root Icon-sm"
>
warning
</span>
src/core/client/ui/components/index.ts
+1
View File
@@ -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";