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

Merge branch 'auth-views' of github.com:coralproject/talk into auth-views

Browse Source
This commit is contained in:
Belen Curcio
2018-08-10 11:52:09 -03:00
parent bec5b85039 594c74c8c1
commit 06f9c0a212
67 changed files with 1152 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+7 -7
View File
@@ -15001,9 +15001,9 @@
"dev": true
},
"matchmediaquery": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.2.1.tgz",
"integrity": "sha1-IjxwBXk94D5HzpKxMoWnLEStos8=",
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.0.tgz",
"integrity": "sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==",
"dev": true,
"requires": {
"css-mediaquery": "^0.1.2"
@@ -19584,13 +19584,13 @@
}
},
"react-responsive": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-4.1.0.tgz",
"integrity": "sha512-ZuDraf0qsJlyiTwzeva+foHx83IP6SIhru9o7BvMwQ4ZHjRIL5WjdgVNNrKSRbmeWO9rEJoMpabei/5lJn8KaA==",
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-5.0.0.tgz",
"integrity": "sha512-oEimZ0FTCC3/pjGDEBHOz06nWbBNDIbMGOdRYp6K9SBUmrqgNAX77hTiqvmRQeLyI97zz4F4kiaFRxFspDxE+w==",
"dev": true,
"requires": {
"hyphenate-style-name": "^1.0.0",
"matchmediaquery": "^0.2.1",
"matchmediaquery": "^0.3.0",
"prop-types": "^15.6.1"
}
},
package.json
+1 -1
View File
@@ -176,7 +176,7 @@
"react-final-form": "^3.6.4",
"react-popper": "^1.0.0",
"react-relay": "github:coralproject/patched#react-relay",
"react-responsive": "^4.1.0",
"react-responsive": "^5.0.0",
"react-test-renderer": "^16.4.1",
"react-timeago": "^4.1.9",
"react-with-state-props": "^2.0.4",
src/core/build/createWebpackConfig.ts
-37
View File
@@ -488,42 +488,5 @@ export default function createWebpackConfig({
}),
],
},
/* Webpack config for our auth */
{
...baseConfig,
entry: [
// No polyfills for the embed.
(isProduction && "") ||
require.resolve("react-dev-utils/webpackHotDevClient"),
paths.appAuthIndex,
// Remove deactivated entries.
].filter(s => s),
output: {
...baseConfig.output,
library: "Talk",
filename: "assets/js/auth.js",
},
plugins: [
...baseConfig.plugins!,
// Generates an `stream.html` file with the <script> injected.
new HtmlWebpackPlugin({
filename: "auth.html",
template: paths.appAuthHTML,
inject: "head",
...htmlWebpackConfig,
}),
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In development, this will be an empty string.
new InterpolateHtmlPlugin(env),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
new ManifestPlugin({
fileName: "auth-manifest.json",
}),
],
},
];
}
src/core/client/auth/components/App.tsx
+23 -10
View File
@@ -1,22 +1,35 @@
import * as React from "react";
import { StatelessComponent } from "react";
import { Flex } from "talk-ui/components";
import * as styles from "./App.css";
import ForgotPasswordContainer from "../containers/ForgotPasswordContainer";
import ResetPasswordContainer from "../containers/ResetPasswordContainer";
import SignInContainer from "../containers/SignInContainer";
import SignUpContainer from "../containers/SignUpContainer";
export interface AppProps {
// TODO: (cvle) Remove %future added value when we have Relay 1.6
// https://github.com/facebook/relay/commit/1e87e43add7667a494f7ff4cfa7f03f1ab8d81a2
view: "SIGN_UP" | "SIGN_IN" | "FORGOT_PASSWORD" | "%future added value";
view:
| "SIGN_UP"
| "SIGN_IN"
| "FORGOT_PASSWORD"
| "RESET_PASSWORD"
| "%future added value";
}
const App: StatelessComponent<AppProps> = props => {
return (
<Flex justifyContent="center" className={styles.root}>
Current View: {props.view}
</Flex>
);
const App: StatelessComponent<AppProps> = ({ view }) => {
switch (view) {
case "SIGN_UP":
return <SignUpContainer />;
case "SIGN_IN":
return <SignInContainer />;
case "FORGOT_PASSWORD":
return <ForgotPasswordContainer />;
case "RESET_PASSWORD":
return <ResetPasswordContainer />;
default:
return <SignInContainer />;
}
};
export default App;
src/core/client/auth/components/ForgotPassword.css
+9
View File
@@ -0,0 +1,9 @@
.root {
width: 330px;
padding-top: calc(5 * var(--spacing-unit));
}
.footer {
padding-top: var(--spacing-unit);
width: 100%;
}
src/core/client/auth/components/ForgotPassword.tsx
+37
View File
@@ -0,0 +1,37 @@
import * as React from "react";
import { StatelessComponent } from "react";
import * as styles from "./SignIn.css";
import {
Button,
Flex,
FormField,
InputLabel,
TextField,
Typography,
} from "talk-ui/components";
const ForgotPassword: StatelessComponent = props => {
return (
<Flex itemGutter direction="column" className={styles.root}>
<Typography variant="heading1" align="center">
Forgot Password
</Typography>
<Typography variant="bodyCopy">
Enter your email address below and we will send you a link to reset your
password.
</Typography>
<FormField>
<InputLabel>Email Address</InputLabel>
<TextField />
</FormField>
<div className={styles.footer}>
<Button variant="filled" color="primary" size="large" fullWidth>
Send Email
</Button>
</div>
</Flex>
);
};
export default ForgotPassword;
src/core/client/auth/components/ResetPassword.css
+9
View File
@@ -0,0 +1,9 @@
.root {
width: 330px;
padding-top: calc(5 * var(--spacing-unit));
}
.footer {
padding-top: var(--spacing-unit);
width: 100%;
}
src/core/client/auth/components/ResetPassword.tsx
+38
View File
@@ -0,0 +1,38 @@
import * as React from "react";
import { StatelessComponent } from "react";
import * as styles from "./SignIn.css";
import {
Button,
Flex,
FormField,
InputLabel,
TextField,
Typography,
} from "talk-ui/components";
const ResetPassword: StatelessComponent = props => {
return (
<Flex itemGutter direction="column" className={styles.root}>
<Typography variant="heading1" align="center">
Reset Password
</Typography>
<FormField>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<TextField />
</FormField>
<FormField>
<InputLabel>Confirm Password</InputLabel>
<TextField />
</FormField>
<div className={styles.footer}>
<Button variant="filled" color="primary" size="large" fullWidth>
Reset Password
</Button>
</div>
</Flex>
);
};
export default ResetPassword;
src/core/client/auth/components/SignIn.css
+14
View File
@@ -0,0 +1,14 @@
.root {
width: 330px;
padding-top: calc(5 * var(--spacing-unit));
}
.forgotPassword {
text-align: right;
}
.footer,
.subFooter {
padding-top: var(--spacing-unit);
width: 100%;
}
src/core/client/auth/components/SignIn.tsx
+52
View File
@@ -0,0 +1,52 @@
import * as React from "react";
import { StatelessComponent } from "react";
import * as styles from "./SignIn.css";
import {
Button,
Flex,
FormField,
InputLabel,
TextField,
Typography,
} from "talk-ui/components";
const SignIn: StatelessComponent = props => {
return (
<Flex itemGutter direction="column" className={styles.root}>
<Typography variant="heading1" align="center">
Sign in to join the conversation
</Typography>
<FormField>
<InputLabel>Email Address</InputLabel>
<TextField />
</FormField>
<FormField>
<InputLabel>Password</InputLabel>
<TextField />
<span className={styles.forgotPassword}>
<Button variant="underlined" color="primary" size="small">
Forgot your password?
</Button>
</span>
</FormField>
<div className={styles.footer}>
<Button variant="filled" color="primary" size="large" fullWidth>
Sign in and join the conversation
</Button>
<Flex
itemGutter="half"
justifyContent="center"
className={styles.subFooter}
>
<Typography>Don't have an account?</Typography>
<Button variant="underlined" size="small" color="primary">
Sign Up
</Button>
</Flex>
</div>
</Flex>
);
};
export default SignIn;
src/core/client/auth/components/SignUp.css
+9
View File
@@ -0,0 +1,9 @@
.root {
width: 330px;
}
.footer,
.subFooter {
padding-top: var(--spacing-unit);
width: 100%;
}
src/core/client/auth/components/SignUp.tsx
+62
View File
@@ -0,0 +1,62 @@
import * as React from "react";
import { StatelessComponent } from "react";
import * as styles from "./SignUp.css";
import {
Button,
Flex,
FormField,
InputLabel,
TextField,
Typography,
} from "talk-ui/components";
const SignUp: StatelessComponent = props => {
return (
<Flex itemGutter direction="column" className={styles.root}>
<Flex direction="column">
<Typography variant="heading1" align="center">
Sign up to join the conversation
</Typography>
<FormField>
<InputLabel>Email Address</InputLabel>
<TextField />
</FormField>
<FormField>
<InputLabel>Username</InputLabel>
<Typography variant="inputDescription">
A unique identifier displayed on your comments. You may use “_” and
“.”
</Typography>
<TextField />
</FormField>
<FormField>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<TextField />
</FormField>
<FormField>
<InputLabel>Confirm Password</InputLabel>
<TextField />
</FormField>
</Flex>
<div className={styles.footer}>
<Button variant="filled" color="primary" size="large" fullWidth>
Sign up and join the conversation
</Button>
<Flex
itemGutter="half"
justifyContent="center"
className={styles.subFooter}
>
<Typography>Already have an account?</Typography>
<Button variant="underlined" size="small" color="primary">
Sign In
</Button>
</Flex>
</div>
</Flex>
);
};
export default SignUp;
src/core/client/auth/containers/ForgotPasswordContainer.tsx
+10
View File
@@ -0,0 +1,10 @@
import * as React from "react";
import { StatelessComponent } from "react";
import ForgotPassword from "../components/ForgotPassword";
const ForgotPasswordContainer: StatelessComponent = () => {
return <ForgotPassword />;
};
export default ForgotPasswordContainer;
src/core/client/auth/containers/ResetPasswordContainer.tsx
+10
View File
@@ -0,0 +1,10 @@
import * as React from "react";
import { StatelessComponent } from "react";
import ResetPassword from "../components/ResetPassword";
const ResetPasswordContainer: StatelessComponent = () => {
return <ResetPassword />;
};
export default ResetPasswordContainer;
src/core/client/auth/containers/SignInContainer.tsx
+10
View File
@@ -0,0 +1,10 @@
import * as React from "react";
import { StatelessComponent } from "react";
import SignIn from "../components/SignIn";
const SignInContainer: StatelessComponent = () => {
return <SignIn />;
};
export default SignInContainer;
src/core/client/auth/containers/SignUpContainer.tsx
+10
View File
@@ -0,0 +1,10 @@
import * as React from "react";
import { StatelessComponent } from "react";
import SignUp from "../components/SignUp";
const SignUpContainer: StatelessComponent = () => {
return <SignUp />;
};
export default SignUpContainer;
src/core/client/embed/index.html
+1 -1
View File
@@ -16,7 +16,7 @@
<body>
<h1 style="text-align: center" }>Talk 5.0 – Embed Stream</h1>
<div id="coralStreamEmbed" style="max-width: 600px; margin: 0 auto"></div>
<div id="coralStreamEmbed" style="max-width: 640px; margin: 0 auto"></div>
<script>
window.TalkEmbed = Talk.render(document.getElementById('coralStreamEmbed'));
</script>
src/core/client/framework/lib/bootstrap/TalkContext.tsx
+5
View File
@@ -2,6 +2,7 @@ import { LocalizationProvider } from "fluent-react/compat";
import { MessageContext } from "fluent/compat";
import { Child as PymChild } from "pym.js";
import React, { StatelessComponent } from "react";
import { MediaQueryMatchers } from "react-responsive";
import { Formatter } from "react-timeago";
import { Environment } from "relay-runtime";
@@ -18,6 +19,9 @@ export interface TalkContext {
/** formatter for timeago. */
timeagoFormatter?: Formatter;
/** media query values for testing purposes */
mediaQueryValues?: MediaQueryMatchers;
/**
* A way to listen for clicks that are e.g. outside of the
* current frame for `ClickOutside`
@@ -48,6 +52,7 @@ export const TalkContextProvider: StatelessComponent<{
value={{
timeagoFormatter: value.timeagoFormatter,
registerClickFarAway: value.registerClickFarAway,
mediaQueryValues: value.mediaQueryValues,
}}
>
{children}
src/core/client/stream/components/App.tsx
+1 -1
View File
@@ -2,7 +2,6 @@ import * as React from "react";
import { StatelessComponent } from "react";
import { Flex } from "talk-ui/components";
import PermalinkViewQuery from "../queries/PermalinkViewQuery";
import StreamQuery from "../queries/StreamQuery";
@@ -23,6 +22,7 @@ const App: StatelessComponent<AppProps> = props => {
{view}
</Flex>
);
// return <div className={styles.root}>{view}</div>;
};
export default App;
src/core/client/stream/components/Auth.tsx
-45
View File
@@ -1,45 +0,0 @@
import * as React from "react";
import { StatelessComponent } from "react";
import { Flex, Button, Popup, Typography } from "talk-ui/components";
interface AuthProps {
open: boolean;
focus: boolean;
openPopup: () => void;
closePopup: () => void;
setFocus: (focus: boolean) => void;
}
const Auth: StatelessComponent<AuthProps> = props => {
return (
<div>
<Popup
href={"/static/js/src-core-client-ui-components-popup-popup.js"}
title="Coral Project"
features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
open={props.open}
focus={props.focus}
onFocus={() => props.setFocus(true)}
onBlur={() => props.setFocus(false)}
onClose={props.closePopup}
/>
<Flex justifyContent="center">
<Typography>Join the conversation </Typography> |
<Button color="primary" onClick={props.openPopup} disabled={props.open}>
Sign In
</Button>
<Button
color="primary"
variant="outlined"
onClick={props.openPopup}
disabled={props.open}
>
Register
</Button>
</Flex>
</div>
);
};
export default Auth;
src/core/client/stream/components/Comment/Comment.css
+3
View File
@@ -1,3 +1,6 @@
.root {
width: 100%;
}
.footer {
margin-top: var(--spacing-unit);
}
src/core/client/stream/components/Comment/Comment.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export interface CommentProps {
const Comment: StatelessComponent<CommentProps> = props => {
return (
<div role="article">
<div role="article" className={styles.root}>
<TopBar>
{props.author &&
props.author.username && <Username>{props.author.username}</Username>}
src/core/client/stream/components/Comment/TopBar.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export interface TopBarProps {
const TopBar: StatelessComponent<TopBarProps> = props => {
const rootClassName = cn(styles.root, props.className);
return (
<MatchMedia minWidth="xs">
<MatchMedia gtWidth="xs">
{matches => (
<Flex
className={rootClassName}
src/core/client/stream/components/Comment/Username.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export interface UsernameProps {
const Username: StatelessComponent<UsernameProps> = props => {
return (
<MatchMedia minWidth="xs">
<MatchMedia gtWidth="xs">
{matches => (
<Typography
variant={matches ? "heading2" : "heading3"}
src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
+1
View File
@@ -2,6 +2,7 @@
exports[`renders username and body 1`] = `
<div
className="Comment-root"
role="article"
>
<TopBar>
src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
+8 -4
View File
@@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly on big screens 1`] = `
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
>
<div>
Hello World
@@ -13,9 +15,11 @@ exports[`renders correctly on big screens 1`] = `
`;
exports[`renders correctly on small screens 1`] = `
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<div>
Hello World
src/core/client/stream/components/PermalinkButton/PermalinkButton.tsx
+2 -2
View File
@@ -57,10 +57,10 @@ class Permalink extends React.Component<PermalinkProps> {
active={visible}
size="small"
>
<MatchMedia minWidth="xs">
<MatchMedia gtWidth="xs">
<ButtonIcon>share</ButtonIcon>
</MatchMedia>
<Localized id="comments-permalink-share">
<Localized id="comments-permalinkButton-share">
<span>Share</span>
</Localized>
</Button>
src/core/client/stream/components/PermalinkButton/PermalinkPopover.tsx
+7 -3
View File
@@ -38,15 +38,19 @@ class PermalinkPopover extends React.Component<InnerProps> {
const { copied } = this.state;
return (
<Flex itemGutter="half" className={styles.root}>
<TextField defaultValue={permalinkURL} className={styles.textField} />
<TextField
defaultValue={permalinkURL}
className={styles.textField}
readOnly
/>
<CopyToClipboard text={permalinkURL} onCopy={this.onCopy}>
<Button color="primary" variant="filled" size="small">
{copied ? (
<Localized id="comments-permalink-copied">
<Localized id="comments-permalinkPopover-copied">
<span>Copied!</span>
</Localized>
) : (
<Localized id="comments-permalink-copy">
<Localized id="comments-permalinkPopover-copy">
<span>Copy</span>
</Localized>
)}
src/core/client/stream/components/PermalinkView.tsx
+21 -14
View File
@@ -1,3 +1,4 @@
import { Localized } from "fluent-react/compat";
import React, { MouseEvent, StatelessComponent } from "react";
import { Button, Flex, Typography } from "talk-ui/components";
@@ -19,21 +20,27 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
return (
<div className={styles.root}>
{showAllCommentsHref && (
<Button
id="talk-comments-permalinkView-showAllComments"
variant="outlined"
color="primary"
onClick={onShowAllComments}
className={styles.button}
href={showAllCommentsHref}
target="_parent"
fullWidth
anchor
>
Show all Comments
</Button>
<Localized id="comments-permalinkView-showAllComments">
<Button
id="talk-comments-permalinkView-showAllComments"
variant="outlined"
color="primary"
onClick={onShowAllComments}
className={styles.button}
href={showAllCommentsHref}
target="_parent"
fullWidth
anchor
>
Show all Comments
</Button>
</Localized>
)}
{!comment && (
<Localized id="comments-permalinkView-commentNotFound">
<Typography>Comment not found</Typography>
</Localized>
)}
{!comment && <Typography>Comment not found</Typography>}
{comment && (
<Flex direction="column">
<CommentContainer data={comment} />
src/core/client/stream/components/UserBoxUnauthenticated.tsx
+20 -12
View File
@@ -3,6 +3,7 @@ import React, { StatelessComponent } from "react";
import { Button, Flex, Typography } from "talk-ui/components";
import MatchMedia from "talk-ui/components/MatchMedia";
import * as styles from "./UserBoxUnauthenticated.css";
export interface UserBoxUnauthenticatedProps {
@@ -15,20 +16,27 @@ const UserBoxUnauthenticated: StatelessComponent<
> = props => {
return (
<Flex>
<Localized id="comments-userBoxUnauthenticated-joinTheConversation">
<Typography
className={styles.joinText}
variant="bodyCopyBold"
component="span"
>
Join the conversation
<MatchMedia gteWidth="sm">
<Localized id="comments-userBoxUnauthenticated-joinTheConversation">
<Typography
className={styles.joinText}
variant="bodyCopyBold"
component="span"
>
Join the conversation
</Typography>
</Localized>
<Typography variant="bodyCopyBold" component="span">
|
</Typography>
</Localized>
<Typography variant="bodyCopyBold" component="span">
|
</Typography>
</MatchMedia>
<Localized id="comments-userBoxUnauthenticated-signIn">
<Button color="primary" size="small" onClick={props.onSignIn}>
<Button
color="primary"
size="small"
variant="underlined"
onClick={props.onSignIn}
>
Sign in
</Button>
</Localized>
src/core/client/stream/components/__snapshots__/UserBoxUnauthenticated.spec.tsx.snap
+15 -11
View File
@@ -2,23 +2,27 @@
exports[`renders correctly 1`] = `
<withPropsOnChange(Flex)>
<Localized
id="comments-userBoxUnauthenticated-joinTheConversation"
<MatchMediaWithContext
gteWidth="sm"
>
<Localized
id="comments-userBoxUnauthenticated-joinTheConversation"
>
<withPropsOnChange(Typography)
className="UserBoxUnauthenticated-joinText"
component="span"
variant="bodyCopyBold"
>
Join the conversation
</withPropsOnChange(Typography)>
</Localized>
<withPropsOnChange(Typography)
className="UserBoxUnauthenticated-joinText"
component="span"
variant="bodyCopyBold"
>
Join the conversation
|
</withPropsOnChange(Typography)>
</Localized>
<withPropsOnChange(Typography)
component="span"
variant="bodyCopyBold"
>
|
</withPropsOnChange(Typography)>
</MatchMediaWithContext>
<Localized
id="comments-userBoxUnauthenticated-signIn"
>
src/core/client/stream/containers/AuthContainer.tsx
-43
View File
@@ -1,43 +0,0 @@
import * as React from "react";
import Auth from "../components/Auth";
class AuthContainer extends React.Component {
state = {
open: false,
focus: false,
};
openPopup = () => {
this.setState({
open: true,
});
};
closePopup = () => {
this.setState({
open: false,
});
};
setFocus = (focus: boolean) => {
this.setState({
focus,
});
};
render() {
const { open, focus } = this.state;
return (
<Auth
open={open}
focus={focus}
openPopup={this.openPopup}
closePopup={this.closePopup}
setFocus={this.setFocus}
/>
);
}
}
export default AuthContainer;
src/core/client/stream/containers/UserBoxContainer.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export class UserBoxContainer extends Component<InnerProps> {
<Popup
href={`/auth.html?view=${view}`}
title="Talk Auth"
features="menubar=0,resizable=0,width=500,height=550,top=200,left=500"
features="menubar=0,resizable=0,width=350,height=600,top=200,left=500"
open={open}
focus={focus}
onFocus={this.handleFocus}
src/core/client/stream/index.tsx
+3 -1
View File
@@ -32,7 +32,9 @@ async function main() {
});
const Index: StatelessComponent = () => (
<TalkContextProvider value={context}>
<TalkContextProvider
value={{ ...context, mediaQueryValues: { width: 640 } }}
>
<AppContainer />
</TalkContextProvider>
);
src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+83 -62
View File
@@ -1,28 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`loads more comments 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
@@ -79,23 +75,30 @@ exports[`loads more comments 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -122,16 +125,21 @@ exports[`loads more comments 1`] = `
</div>
</div>
</div>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -158,16 +166,21 @@ exports[`loads more comments 1`] = `
</div>
</div>
</div>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -203,28 +216,24 @@ exports[`loads more comments 1`] = `
`;
exports[`renders comment stream 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
@@ -281,23 +290,30 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -324,16 +340,21 @@ exports[`renders comment stream 1`] = `
</div>
</div>
</div>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+41 -31
View File
@@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders permalink view 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div
className="PermalinkView-root"
@@ -23,16 +25,21 @@ exports[`renders permalink view 1`] = `
>
Show all Comments
</a>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -65,28 +72,24 @@ exports[`renders permalink view 1`] = `
`;
exports[`show all comments 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
@@ -143,23 +146,30 @@ exports[`show all comments 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+4 -2
View File
@@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders permalink view with unknown asset 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div
className="PermalinkView-root"
src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+32 -27
View File
@@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders permalink view with unknown comment 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div
className="PermalinkView-root"
@@ -34,28 +36,24 @@ exports[`renders permalink view with unknown comment 1`] = `
`;
exports[`show all comments 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
@@ -112,23 +110,30 @@ exports[`show all comments 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+53 -37
View File
@@ -1,28 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders comment stream 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
@@ -79,23 +75,30 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -122,16 +125,21 @@ exports[`renders comment stream 1`] = `
</div>
</div>
</div>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -159,18 +167,23 @@ exports[`renders comment stream 1`] = `
<div
className="Indent-root Indent-level0"
>
<div>
<div
className="Flex-root"
id="talk-comments-replyList-log--comment-with-replies"
role="log"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-replyList-log--comment-with-replies"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -196,11 +209,14 @@ exports[`renders comment stream 1`] = `
/>
</div>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+37 -29
View File
@@ -1,28 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders comment stream 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
@@ -79,23 +75,30 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -122,16 +125,21 @@ exports[`renders comment stream 1`] = `
</div>
</div>
</div>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+83 -64
View File
@@ -1,28 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders comment stream 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
@@ -79,23 +75,30 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -123,18 +126,23 @@ exports[`renders comment stream 1`] = `
<div
className="Indent-root Indent-level0"
>
<div>
<div
className="Flex-root"
id="talk-comments-replyList-log--comment-0"
role="log"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-replyList-log--comment-0"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -188,28 +196,24 @@ exports[`renders comment stream 1`] = `
`;
exports[`show all replies 1`] = `
<div>
<div
className="Flex-root App-root"
>
<div
className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
>
<div>
<div
className="Flex-root Stream-root"
>
<div
className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary UserBoxUnauthenticated-joinText"
>
Join the conversation
</span>
<span
className="Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
>
|
</span>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
onBlur={[Function]}
@@ -266,23 +270,30 @@ exports[`show all replies 1`] = `
</button>
</div>
</form>
<div>
<div
aria-live="polite"
className="Flex-root"
id="talk-comments-stream-log"
role="log"
>
<div
aria-live="polite"
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-stream-log"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -310,18 +321,23 @@ exports[`show all replies 1`] = `
<div
className="Indent-root Indent-level0"
>
<div>
<div
className="Flex-root"
id="talk-comments-replyList-log--comment-0"
role="log"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
id="talk-comments-replyList-log--comment-0"
role="log"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -347,11 +363,14 @@ exports[`show all replies 1`] = `
/>
</div>
<div
className="Comment-root"
role="article"
>
<div>
<div
className="Flex-root TopBar-root"
>
<div
className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
>
<span
className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
src/core/client/ui/components/Button/Button.css
+70
View File
@@ -282,3 +282,73 @@
}
}
}
.variantUnderlined {
padding-right: 0;
padding-left: 0;
border-radius: 0;
&.colorRegular {
color: var(--palette-grey-main);
border-bottom: 1px solid currentColor;
}
&.colorPrimary {
color: var(--palette-primary-main);
border-bottom: 1px solid currentColor;
}
&.colorError {
color: var(--palette-error-main);
border-bottom: 1px solid currentColor;
}
&.colorSuccess {
color: var(--palette-success-main);
border-bottom: 1px solid currentColor;
}
&:not(.disabled) {
&.colorRegular {
&.mouseHover {
color: var(--palette-grey-light);
border-bottom: 1px solid currentColor;
}
&:active,
&.active {
color: var(--palette-grey-lighter);
border-bottom: 1px solid currentColor;
}
}
&.colorPrimary {
&.mouseHover {
color: var(--palette-primary-light);
border-bottom: 1px solid currentColor;
}
&:active,
&.active {
color: var(--palette-primary-lighter);
border-bottom: 1px solid currentColor;
}
}
&.colorError {
&.mouseHover {
color: var(--palette-error-light);
border-bottom: 1px solid currentColor;
}
&:active,
&.active {
color: var(--palette-error-lighter);
border-bottom: 1px solid currentColor;
}
}
&.colorSuccess {
&.mouseHover {
color: var(--palette-success-light);
border-bottom: 1px solid currentColor;
}
&:active,
&.active {
color: var(--palette-success-lighter);
border-bottom: 1px solid currentColor;
}
}
}
}
src/core/client/ui/components/Button/Button.tsx
+2 -1
View File
@@ -28,7 +28,7 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
color?: "regular" | "primary" | "error" | "success";
/** Variant of the button */
variant?: "regular" | "filled" | "outlined" | "ghost";
variant?: "regular" | "filled" | "outlined" | "ghost" | "underlined";
/** If set renders a full width button */
fullWidth?: boolean;
@@ -72,6 +72,7 @@ export class Button extends React.Component<InnerProps> {
[classes.variantFilled]: variant === "filled",
[classes.variantOutlined]: variant === "outlined",
[classes.variantGhost]: variant === "ghost",
[classes.variantUnderlined]: variant === "underlined",
[classes.fullWidth]: fullWidth,
[classes.active]: active,
[classes.disabled]: disabled,
src/core/client/ui/components/Flex/Flex.css
+46
View File
@@ -1,5 +1,10 @@
.root {
width: 100%;
}
.flex {
display: flex;
width: 100%;
}
.halfItemGutter {
@@ -26,6 +31,30 @@
}
}
.doubleItemGutter {
& > * {
margin: 0 calc(2 * var(--spacing-unit)) 0 0 !important;
}
&.directionRowReverse {
& > * {
margin: 0 0 0 calc(2 * var(--spacing-unit)) !important;
}
}
&.directionColumn {
& > * {
margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
}
}
&.directionColumnReverese {
& > * {
margin: calc(2 * var(--spacing-unit)) 0 0 0 !important;
}
}
& > *:last-child {
margin: 0 !important;
}
}
.itemGutter {
& > * {
margin: 0 var(--spacing-unit) 0 0 !important;
@@ -93,6 +122,23 @@
margin-left: calc(0.5 * var(--spacing-unit)) !important;
}
}
&:not(.directionColumn).doubleItemGutter {
&:not(:empty) {
margin-top: calc(-2 * var(--spacing-unit)) !important;
}
& > * {
margin-top: calc(2 * var(--spacing-unit)) !important;
}
}
&.directionColumn.doubleItemGutter {
&:not(:empty) {
margin-left: calc(-2 * var(--spacing-unit)) !important;
}
&.doubleItemGutter > * {
margin-left: calc(2 * var(--spacing-unit)) !important;
}
}
}
.justifyFlexStart {
src/core/client/ui/components/Flex/Flex.mdx
+26
View File
@@ -33,3 +33,29 @@ import Button from '../Button'
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
## Item Gutter
<Playground>
<Flex direction="column" itemGutter>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
<Playground>
<Flex direction="column" itemGutter="half">
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
<Playground>
<Flex direction="column" itemGutter="double">
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
src/core/client/ui/components/Flex/Flex.tsx
+7 -4
View File
@@ -25,7 +25,7 @@ interface InnerProps {
| "space-evenly";
alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
direction?: "row" | "column" | "row-reverse" | "column-reverse";
itemGutter?: boolean | "half";
itemGutter?: boolean | "half" | "double";
className?: string;
wrap?: boolean | "reverse";
@@ -43,6 +43,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
itemGutter,
wrap,
forwardRef,
children,
...rest
} = props;
@@ -55,6 +56,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
const classObject: Record<string, boolean> = {
[classes.itemGutter]: itemGutter === true,
[classes.halfItemGutter]: itemGutter === "half",
[classes.doubleItemGutter]: itemGutter === "double",
[classes.wrap]: wrap === true,
[classes.wrapReverse]: wrap === "reverse",
};
@@ -75,12 +77,13 @@ const Flex: StatelessComponent<InnerProps> = props => {
classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
}
const classNames: string = cn(classes.root, className, classObject);
const rootClassNames: string = cn(classes.root, className);
const flexClassNames: string = cn(classes.flex, classObject);
// The first div is required to support nested `Flex` components with itemGutters.
return (
<div>
<div ref={forwardRef} className={classNames} {...rest} />
<div ref={forwardRef} className={rootClassNames} {...rest}>
<div className={flexClassNames}>{children}</div>
</div>
);
};
src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
+20 -10
View File
@@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
>
<div>
Hello World
@@ -13,9 +15,11 @@ exports[`renders correctly 1`] = `
`;
exports[`renders with halfe item gutter 1`] = `
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-halfItemGutter Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignCenter"
>
<div>
Hello World
@@ -25,9 +29,11 @@ exports[`renders with halfe item gutter 1`] = `
`;
exports[`renders with item gutter 1`] = `
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-itemGutter Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
>
<div>
Hello World
@@ -37,9 +43,11 @@ exports[`renders with item gutter 1`] = `
`;
exports[`renders with wrap 1`] = `
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrap Flex-alignCenter"
className="Flex-flex Flex-wrap Flex-alignCenter"
>
<div>
Hello World
@@ -49,9 +57,11 @@ exports[`renders with wrap 1`] = `
`;
exports[`renders with wrap reverse 1`] = `
<div>
<div
className="Flex-root"
>
<div
className="Flex-root Flex-wrapReverse Flex-alignCenter"
className="Flex-flex Flex-wrapReverse Flex-alignCenter"
>
<div>
Hello World
src/core/client/ui/components/FormField/FormField.css
+14
View File
@@ -0,0 +1,14 @@
.root {
display: flex;
flex-direction: column;
width: 100%;
justify-content: space-between;
&.halfItemGutter > * {
margin-left: calc(0.5 * var(--spacing-unit)) !important;
}
&.itemGutter > * {
margin-top: var(--spacing-unit) !important;
}
}
src/core/client/ui/components/FormField/FormField.mdx
+36
View File
@@ -0,0 +1,36 @@
---
name: FormField
menu: UI Kit
---
import { Playground, PropsTable } from 'docz'
import FormField from './FormField'
import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
# Flex
`FormField` is to be used with Form Components `flexbox`.
## Justify content
<Playground>
<FormField>
</FormField>
</Playground>
## Align items
<Playground>
<Flex alignItems="center" itemGutter>
<Button variant="filled">Push Me</Button>
<Button variant="filled" size="small">Push Me</Button>
<Button variant="filled" size="large">Push Me</Button>
</Flex>
</Playground>
## Direction
<Playground>
<Flex direction="column" itemGutter>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
</Flex>
</Playground>
src/core/client/ui/components/FormField/FormField.tsx
+43
View File
@@ -0,0 +1,43 @@
import cn from "classnames";
import React, { ReactNode } from "react";
import { StatelessComponent } from "react";
import { withStyles } from "talk-ui/hocs";
import * as styles from "./FormField.css";
interface InnerProps {
children: ReactNode;
classes: typeof styles;
id?: string;
className?: string;
itemGutter?: boolean | "half";
}
const FormField: StatelessComponent<InnerProps> = props => {
const { classes, className, children, itemGutter, ...rest } = props;
// TODO (bc): Use flex component once the extra div issue is solved.
return (
<div
className={cn(
classes.root,
{
[classes.itemGutter]: itemGutter === true,
[classes.halfItemGutter]: itemGutter === "half",
},
className
)}
{...rest}
>
{children}
</div>
);
};
FormField.defaultProps = {
itemGutter: true,
};
const enhanced = withStyles(styles)(FormField);
export default enhanced;
src/core/client/ui/components/FormField/index.ts
+1
View File
@@ -0,0 +1 @@
export { default } from "./FormField";
src/core/client/ui/components/MatchMedia/MatchMedia.mdx
+7 -7
View File
@@ -12,29 +12,29 @@ import MatchMedia from './MatchMedia'
## Basic usage
<Playground>
<MatchMedia maxWidth="xs">
<MatchMedia lteWidth="xs">
I'm a very small screen
</MatchMedia>
<MatchMedia minWidth="xs" maxWidth="sm">
<MatchMedia gtWidth="xs" lteWidth="sm">
I'm a small screen
</MatchMedia>
<MatchMedia minWidth="sm" maxWidth="md">
<MatchMedia gtWidth="sm" lteWidth="md">
I'm a medium screen
</MatchMedia>
<MatchMedia minWidth="md" maxWidth="lg">
<MatchMedia gtWidth="md" lteWidth="lg">
I'm a large screen
</MatchMedia>
<MatchMedia minWidth="lg" maxWidth="xl">
<MatchMedia gtWidth="lg" lteWidth="xl">
I'm a very large screen
</MatchMedia>
<MatchMedia minWidth="xl">
<MatchMedia gtWidth="xl">
I'm a super large screen
</MatchMedia>
</Playground>
## Using render props
<Playground>
<MatchMedia minWidth="lg">
<MatchMedia lteWidth="lg">
{matches => <span>{matches ? "I'm big" : "I'm small"}</span>}
</MatchMedia>
</Playground>
src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
+13 -3
View File
@@ -9,8 +9,8 @@ import { default as MatchMediaWithContext, MatchMedia } from "./MatchMedia";
it("renders correctly", () => {
const props: PropTypesOf<typeof MatchMedia> = {
minWidth: "xs",
maxWidth: "sm",
lteWidth: "xs",
gteWidth: "sm",
component: "div",
screen: true,
children: <div>Hello World</div>,
@@ -19,6 +19,16 @@ it("renders correctly", () => {
expect(wrapper).toMatchSnapshot();
});
it("renders less than and great than correctly", () => {
const props: PropTypesOf<typeof MatchMedia> = {
ltWidth: "xs",
gtWidth: "sm",
children: <div>Hello World</div>,
};
const wrapper = shallow(<MatchMedia {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("map new speech prop to older aural prop", () => {
const props: PropTypesOf<typeof MatchMedia> = {
speech: true,
@@ -37,7 +47,7 @@ it("should get mediaQueryValues from context", () => {
};
const wrapper = mount(
<UIContext.Provider value={context}>
<MatchMediaWithContext maxWidth="xs">
<MatchMediaWithContext lteWidth="xs">
<span>Hello World</span>
</MatchMediaWithContext>
</UIContext.Provider>
src/core/client/ui/components/MatchMedia/MatchMedia.tsx
+22 -5
View File
@@ -10,8 +10,17 @@ import UIContext from "../UIContext";
type Breakpoints = keyof typeof theme.breakpoints;
interface InnerProps {
minWidth?: Breakpoints;
maxWidth?: Breakpoints;
/** greater than or equal width. */
gteWidth?: Breakpoints;
/** greater than width. */
gtWidth?: Breakpoints;
/** less than equals width. */
lteWidth?: Breakpoints;
/** less than equals width. */
ltWidth?: Breakpoints;
children: ReactNode | ((matches: boolean) => React.ReactNode);
className?: string;
component?:
@@ -27,13 +36,21 @@ interface InnerProps {
}
export const MatchMedia: StatelessComponent<InnerProps> = props => {
const { speech, minWidth, maxWidth, ...rest } = props;
const { speech, gteWidth, gtWidth, lteWidth, ltWidth, ...rest } = props;
const mapped = {
// TODO: Temporarily map newer speech to older aural type until
// react-responsive supports the speech prop.
aural: speech,
minWidth: minWidth ? theme.breakpoints[minWidth] + 1 : undefined,
maxWidth: maxWidth ? theme.breakpoints[maxWidth] : undefined,
minWidth: gtWidth
? theme.breakpoints[gtWidth] + 1
: gteWidth
? theme.breakpoints[gteWidth]
: undefined,
maxWidth: ltWidth
? theme.breakpoints[ltWidth] - 1
: lteWidth
? theme.breakpoints[lteWidth]
: undefined,
};
return <Responsive {...rest} {...mapped} />;
};
src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap
+14 -2
View File
@@ -14,8 +14,8 @@ exports[`map new speech prop to older aural prop 1`] = `
exports[`renders correctly 1`] = `
<MediaQuery
component="div"
maxWidth={640}
minWidth={321}
maxWidth={320}
minWidth={640}
screen={true}
values={Object {}}
>
@@ -24,3 +24,15 @@ exports[`renders correctly 1`] = `
</div>
</MediaQuery>
`;
exports[`renders less than and great than correctly 1`] = `
<MediaQuery
maxWidth={319}
minWidth={641}
values={Object {}}
>
<div>
Hello World
</div>
</MediaQuery>
`;
src/core/client/ui/components/TextField/TextField.css
+12 -2
View File
@@ -5,10 +5,12 @@
padding: calc(0.5 * var(--spacing-unit));
box-sizing: border-box;
border-radius: var(--round-corners);
height: 36px;
line-height: 36px;
}
.colorRegular {
backgroun-color: var(--palette-common-white);
background-color: var(--palette-common-white);
color: var(--palette-common-black);
border: 1px solid var(--palette-grey-light);
}
@@ -16,10 +18,18 @@
.colorError {
background-color: var(--palette-common-white);
border-color: var(--palette-error-main);
border: 2px solid #FA4643;
border: 2px solid var(--palette-error-darkest);
}
.fullWidth {
width: 100%;
}
::placeholder {
font-family: var(--font-family);
font-style: normal;
font-weight: normal;
line-height: calc(16rem / var(--rem-base));
font-size: calc(16rem / var(--rem-base));
color: var(--palette-grey-lighter);
}
src/core/client/ui/components/TextField/TextField.mdx
+1
View File
@@ -12,6 +12,7 @@ import Flex from '../Flex'
## Basic Use
<Playground>
<Flex itemGutter direction="column">
<TextField placeholder="This is a placeholder" />
<TextField defaultValue="This is an input field" />
<TextField color="error" defaultValue="A TextField with an error" />
<TextField color="error" defaultValue="A TextField with an error" fullWidth/>
src/core/client/ui/components/TextField/TextField.tsx
+5 -1
View File
@@ -33,6 +33,10 @@ export interface TextFieldProps {
* Placeholder
*/
placeholder?: string;
/**
* readOnly
*/
readOnly?: boolean;
}
const TextField: StatelessComponent<TextFieldProps> = props => {
@@ -68,7 +72,7 @@ const TextField: StatelessComponent<TextFieldProps> = props => {
TextField.defaultProps = {
color: "regular",
fullWidth: false,
fullWidth: true,
placeholder: "",
};
src/core/client/ui/components/Typography/Typography.css
+4
View File
@@ -39,6 +39,10 @@
composes: inputLabel from "talk-ui/shared/typography.css";
}
.inputDescription {
composes: inputDescription from "talk-ui/shared/typography.css";
}
.timestamp {
composes: timestamp from "talk-ui/shared/typography.css";
}
src/core/client/ui/components/Typography/Typography.tsx
+4 -4
View File
@@ -14,6 +14,8 @@ type Variant =
| "heading4"
| "bodyCopy"
| "bodyCopyBold"
| "inputLabel"
| "inputDescription"
| "timestamp";
// Based on Typography Component of Material UI.
@@ -131,12 +133,10 @@ Typography.defaultProps = {
heading3: "h1",
heading4: "h1",
bodyCopy: "p",
<<<<<<< HEAD
inputLabel: "label",
=======
bodyCopyBold: "p",
>>>>>>> ff62dc4ecc00cdcef1a742bc23db032271511f91
timestamp: "span",
inputLabel: "label",
inputDescription: "p",
},
noWrap: false,
paragraph: false,
src/core/client/ui/components/ValidationMessage/ValidationMessage.css
+1 -1
View File
@@ -1,5 +1,5 @@
.root {
composes: validationMessage from "talk-ui/shared/typography.css";
composes: alertMessage from "talk-ui/shared/typography.css";
position: relative;
display: inline-flex;
justify-content: flex-start;
src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx
-1
View File
@@ -8,7 +8,6 @@ import ValidationMessage from "./ValidationMessage";
it("renders correctly", () => {
const props: PropTypesOf<typeof ValidationMessage> = {
className: "custom",
color: "error",
children: "Hello World",
};
const renderer = TestRenderer.create(<ValidationMessage {...props} />);
src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
-1
View File
@@ -3,7 +3,6 @@
exports[`renders correctly 1`] = `
<div
className="ValidationMessage-root ValidationMessage-colorError custom"
color="error"
>
<span
className="Icon-root ValidationMessage-icon Icon-sm"
src/core/client/ui/components/index.ts
+1
View File
@@ -14,3 +14,4 @@ export { default as TextField } from "./TextField";
export { default as CallOut } from "./CallOut";
export { default as ClickOutside } from "./ClickOutside";
export { default as Popup } from "./Popup";
export { default as FormField } from "./FormField";
src/core/client/ui/shared/typography.css
+19 -1
View File
@@ -132,7 +132,7 @@
letter-spacing: calc(0.2em / 16);
}
.validationMessage {
.alertMessage {
color: var(--palette-common-black);
font-family: var(--font-family);
font-weight: var(--font-weight-medium);
@@ -158,3 +158,21 @@
letter-spacing: calc(0.2em / 16);
color: var(--palette-text-primary);
}
.inputDescription {
font-size: calc(14rem / var(--rem-base));
font-weight: var(--font-weight-medium);
font-family: var(--font-family);
line-height: calc(18em / 16);
letter-spacing: calc(0.2em / 16);
color: var(--palette-text-secondary);
}
.placeholder {
font-family: var(--font-family);
font-style: normal;
font-weight: normal;
line-height: calc(16rem / var(--rem-base));
font-size: calc(16rem / var(--rem-base));
color: var(--palette-grey-lighter);
}
src/docs/forms.mdx
+54 -25
View File
@@ -16,37 +16,66 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
## Simple Form
<Playground>
<Flex itemGutter direction="column" style={{width:330}}>
<Flex>
<Typography variant="heading1">Sign up to join the conversation</Typography>
<InputLabel>Email Address</InputLabel>
<TextField fullWidth/>
<InputLabel>Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<TextField fullWidth/>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<TextField fullWidth/>
<InputLabel>Confirm Password</InputLabel>
<TextField fullWidth/>
<Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
<FormField>
<InputLabel>Email Address</InputLabel>
<TextField/>
</FormField>
<FormField>
<InputLabel>Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<TextField/>
</FormField>
<FormField>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<TextField/>
</FormField>
<FormField>
<InputLabel>Confirm Password</InputLabel>
<TextField/>
</FormField>
<Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
</Flex>
</Playground>
## Simple Form with error
<Playground>
<Flex itemGutter direction="column" style={{width:330}}>
<Flex>
<Typography variant="heading1">Sign up to join the conversation</Typography>
<InputLabel>Email Address</InputLabel>
<TextField fullWidth />
<InputLabel>Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<TextField defaultValue="something.com" color="error" fullWidth/>
<ValidationMessage color="error" fullWidth>Invalid characters. Try again.</ValidationMessage>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<TextField fullWidth/>
<InputLabel>Confirm Password</InputLabel>
<TextField fullWidth/>
<Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
<FormField>
<InputLabel>Email Address</InputLabel>
<TextField/>
</FormField>
<FormField>
<InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<TextField/>
<ValidationMessage>Invalid characters. Try again.</ValidationMessage>
</FormField>
<FormField>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<TextField/>
</FormField>
<FormField>
<InputLabel>Confirm Password</InputLabel>
<TextField/>
</FormField>
<Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
</Flex>
</Playground>
src/locales/en-US/stream.ftl
+5 -3
View File
@@ -6,9 +6,11 @@ comments-postCommentForm-post = Post
comments-stream-loadMore = Load more
comments-replyList-showAll = Show all
comments-permalink-share = Share
comments-permalink-copy = Copy
comments-permalink-copied = Copied
comments-permalinkButton-share = Share
comments-permalinkPopover-copy = Copy
comments-permalinkPopover-copied = Copied
comments-permalinkView-showAllComments = Show all comments
comments-permalinkView-commentNotFound = Comment not found
comments-userBoxUnauthenticated-joinTheConversation = Join the conversation
comments-userBoxUnauthenticated-signIn = Sign in