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

Merge branch 'next' into authentication-support

Browse Source
This commit is contained in:
Kiwi
2018-08-10 10:37:57 +02:00
committed by GitHub
parent e63137f302 797a02b2a3
commit 32264fbc5f
29 changed files with 550 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+7 -7
View File
@@ -15007,9 +15007,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"
@@ -19590,13 +19590,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
@@ -177,7 +177,7 @@
"react-final-form": "^3.6.4",
"react-popper": "^1.0.0-beta.6",
"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/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";
@@ -23,6 +24,9 @@ export interface TalkContext {
/** Session storage */
sessionStorage: Storage;
/** media query values for testing purposes */
mediaQueryValues?: MediaQueryMatchers;
/**
* A way to listen for clicks that are e.g. outside of the
@@ -54,6 +58,7 @@ export const TalkContextProvider: StatelessComponent<{
value={{
timeagoFormatter: value.timeagoFormatter,
registerClickFarAway: value.registerClickFarAway,
mediaQueryValues: value.mediaQueryValues,
}}
>
{children}
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
+1 -1
View File
@@ -57,7 +57,7 @@ class Permalink extends React.Component<PermalinkProps> {
active={visible}
size="small"
>
<MatchMedia minWidth="xs">
<MatchMedia gtWidth="xs">
<ButtonIcon>share</ButtonIcon>
</MatchMedia>
<Localized id="comments-permalinkButton-share">
src/core/client/stream/components/UserBoxUnauthenticated.tsx
+14 -11
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,18 +16,20 @@ 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}>
Sign in
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/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/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/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>
`;