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

Extract Username, Add indent styles

Browse Source
This commit is contained in:
Chi Vinh Le
2018-07-10 12:15:39 -03:00
parent ca12ec652d
commit d89d4c25b7
14 changed files with 87 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/components/Comment.css
-4
View File
@@ -5,7 +5,3 @@
.gutterBottom {
margin-bottom: calc(2px * $spacing-unit);
}
.author {
font-weight: $font-weight-medium;
}
src/core/client/stream/components/Comment.tsx
+2 -3
View File
@@ -5,6 +5,7 @@ import { StatelessComponent } from "react";
import { Typography } from "talk-ui/components";
import * as styles from "./Comment.css";
import Username from "./Username";
export interface CommentProps {
className?: string;
@@ -21,9 +22,7 @@ const Comment: StatelessComponent<CommentProps> = props => {
});
return (
<div className={rootClassName}>
<Typography className={styles.author} gutterBottom>
{props.author && props.author.username}
</Typography>
{props.author && <Username>{props.author.username}</Username>}
<Typography>{props.body}</Typography>
</div>
);
src/core/client/stream/components/Indent.css
+9
View File
@@ -0,0 +1,9 @@
.root {
margin-left: 2px;
border-left: 2px solid;
padding-left: 5px;
}
.level0 {
border-color: $palette-secondary-darkest;
}
src/core/client/stream/components/Indent.tsx
+4 -5
View File
@@ -1,16 +1,15 @@
import cn from "classnames";
import React, { StatelessComponent } from "react";
import * as styles from "./Indent.css";
export interface IndentProps {
level?: number;
children: React.ReactNode;
}
const Indent: StatelessComponent<IndentProps> = props => {
return (
<div style={{ marginLeft: "16px", marginTop: "8px", marginBottom: "8px" }}>
{props.children}
</div>
);
return <div className={cn(styles.root, styles.level0)}>{props.children}</div>;
};
export default Indent;
src/core/client/stream/components/Username.css
+3
View File
@@ -0,0 +1,3 @@
.root {
font-weight: $font-weight-medium;
}
src/core/client/stream/components/Username.spec.tsx
+12
View File
@@ -0,0 +1,12 @@
import { shallow } from "enzyme";
import React from "react";
import Username from "./Username";
it("renders correctly", () => {
const props = {
children: "Marvin",
};
const wrapper = shallow(<Username {...props} />);
expect(wrapper).toMatchSnapshot();
});
src/core/client/stream/components/Username.tsx
+20
View File
@@ -0,0 +1,20 @@
import React from "react";
import { StatelessComponent } from "react";
import { Typography } from "talk-ui/components";
import * as styles from "./Username.css";
export interface CommentProps {
children: string;
}
const Username: StatelessComponent<CommentProps> = props => {
return (
<Typography className={styles.root} gutterBottom>
{props.children}
</Typography>
);
};
export default Username;
src/core/client/stream/components/__snapshots__/Comment.spec.tsx.snap
+4 -10
View File
@@ -4,12 +4,9 @@ exports[`renders username and body 1`] = `
<div
className="root"
>
<withPropsOnChange(Typography)
className="author"
gutterBottom={true}
>
<Username>
Marvin
</withPropsOnChange(Typography)>
</Username>
<withPropsOnChange(Typography)>
Woof
</withPropsOnChange(Typography)>
@@ -20,12 +17,9 @@ exports[`renders with gutterBottom 1`] = `
<div
className="root gutterBottom"
>
<withPropsOnChange(Typography)
className="author"
gutterBottom={true}
>
<Username>
Marvin
</withPropsOnChange(Typography)>
</Username>
<withPropsOnChange(Typography)>
Woof
</withPropsOnChange(Typography)>
src/core/client/stream/components/__snapshots__/Username.spec.tsx.snap
+10
View File
@@ -0,0 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<withPropsOnChange(Typography)
className="root"
gutterBottom={true}
>
Marvin
</withPropsOnChange(Typography)>
`;
src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+5 -5
View File
@@ -41,7 +41,7 @@ exports[`loads more comments 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Markus
</p>
@@ -57,7 +57,7 @@ exports[`loads more comments 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Lukas
</p>
@@ -73,7 +73,7 @@ exports[`loads more comments 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Isabelle
</p>
@@ -129,7 +129,7 @@ exports[`renders comment stream 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Markus
</p>
@@ -145,7 +145,7 @@ exports[`renders comment stream 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Lukas
</p>
src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+5 -11
View File
@@ -41,7 +41,7 @@ exports[`renders comment stream 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Markus
</p>
@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Markus
</p>
@@ -68,19 +68,13 @@ exports[`renders comment stream 1`] = `
</p>
</div>
<div
style={
Object {
"marginBottom": "8px",
"marginLeft": "16px",
"marginTop": "8px",
}
}
className="root level0"
>
<div
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Markus
</p>
@@ -94,7 +88,7 @@ exports[`renders comment stream 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Lukas
</p>
src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+2 -2
View File
@@ -41,7 +41,7 @@ exports[`renders comment stream 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Markus
</p>
@@ -57,7 +57,7 @@ exports[`renders comment stream 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Lukas
</p>
src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+7 -19
View File
@@ -41,7 +41,7 @@ exports[`renders comment stream 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Markus
</p>
@@ -52,19 +52,13 @@ exports[`renders comment stream 1`] = `
</p>
</div>
<div
style={
Object {
"marginBottom": "8px",
"marginLeft": "16px",
"marginTop": "8px",
}
}
className="root level0"
>
<div
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Lukas
</p>
@@ -131,7 +125,7 @@ exports[`show all replies 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Markus
</p>
@@ -142,19 +136,13 @@ exports[`show all replies 1`] = `
</p>
</div>
<div
style={
Object {
"marginBottom": "8px",
"marginLeft": "16px",
"marginTop": "8px",
}
}
className="root level0"
>
<div
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Lukas
</p>
@@ -168,7 +156,7 @@ exports[`show all replies 1`] = `
className="root gutterBottom"
>
<p
className="root body1 gutterBottom author"
className="root body1 gutterBottom root"
>
Isabelle
</p>
src/core/client/ui/theme/variables.ts
+4 -4
View File
@@ -7,7 +7,7 @@ const variables = {
palette: {
/* Primary colors */
primary: {
darker: "#0D5B8F",
darkest: "#0D5B8F",
dark: "#2B7EB5",
main: "#3498DB",
light: "#67B2E4",
@@ -15,7 +15,7 @@ const variables = {
},
/* Secondary colors */
secondary: {
darker: "#404345",
darkest: "#404345",
dark: "#65696B",
main: "#787D80",
light: "#9A9DA0",
@@ -23,7 +23,7 @@ const variables = {
},
/* Success colors */
success: {
darker: "#03AB61",
darkest: "#03AB61",
dark: "#02BD6B",
main: "#00CD73",
light: "#40D996",
@@ -31,7 +31,7 @@ const variables = {
},
/* Error colors */
error: {
darker: "#F50F0C",
darkest: "#F50F0C",
dark: "#FF1F1C",
main: "#FA4643",
light: "#F26563",