From 71c5c7c64fb242269f601e5817e7b0da90565d59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Mon, 10 Sep 2018 11:13:13 -0300 Subject: [PATCH 01/18] Basic Tab usage --- src/core/client/ui/components/Tabs/Tab.css | 42 ++++++++++++ src/core/client/ui/components/Tabs/Tab.tsx | 43 ++++++++++++ src/core/client/ui/components/Tabs/TabBar.css | 13 ++++ src/core/client/ui/components/Tabs/TabBar.mdx | 52 +++++++++++++++ src/core/client/ui/components/Tabs/TabBar.tsx | 66 +++++++++++++++++++ .../client/ui/components/Tabs/TabContent.tsx | 0 .../client/ui/components/Tabs/TabPane.tsx | 0 src/core/client/ui/components/Tabs/index.ts | 1 + 8 files changed, 217 insertions(+) create mode 100644 src/core/client/ui/components/Tabs/Tab.css create mode 100644 src/core/client/ui/components/Tabs/Tab.tsx create mode 100644 src/core/client/ui/components/Tabs/TabBar.css create mode 100644 src/core/client/ui/components/Tabs/TabBar.mdx create mode 100644 src/core/client/ui/components/Tabs/TabBar.tsx create mode 100644 src/core/client/ui/components/Tabs/TabContent.tsx create mode 100644 src/core/client/ui/components/Tabs/TabPane.tsx create mode 100644 src/core/client/ui/components/Tabs/index.ts diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css new file mode 100644 index 000000000..1a25fcc1c --- /dev/null +++ b/src/core/client/ui/components/Tabs/Tab.css @@ -0,0 +1,42 @@ +.root { + box-sizing: border-box; + list-style: none; + padding: var(--spacing-unit); + display: inline-flex; + margin-bottom: -1px; +} + +.root.primary { + background: #f2f2f2; + color: #787d80; + border: 1px solid #979797; + border-left-width: 0; + padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2); + + &:first-child { + border-left-width: 1px; + border-top-left-radius: var(--round-corners); + } + + &:last-child { + border-top-right-radius: var(--round-corners); + } + + &.active { + background-color: var(--palette-common-white); + color: var(--palette-common-black); + border-bottom-color: white; + border-top-width: 5px; + border-top-color: #3498db; + } +} + +.secondary { + border-bottom: 1px solid #e0e0e0; + padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2); + + &.active { + font-weight: bold; + border-bottom: 3px solid #0277bd; + } +} diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx new file mode 100644 index 000000000..32509b75f --- /dev/null +++ b/src/core/client/ui/components/Tabs/Tab.tsx @@ -0,0 +1,43 @@ +import cn from "classnames"; +import React, { StatelessComponent } from "react"; +import { withStyles } from "talk-ui/hocs"; +import * as styles from "./Tab.css"; + +export interface TabBarProps { + /** + * Convenient prop to override the root styling. + */ + className?: string; + /** + * Override or extend the styles applied to the component. + */ + classes: typeof styles; + + tabId: number; + active: boolean; + color: string; + onTabClick?: () => void; +} + +const TabBar: StatelessComponent = props => { + const { className, classes, children, tabId, active, color } = props; + + const rootClassName = cn( + classes.root, + { + [classes.primary]: color === "primary", + [classes.secondary]: color === "secondary", + [classes.active]: active, + }, + className + ); + + return ( +
  • + {children} +
    • + ); +}; + +const enhanced = withStyles(styles)(TabBar); +export default enhanced; diff --git a/src/core/client/ui/components/Tabs/TabBar.css b/src/core/client/ui/components/Tabs/TabBar.css new file mode 100644 index 000000000..8d076ee0a --- /dev/null +++ b/src/core/client/ui/components/Tabs/TabBar.css @@ -0,0 +1,13 @@ +.root { + display: flex; + padding: 0; + margin: 0; +} + +.primary { + border-bottom: 1px solid #787d80; +} + +.secondary { + border-bottom: 1px solid #e0e0e0; +} diff --git a/src/core/client/ui/components/Tabs/TabBar.mdx b/src/core/client/ui/components/Tabs/TabBar.mdx new file mode 100644 index 000000000..5b7e47727 --- /dev/null +++ b/src/core/client/ui/components/Tabs/TabBar.mdx @@ -0,0 +1,52 @@ +--- +name: TabBar +menu: UI Kit +--- + +import { Playground, PropsTable } from 'docz' +import HorizontalGutter from '../HorizontalGutter' + + +import TabBar from './TabBar' +import Tab from './Tab' + + +# TabBar + +## Basic Use + + + + + Tab one + Active Tab + Tab Three + + + + Tab one + Active Tab + Tab Three + + + + Tab one + Active Tab + Tab Three + + + + + +## Secondary Color + + + + + Tab one + Active Tab + Tab Three + + + + diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx new file mode 100644 index 000000000..6aef2e6a8 --- /dev/null +++ b/src/core/client/ui/components/Tabs/TabBar.tsx @@ -0,0 +1,66 @@ +import cn from "classnames"; +import React, { StatelessComponent } from "react"; +import { withStyles } from "talk-ui/hocs"; +import * as styles from "./TabBar.css"; + +export interface TabBarProps { + /** + * Convenient prop to override the root styling. + */ + className?: string; + /** + * Override or extend the styles applied to the component. + */ + classes: typeof styles; + + color: "primary" | "secondary"; + activeId?: string; + defaultActiveId?: string; + onChange?: (activeId: string) => void; + onTabClick?: () => void; +} + +const TabBar: StatelessComponent = props => { + const { + className, + classes, + children, + onTabClick, + activeId, + color, + defaultActiveId, + } = props; + + const rootClassName = cn( + classes.root, + [ + { + [classes.primary]: color === "primary", + [classes.secondary]: color === "secondary", + }, + ], + className + ); + + const tabs = React.Children.toArray(children).map( + (child: React.ReactElement, index: number) => + React.cloneElement(child, { + tabId: index, + active: + defaultActiveId && !activeId + ? child.props.tabId === defaultActiveId + : child.props.tabId === activeId, + color, + onTabClick, + }) + ); + + return
      {tabs}
    ; +}; + +TabBar.defaultProps = { + color: "primary", +}; + +const enhanced = withStyles(styles)(TabBar); +export default enhanced; diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/core/client/ui/components/Tabs/TabPane.tsx b/src/core/client/ui/components/Tabs/TabPane.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/core/client/ui/components/Tabs/index.ts b/src/core/client/ui/components/Tabs/index.ts new file mode 100644 index 000000000..58ecee89f --- /dev/null +++ b/src/core/client/ui/components/Tabs/index.ts @@ -0,0 +1 @@ +export { default } from "./TabBar"; From 96515eac0cd16e8caf4592cff8c75f7d86d94583 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Mon, 10 Sep 2018 11:24:17 -0300 Subject: [PATCH 02/18] Added Color palette --- src/core/client/ui/components/Tabs/Tab.css | 19 ++++++++++++------- src/core/client/ui/components/Tabs/TabBar.css | 2 +- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css index 1a25fcc1c..9650b8a95 100644 --- a/src/core/client/ui/components/Tabs/Tab.css +++ b/src/core/client/ui/components/Tabs/Tab.css @@ -4,12 +4,18 @@ padding: var(--spacing-unit); display: inline-flex; margin-bottom: -1px; + font-weight: var(--font-weight-regular); + font-family: var(--font-family-serif); + + &:hover { + cursor: pointer; + } } .root.primary { background: #f2f2f2; - color: #787d80; - border: 1px solid #979797; + color: var(--palette-grey-main); + border: 1px solid var(--palette-grey-main); border-left-width: 0; padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2); @@ -25,18 +31,17 @@ &.active { background-color: var(--palette-common-white); color: var(--palette-common-black); - border-bottom-color: white; + border-bottom-color: var(--palette-common-white); border-top-width: 5px; - border-top-color: #3498db; + border-top-color: var(--palette-primary-main); } } .secondary { - border-bottom: 1px solid #e0e0e0; padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2); &.active { - font-weight: bold; - border-bottom: 3px solid #0277bd; + font-weight: var(--font-weight-medium); + border-bottom: 3px solid var(--palette-primary-main); } } diff --git a/src/core/client/ui/components/Tabs/TabBar.css b/src/core/client/ui/components/Tabs/TabBar.css index 8d076ee0a..cb75fbb27 100644 --- a/src/core/client/ui/components/Tabs/TabBar.css +++ b/src/core/client/ui/components/Tabs/TabBar.css @@ -5,7 +5,7 @@ } .primary { - border-bottom: 1px solid #787d80; + border-bottom: 1px solid var(--palette-grey-main); } .secondary { From cb3a6b053383e3f8e6a376160a27020f564e5dfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Mon, 10 Sep 2018 11:35:56 -0300 Subject: [PATCH 03/18] Adding TabContent, TabPane --- src/core/client/ui/components/Tabs/Tab.mdx | 52 +++++++++++++++++++ src/core/client/ui/components/Tabs/Tab.tsx | 22 ++++++-- src/core/client/ui/components/Tabs/TabBar.tsx | 6 ++- .../client/ui/components/Tabs/TabContent.tsx | 8 +++ .../client/ui/components/Tabs/TabPane.css | 0 .../client/ui/components/Tabs/TabPane.tsx | 40 ++++++++++++++ 6 files changed, 124 insertions(+), 4 deletions(-) create mode 100644 src/core/client/ui/components/Tabs/Tab.mdx create mode 100644 src/core/client/ui/components/Tabs/TabPane.css diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx new file mode 100644 index 000000000..add6f01cf --- /dev/null +++ b/src/core/client/ui/components/Tabs/Tab.mdx @@ -0,0 +1,52 @@ +--- +name: Tab +menu: UI Kit +--- + +import { Playground, PropsTable } from 'docz' +import HorizontalGutter from '../HorizontalGutter' + + +import TabBar from './TabBar' +import Tab from './Tab' + + +# Tab + +## Basic Use + + + + + Tab one + Active Tab + Tab Three + + + + Tab one + Active Tab + Tab Three + + + + Tab one + Active Tab + Tab Three + + + + + +## Secondary Color + + + + + Tab one + Active Tab + Tab Three + + + + diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx index 32509b75f..f1f8e245a 100644 --- a/src/core/client/ui/components/Tabs/Tab.tsx +++ b/src/core/client/ui/components/Tabs/Tab.tsx @@ -13,14 +13,22 @@ export interface TabBarProps { */ classes: typeof styles; - tabId: number; + tabId: string; active: boolean; color: string; onTabClick?: () => void; } const TabBar: StatelessComponent = props => { - const { className, classes, children, tabId, active, color } = props; + const { + className, + classes, + children, + tabId, + active, + color, + onTabClick, + } = props; const rootClassName = cn( classes.root, @@ -33,7 +41,15 @@ const TabBar: StatelessComponent = props => { ); return ( -
  • +
    • ); diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx index 6aef2e6a8..8bb3d18f1 100644 --- a/src/core/client/ui/components/Tabs/TabBar.tsx +++ b/src/core/client/ui/components/Tabs/TabBar.tsx @@ -55,7 +55,11 @@ const TabBar: StatelessComponent = props => { }) ); - return
      {tabs}
    ; + return ( +
      + {tabs} +
    + ); }; TabBar.defaultProps = { diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx index e69de29bb..50653284d 100644 --- a/src/core/client/ui/components/Tabs/TabContent.tsx +++ b/src/core/client/ui/components/Tabs/TabContent.tsx @@ -0,0 +1,8 @@ +import React, { StatelessComponent } from "react"; + +const TabContent: StatelessComponent<{}> = props => { + const { children } = props; + return <>{children}; +}; + +export default TabContent; diff --git a/src/core/client/ui/components/Tabs/TabPane.css b/src/core/client/ui/components/Tabs/TabPane.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/core/client/ui/components/Tabs/TabPane.tsx b/src/core/client/ui/components/Tabs/TabPane.tsx index e69de29bb..e24560f33 100644 --- a/src/core/client/ui/components/Tabs/TabPane.tsx +++ b/src/core/client/ui/components/Tabs/TabPane.tsx @@ -0,0 +1,40 @@ +import cn from "classnames"; +import React, { StatelessComponent } from "react"; +import { withStyles } from "talk-ui/hocs"; +import * as styles from "./TabPane.css"; + +export interface TabBarProps { + /** + * Convenient prop to override the root styling. + */ + className?: string; + /** + * Override or extend the styles applied to the component. + */ + classes: typeof styles; + + tabId: string; + hidden: boolean; +} + +const TabContent: StatelessComponent = props => { + const { className, classes, children, tabId, hidden } = props; + + const rootClassName = cn(classes.root, className); + + return ( + + ); +}; + +const enhanced = withStyles(styles)(TabContent); +export default enhanced; From e9ab3d1d7f93187b6b7a0a52ef93cb9f8988df79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Mon, 10 Sep 2018 12:27:00 -0300 Subject: [PATCH 04/18] Working tab example --- src/core/client/ui/components/Tabs/Tab.mdx | 52 -------------- src/core/client/ui/components/Tabs/Tab.tsx | 68 +++++++++---------- src/core/client/ui/components/Tabs/TabBar.mdx | 1 - src/core/client/ui/components/Tabs/TabBar.tsx | 7 +- .../client/ui/components/Tabs/TabContent.tsx | 22 +++++- src/core/client/ui/components/Tabs/index.ts | 5 +- src/core/client/ui/components/index.ts | 1 + src/docs/tabs.mdx | 25 +++++++ 8 files changed, 88 insertions(+), 93 deletions(-) delete mode 100644 src/core/client/ui/components/Tabs/Tab.mdx create mode 100644 src/docs/tabs.mdx diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx deleted file mode 100644 index add6f01cf..000000000 --- a/src/core/client/ui/components/Tabs/Tab.mdx +++ /dev/null @@ -1,52 +0,0 @@ ---- -name: Tab -menu: UI Kit ---- - -import { Playground, PropsTable } from 'docz' -import HorizontalGutter from '../HorizontalGutter' - - -import TabBar from './TabBar' -import Tab from './Tab' - - -# Tab - -## Basic Use - - - - - Tab one - Active Tab - Tab Three - - - - Tab one - Active Tab - Tab Three - - - - Tab one - Active Tab - Tab Three - - - - - -## Secondary Color - - - - - Tab one - Active Tab - Tab Three - - - - diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx index f1f8e245a..70f2a5f5d 100644 --- a/src/core/client/ui/components/Tabs/Tab.tsx +++ b/src/core/client/ui/components/Tabs/Tab.tsx @@ -16,44 +16,44 @@ export interface TabBarProps { tabId: string; active: boolean; color: string; - onTabClick?: () => void; + onTabClick?: (tabId: string) => void; } -const TabBar: StatelessComponent = props => { - const { - className, - classes, - children, - tabId, - active, - color, - onTabClick, - } = props; +class TabBar extends React.Component { + public handleTabClick = () => { + if (this.props.onTabClick) { + this.props.onTabClick(this.props.tabId); + } + }; - const rootClassName = cn( - classes.root, - { - [classes.primary]: color === "primary", - [classes.secondary]: color === "secondary", - [classes.active]: active, - }, - className - ); + public render() { + const { className, classes, children, tabId, active, color } = this.props; - return ( - - ); -}; + const rootClassName = cn( + classes.root, + { + [classes.primary]: color === "primary", + [classes.secondary]: color === "secondary", + [classes.active]: active, + }, + className + ); + + return ( + + ); + } +} const enhanced = withStyles(styles)(TabBar); export default enhanced; diff --git a/src/core/client/ui/components/Tabs/TabBar.mdx b/src/core/client/ui/components/Tabs/TabBar.mdx index 5b7e47727..847efe843 100644 --- a/src/core/client/ui/components/Tabs/TabBar.mdx +++ b/src/core/client/ui/components/Tabs/TabBar.mdx @@ -10,7 +10,6 @@ import HorizontalGutter from '../HorizontalGutter' import TabBar from './TabBar' import Tab from './Tab' - # TabBar ## Basic Use diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx index 8bb3d18f1..e3f947d47 100644 --- a/src/core/client/ui/components/Tabs/TabBar.tsx +++ b/src/core/client/ui/components/Tabs/TabBar.tsx @@ -14,10 +14,12 @@ export interface TabBarProps { classes: typeof styles; color: "primary" | "secondary"; + activeId?: string; defaultActiveId?: string; + onChange?: (activeId: string) => void; - onTabClick?: () => void; + onTabClick?: (tabId: string) => void; } const TabBar: StatelessComponent = props => { @@ -44,8 +46,9 @@ const TabBar: StatelessComponent = props => { const tabs = React.Children.toArray(children).map( (child: React.ReactElement, index: number) => + console.log(child) || React.cloneElement(child, { - tabId: index, + index, active: defaultActiveId && !activeId ? child.props.tabId === defaultActiveId diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx index 50653284d..27f37930c 100644 --- a/src/core/client/ui/components/Tabs/TabContent.tsx +++ b/src/core/client/ui/components/Tabs/TabContent.tsx @@ -1,8 +1,24 @@ import React, { StatelessComponent } from "react"; -const TabContent: StatelessComponent<{}> = props => { - const { children } = props; - return <>{children}; +export interface TabContentProps { + activeTab?: string; +} + +const TabContent: StatelessComponent = props => { + const { children, activeTab } = props; + return ( + <> + {React.Children.toArray(children) + .filter( + (child: React.ReactElement) => child.props.tabId === activeTab + ) + .map((child: React.ReactElement, i) => + React.cloneElement(child, { + tabId: child.props.tabId !== undefined ? child.props.tabId : i, + }) + )} + + ); }; export default TabContent; diff --git a/src/core/client/ui/components/Tabs/index.ts b/src/core/client/ui/components/Tabs/index.ts index 58ecee89f..f8818e9ea 100644 --- a/src/core/client/ui/components/Tabs/index.ts +++ b/src/core/client/ui/components/Tabs/index.ts @@ -1 +1,4 @@ -export { default } from "./TabBar"; +export { default as TabBar } from "./TabBar"; +export { default as Tab } from "./Tab"; +export { default as TabPane } from "./TabPane"; +export { default as TabContent } from "./TabContent"; diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts index f701660dd..28a3f5c36 100644 --- a/src/core/client/ui/components/index.ts +++ b/src/core/client/ui/components/index.ts @@ -20,3 +20,4 @@ export { default as Spinner } from "./Spinner"; export { default as HorizontalGutter } from "./HorizontalGutter"; export { default as Icon } from "./Icon"; export { default as AriaInfo } from "./AriaInfo"; +export { Tab, TabBar, TabContent, TabPane } from "./Tabs"; diff --git a/src/docs/tabs.mdx b/src/docs/tabs.mdx new file mode 100644 index 000000000..63efef0e9 --- /dev/null +++ b/src/docs/tabs.mdx @@ -0,0 +1,25 @@ +--- +name: Tabs +route: '/Tabs' +--- + +# Tabs + +### Examples + +import { Playground, PropsTable } from 'docz' +import { Flex, TabBar, Tab, TabContent, TabPane } from '../core/client/ui/components' +import Container from "react-with-state-props" + +## Simple Form + + ( + props.setActiveId(id)}> + One + Two + Three + + )}/> + From 3b01af66b346f68b7aa40816665daef208f2a877 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Mon, 10 Sep 2018 12:36:13 -0300 Subject: [PATCH 05/18] Two working examples, primary and secondary --- src/core/client/ui/components/Tabs/TabBar.tsx | 9 +++--- .../client/ui/components/Tabs/TabContent.tsx | 2 +- .../client/ui/components/Tabs/TabPane.tsx | 23 ++++---------- src/docs/tabs.mdx | 31 +++++++++++++++++-- 4 files changed, 40 insertions(+), 25 deletions(-) diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx index e3f947d47..faef9f09e 100644 --- a/src/core/client/ui/components/Tabs/TabBar.tsx +++ b/src/core/client/ui/components/Tabs/TabBar.tsx @@ -15,7 +15,7 @@ export interface TabBarProps { color: "primary" | "secondary"; - activeId?: string; + activeTab?: string; defaultActiveId?: string; onChange?: (activeId: string) => void; @@ -28,7 +28,7 @@ const TabBar: StatelessComponent = props => { classes, children, onTabClick, - activeId, + activeTab, color, defaultActiveId, } = props; @@ -46,13 +46,12 @@ const TabBar: StatelessComponent = props => { const tabs = React.Children.toArray(children).map( (child: React.ReactElement, index: number) => - console.log(child) || React.cloneElement(child, { index, active: - defaultActiveId && !activeId + defaultActiveId && !activeTab ? child.props.tabId === defaultActiveId - : child.props.tabId === activeId, + : child.props.tabId === activeTab, color, onTabClick, }) diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx index 27f37930c..4ce407db7 100644 --- a/src/core/client/ui/components/Tabs/TabContent.tsx +++ b/src/core/client/ui/components/Tabs/TabContent.tsx @@ -14,7 +14,7 @@ const TabContent: StatelessComponent = props => { ) .map((child: React.ReactElement, i) => React.cloneElement(child, { - tabId: child.props.tabId !== undefined ? child.props.tabId : i, + tabId: child.props.tabId ? child.props.tabId : i, }) )} diff --git a/src/core/client/ui/components/Tabs/TabPane.tsx b/src/core/client/ui/components/Tabs/TabPane.tsx index e24560f33..485eb5e53 100644 --- a/src/core/client/ui/components/Tabs/TabPane.tsx +++ b/src/core/client/ui/components/Tabs/TabPane.tsx @@ -1,7 +1,4 @@ -import cn from "classnames"; import React, { StatelessComponent } from "react"; -import { withStyles } from "talk-ui/hocs"; -import * as styles from "./TabPane.css"; export interface TabBarProps { /** @@ -9,32 +6,24 @@ export interface TabBarProps { */ className?: string; /** - * Override or extend the styles applied to the component. + * Name of the tab */ - classes: typeof styles; - tabId: string; - hidden: boolean; } -const TabContent: StatelessComponent = props => { - const { className, classes, children, tabId, hidden } = props; - - const rootClassName = cn(classes.root, className); - +const TabPane: StatelessComponent = props => { + const { className, children, tabId } = props; return ( ); }; -const enhanced = withStyles(styles)(TabContent); -export default enhanced; +export default TabPane; diff --git a/src/docs/tabs.mdx b/src/docs/tabs.mdx index 63efef0e9..1fc0f50bc 100644 --- a/src/docs/tabs.mdx +++ b/src/docs/tabs.mdx @@ -11,15 +11,42 @@ import { Playground, PropsTable } from 'docz' import { Flex, TabBar, Tab, TabContent, TabPane } from '../core/client/ui/components' import Container from "react-with-state-props" -## Simple Form +## Primary Tabs ( - props.setActiveId(id)}> +
    + props.setActiveId(id)}> One Two Three + + Hola One + Hola Two + Hola Three + +
    + )}/> +     + +## Secondary Tabs + + ( +
    + props.setActiveId(id)}> + One + Two + Three + + + Hola One + Hola Two + Hola Three + +
    )}/>     From a8b24187cb2bb2c45ed2e02846f7f5573384b60b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Mon, 10 Sep 2018 12:55:31 -0300 Subject: [PATCH 06/18] change --- src/core/client/ui/components/Tabs/Tab.mdx | 25 +++++++++++++++++++ src/core/client/ui/components/Tabs/TabBar.mdx | 8 +++--- src/core/client/ui/components/Tabs/TabBar.tsx | 8 +++--- .../client/ui/components/Tabs/TabContent.mdx | 23 +++++++++++++++++ .../client/ui/components/Tabs/TabPane.mdx | 23 +++++++++++++++++ 5 files changed, 79 insertions(+), 8 deletions(-) create mode 100644 src/core/client/ui/components/Tabs/Tab.mdx create mode 100644 src/core/client/ui/components/Tabs/TabContent.mdx create mode 100644 src/core/client/ui/components/Tabs/TabPane.mdx diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx new file mode 100644 index 000000000..365259456 --- /dev/null +++ b/src/core/client/ui/components/Tabs/Tab.mdx @@ -0,0 +1,25 @@ +--- +name: TabBar +menu: UI Kit +--- + +import { Playground, PropsTable } from 'docz' +import HorizontalGutter from '../HorizontalGutter' + + +import TabBar from './TabBar' +import Tab from './Tab' + +# Tab +`Tab` component is to be used within the `TabBar` component. This renders a Tab inside the Tab Bar.s + +## Basic Usage + + + + Tab one + Active Tab + Tab Three + + + diff --git a/src/core/client/ui/components/Tabs/TabBar.mdx b/src/core/client/ui/components/Tabs/TabBar.mdx index 847efe843..14fc68a3b 100644 --- a/src/core/client/ui/components/Tabs/TabBar.mdx +++ b/src/core/client/ui/components/Tabs/TabBar.mdx @@ -16,19 +16,19 @@ import Tab from './Tab' - + Tab one Active Tab Tab Three - + Tab one Active Tab Tab Three - + Tab one Active Tab Tab Three @@ -41,7 +41,7 @@ import Tab from './Tab' - + Tab one Active Tab Tab Three diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx index faef9f09e..ab9c6212d 100644 --- a/src/core/client/ui/components/Tabs/TabBar.tsx +++ b/src/core/client/ui/components/Tabs/TabBar.tsx @@ -16,7 +16,7 @@ export interface TabBarProps { color: "primary" | "secondary"; activeTab?: string; - defaultActiveId?: string; + defaultActiveTab?: string; onChange?: (activeId: string) => void; onTabClick?: (tabId: string) => void; @@ -30,7 +30,7 @@ const TabBar: StatelessComponent = props => { onTabClick, activeTab, color, - defaultActiveId, + defaultActiveTab, } = props; const rootClassName = cn( @@ -49,8 +49,8 @@ const TabBar: StatelessComponent = props => { React.cloneElement(child, { index, active: - defaultActiveId && !activeTab - ? child.props.tabId === defaultActiveId + defaultActiveTab && !activeTab + ? child.props.tabId === defaultActiveTab : child.props.tabId === activeTab, color, onTabClick, diff --git a/src/core/client/ui/components/Tabs/TabContent.mdx b/src/core/client/ui/components/Tabs/TabContent.mdx new file mode 100644 index 000000000..1646887a5 --- /dev/null +++ b/src/core/client/ui/components/Tabs/TabContent.mdx @@ -0,0 +1,23 @@ +--- +name: TabContent +menu: UI Kit +--- + +import { Playground, PropsTable } from 'docz' +import HorizontalGutter from '../HorizontalGutter' + +import TabPane from './TabPane' +import TabContent from './TabContent' + +# TabContent + +## Basic Use + + + + Hola One + Hola Two + Hola Three + + + diff --git a/src/core/client/ui/components/Tabs/TabPane.mdx b/src/core/client/ui/components/Tabs/TabPane.mdx new file mode 100644 index 000000000..36cb915f0 --- /dev/null +++ b/src/core/client/ui/components/Tabs/TabPane.mdx @@ -0,0 +1,23 @@ +--- +name: TabPane +menu: UI Kit +--- + +import { Playground, PropsTable } from 'docz' +import HorizontalGutter from '../HorizontalGutter' + +import TabPane from './TabPane' +import TabContent from './TabContent' + +# TabPane + +## Basic Use + + + + Hola One + Hola Two + Hola Three + + + From b608e8a52131bad1bc3a8fe1aedb7c907798d600 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Mon, 10 Sep 2018 13:22:57 -0300 Subject: [PATCH 07/18] Adding descriptions --- src/core/client/ui/components/Tabs/Tab.mdx | 2 +- src/core/client/ui/components/Tabs/Tab.tsx | 15 +++++++++++++-- src/core/client/ui/components/Tabs/TabBar.tsx | 16 ++++++++++++---- .../client/ui/components/Tabs/TabContent.tsx | 3 +++ 4 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx index 365259456..f81399cfc 100644 --- a/src/core/client/ui/components/Tabs/Tab.mdx +++ b/src/core/client/ui/components/Tabs/Tab.mdx @@ -1,5 +1,5 @@ --- -name: TabBar +name: Tab menu: UI Kit --- diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx index 70f2a5f5d..87b4ba236 100644 --- a/src/core/client/ui/components/Tabs/Tab.tsx +++ b/src/core/client/ui/components/Tabs/Tab.tsx @@ -12,10 +12,21 @@ export interface TabBarProps { * Override or extend the styles applied to the component. */ classes: typeof styles; - + /** + * The id/name of the tab + */ tabId: string; + /** + * Active status + */ active: boolean; - color: string; + /** + * Color style variant + */ + color: "primary" | "secondary"; + /** + * Action taken on tab click + */ onTabClick?: (tabId: string) => void; } diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx index ab9c6212d..46427f3cd 100644 --- a/src/core/client/ui/components/Tabs/TabBar.tsx +++ b/src/core/client/ui/components/Tabs/TabBar.tsx @@ -12,13 +12,21 @@ export interface TabBarProps { * Override or extend the styles applied to the component. */ classes: typeof styles; - + /** + * Color style variant + */ color: "primary" | "secondary"; - + /** + * Active tab id/name + */ activeTab?: string; + /** + * Default active tab id/name + */ defaultActiveTab?: string; - - onChange?: (activeId: string) => void; + /** + * Action taken on tab click + */ onTabClick?: (tabId: string) => void; } diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx index 4ce407db7..da68f05a9 100644 --- a/src/core/client/ui/components/Tabs/TabContent.tsx +++ b/src/core/client/ui/components/Tabs/TabContent.tsx @@ -1,6 +1,9 @@ import React, { StatelessComponent } from "react"; export interface TabContentProps { + /** + * Active tab id/name + */ activeTab?: string; } From 19b1a7882c0f29697a588400fa117edcf9f0de96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Wed, 12 Sep 2018 08:53:22 -0300 Subject: [PATCH 08/18] Changes --- src/core/client/ui/components/Tabs/Tab.tsx | 10 +++++----- src/core/client/ui/components/Tabs/TabBar.tsx | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx index 87b4ba236..a0b23c0aa 100644 --- a/src/core/client/ui/components/Tabs/Tab.tsx +++ b/src/core/client/ui/components/Tabs/Tab.tsx @@ -1,9 +1,9 @@ import cn from "classnames"; -import React, { StatelessComponent } from "react"; +import React from "react"; import { withStyles } from "talk-ui/hocs"; import * as styles from "./Tab.css"; -export interface TabBarProps { +export interface TabProps { /** * Convenient prop to override the root styling. */ @@ -30,7 +30,7 @@ export interface TabBarProps { onTabClick?: (tabId: string) => void; } -class TabBar extends React.Component { +class Tab extends React.Component { public handleTabClick = () => { if (this.props.onTabClick) { this.props.onTabClick(this.props.tabId); @@ -53,7 +53,7 @@ class TabBar extends React.Component { return ( +`; diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap new file mode 100644 index 000000000..1a4ec45de --- /dev/null +++ b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +
      + + + +
    +`; diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap new file mode 100644 index 000000000..0fb2810e0 --- /dev/null +++ b/src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +
    + Hola One +
    +`; diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap new file mode 100644 index 000000000..97032314c --- /dev/null +++ b/src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +
    + Three +
    +`; From e6f8b7623ba21929945771cbf7d206d844b04c08 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 12 Sep 2018 15:10:14 -0300 Subject: [PATCH 11/18] Adding docs and changes --- src/core/client/ui/components/Tabs/Tab.css | 4 +- src/core/client/ui/components/Tabs/Tab.mdx | 25 --------- src/core/client/ui/components/Tabs/Tab.tsx | 10 ++-- src/core/client/ui/components/Tabs/TabBar.css | 2 +- src/core/client/ui/components/Tabs/TabBar.mdx | 51 ------------------- .../client/ui/components/Tabs/TabContent.mdx | 23 --------- .../client/ui/components/Tabs/TabPane.mdx | 23 --------- .../client/ui/components/Tabs}/tabs.mdx | 0 8 files changed, 8 insertions(+), 130 deletions(-) delete mode 100644 src/core/client/ui/components/Tabs/Tab.mdx delete mode 100644 src/core/client/ui/components/Tabs/TabBar.mdx delete mode 100644 src/core/client/ui/components/Tabs/TabContent.mdx delete mode 100644 src/core/client/ui/components/Tabs/TabPane.mdx rename src/{docs => core/client/ui/components/Tabs}/tabs.mdx (100%) diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css index 9650b8a95..ca7ac0f66 100644 --- a/src/core/client/ui/components/Tabs/Tab.css +++ b/src/core/client/ui/components/Tabs/Tab.css @@ -13,7 +13,7 @@ } .root.primary { - background: #f2f2f2; + background: var(--palette-grey-lightest); color: var(--palette-grey-main); border: 1px solid var(--palette-grey-main); border-left-width: 0; @@ -32,7 +32,7 @@ background-color: var(--palette-common-white); color: var(--palette-common-black); border-bottom-color: var(--palette-common-white); - border-top-width: 5px; + border-top-width: calc(0.5 * var(--spacing-unit)); border-top-color: var(--palette-primary-main); } } diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx deleted file mode 100644 index f81399cfc..000000000 --- a/src/core/client/ui/components/Tabs/Tab.mdx +++ /dev/null @@ -1,25 +0,0 @@ ---- -name: Tab -menu: UI Kit ---- - -import { Playground, PropsTable } from 'docz' -import HorizontalGutter from '../HorizontalGutter' - - -import TabBar from './TabBar' -import Tab from './Tab' - -# Tab -`Tab` component is to be used within the `TabBar` component. This renders a Tab inside the Tab Bar.s - -## Basic Usage - - - - Tab one - Active Tab - Tab Three - - - diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx index 9afe73023..e0fd95eb8 100644 --- a/src/core/client/ui/components/Tabs/Tab.tsx +++ b/src/core/client/ui/components/Tabs/Tab.tsx @@ -21,9 +21,9 @@ export interface TabProps { */ active?: boolean; /** - * Color style variant + * Style variant */ - color?: "primary" | "secondary"; + variant?: "primary" | "secondary"; /** * Action taken on tab click */ @@ -38,13 +38,13 @@ class Tab extends React.Component { }; public render() { - const { className, classes, children, tabId, active, color } = this.props; + const { className, classes, children, tabId, active, variant } = this.props; const rootClassName = cn( classes.root, { - [classes.primary]: color === "primary", - [classes.secondary]: color === "secondary", + [classes.primary]: variant === "primary", + [classes.secondary]: variant === "secondary", [classes.active]: active, }, className diff --git a/src/core/client/ui/components/Tabs/TabBar.css b/src/core/client/ui/components/Tabs/TabBar.css index cb75fbb27..7ea4a5ac3 100644 --- a/src/core/client/ui/components/Tabs/TabBar.css +++ b/src/core/client/ui/components/Tabs/TabBar.css @@ -9,5 +9,5 @@ } .secondary { - border-bottom: 1px solid #e0e0e0; + border-bottom: 1px solid var(--palette-divider); } diff --git a/src/core/client/ui/components/Tabs/TabBar.mdx b/src/core/client/ui/components/Tabs/TabBar.mdx deleted file mode 100644 index 14fc68a3b..000000000 --- a/src/core/client/ui/components/Tabs/TabBar.mdx +++ /dev/null @@ -1,51 +0,0 @@ ---- -name: TabBar -menu: UI Kit ---- - -import { Playground, PropsTable } from 'docz' -import HorizontalGutter from '../HorizontalGutter' - - -import TabBar from './TabBar' -import Tab from './Tab' - -# TabBar - -## Basic Use - - - - - Tab one - Active Tab - Tab Three - - - - Tab one - Active Tab - Tab Three - - - - Tab one - Active Tab - Tab Three - - - - - -## Secondary Color - - - - - Tab one - Active Tab - Tab Three - - - - diff --git a/src/core/client/ui/components/Tabs/TabContent.mdx b/src/core/client/ui/components/Tabs/TabContent.mdx deleted file mode 100644 index 1646887a5..000000000 --- a/src/core/client/ui/components/Tabs/TabContent.mdx +++ /dev/null @@ -1,23 +0,0 @@ ---- -name: TabContent -menu: UI Kit ---- - -import { Playground, PropsTable } from 'docz' -import HorizontalGutter from '../HorizontalGutter' - -import TabPane from './TabPane' -import TabContent from './TabContent' - -# TabContent - -## Basic Use - - - - Hola One - Hola Two - Hola Three - - - diff --git a/src/core/client/ui/components/Tabs/TabPane.mdx b/src/core/client/ui/components/Tabs/TabPane.mdx deleted file mode 100644 index 36cb915f0..000000000 --- a/src/core/client/ui/components/Tabs/TabPane.mdx +++ /dev/null @@ -1,23 +0,0 @@ ---- -name: TabPane -menu: UI Kit ---- - -import { Playground, PropsTable } from 'docz' -import HorizontalGutter from '../HorizontalGutter' - -import TabPane from './TabPane' -import TabContent from './TabContent' - -# TabPane - -## Basic Use - - - - Hola One - Hola Two - Hola Three - - - diff --git a/src/docs/tabs.mdx b/src/core/client/ui/components/Tabs/tabs.mdx similarity index 100% rename from src/docs/tabs.mdx rename to src/core/client/ui/components/Tabs/tabs.mdx From bb7007214d7d3b890bd6db467aad6c7cf38409d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Thu, 13 Sep 2018 09:32:05 -0300 Subject: [PATCH 12/18] Adding button --- src/core/client/ui/components/Tabs/Tab.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx index e0fd95eb8..74cb146fd 100644 --- a/src/core/client/ui/components/Tabs/Tab.tsx +++ b/src/core/client/ui/components/Tabs/Tab.tsx @@ -1,5 +1,5 @@ import cn from "classnames"; -import React, { ReactNode } from "react"; +import React from "react"; import { withStyles } from "talk-ui/hocs"; import * as styles from "./Tab.css"; @@ -55,12 +55,17 @@ class Tab extends React.Component { className={rootClassName} key={`${tabId}-tab`} id={`${tabId}-tab`} - role="tab" + role="presentation" onClick={this.handleTabClick} - aria-controls={tabId} - aria-selected={active} > - {children} + ); } From 38f1068a77c9238661e66f1f598d28250ed7a899 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= Date: Fri, 14 Sep 2018 09:33:16 -0300 Subject: [PATCH 13/18] Updates --- .../test/__snapshots__/loadMore.spec.tsx.snap | 281 ++++++++++++- .../__snapshots__/permalinkView.spec.tsx.snap | 81 +++- .../permalinkViewAssetNotFound.spec.tsx.snap | 9 +- ...permalinkViewCommentNotFound.spec.tsx.snap | 33 +- .../__snapshots__/postComment.spec.tsx.snap | 304 +++++++++++++- .../__snapshots__/postReply.spec.tsx.snap | 304 +++++++++++++- .../__snapshots__/renderReplies.spec.tsx.snap | 377 +++++++++++++++++- .../__snapshots__/renderStream.spec.tsx.snap | 265 +++++++++++- .../showAllReplies.spec.tsx.snap | 287 ++++++++++++- src/core/client/ui/components/Tabs/Tab.tsx | 5 +- src/core/client/ui/components/Tabs/TabBar.tsx | 14 +- .../Tabs/__snapshots__/Tab.spec.tsx.snap | 19 +- .../Tabs/__snapshots__/TabBar.spec.tsx.snap | 63 ++- src/core/client/ui/components/Tabs/tabs.mdx | 8 +- 14 files changed, 1942 insertions(+), 108 deletions(-) diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap index 19c1b6129..1d82d7bb9 100644 --- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap @@ -325,15 +325,278 @@ exports[`renders comment stream 1`] = `
    -
    - Unknown argument "clientAuthRevision" on field "me" of type "Query". - -GraphQL request (5:6) -4: ) { -5: me(clientAuthRevision: $authRevision) { - ^ -6: ...StreamContainer_me - +
    +
    +
    + + +
    +
    + +
    +
    +
    +
    +
    +
    + + Markus + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + + Lukas + + +
    +
    +
    + +
    +
    +
    +
    + +
    `; diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap index 89eba3ff5..19ba2686a 100644 --- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap @@ -4,15 +4,78 @@ exports[`renders permalink view 1`] = `
    -
    - Unknown argument "clientAuthRevision" on field "me" of type "Query". - -GraphQL request (6:6) -5: ) { -6: me(clientAuthRevision: $authRevision) { - ^ -7: ...PermalinkViewContainer_me - +
    + + Show all comments + +
    +
    +
    + + Markus + + +
    +
    +
    + +
    +
    +
    `; diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap index d5c3a172c..b7f4fc521 100644 --- a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap @@ -5,14 +5,7 @@ exports[`renders permalink view with unknown asset 1`] = ` className="Flex-root App-root Flex-flex Flex-justifyCenter" >
    - Unknown argument "clientAuthRevision" on field "me" of type "Query". - -GraphQL request (6:6) -5: ) { -6: me(clientAuthRevision: $authRevision) { - ^ -7: ...PermalinkViewContainer_me - + Asset not found
    `; diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap index 39cd1503f..931557b1a 100644 --- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap @@ -4,15 +4,30 @@ exports[`renders permalink view with unknown comment 1`] = `
    -
    - Unknown argument "clientAuthRevision" on field "me" of type "Query". - -GraphQL request (6:6) -5: ) { -6: me(clientAuthRevision: $authRevision) { - ^ -7: ...PermalinkViewContainer_me - +
    + + Show all comments + +

    + Comment not found +

    `; diff --git a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap index 97fd167f7..dacf75add 100644 --- a/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/postComment.spec.tsx.snap @@ -718,15 +718,301 @@ exports[`renders comment stream 1`] = `
    -
    - Unknown argument "clientAuthRevision" on field "me" of type "Query". - -GraphQL request (5:6) -4: ) { -5: me(clientAuthRevision: $authRevision) { - ^ -6: ...StreamContainer_me - +
    +
    +
    +
    +
    + Signed in as + + Markus + + . +
    +
    + + Not you?  + + +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + +
    + +
    +
    +
    +
    +
    +
    + + Powered by + + ⁨The Coral Project⁩ + + +
    + +
    +
    + +
    +
    +
    +
    +
    +
    + + Markus + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + + Lukas + + +
    +
    +
    + +
    +
    +
    +
    +
    `; diff --git a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap index a7fce87a7..63360eccb 100644 --- a/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/postReply.spec.tsx.snap @@ -1279,15 +1279,301 @@ exports[`renders comment stream 1`] = `
    -
    - Unknown argument "clientAuthRevision" on field "me" of type "Query". - -GraphQL request (5:6) -4: ) { -5: me(clientAuthRevision: $authRevision) { - ^ -6: ...StreamContainer_me - +
    +
    +
    +
    +
    + Signed in as + + Markus + + . +
    +
    + + Not you?  + + +
    +
    +
    +
    +
    +
    + +
    +
    +
    + + + +
    + +
    +
    +
    +
    +
    +
    + + Powered by + + ⁨The Coral Project⁩ + + +
    + +
    +
    + +
    +
    +
    +
    +
    +
    + + Markus + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + + Lukas + + +
    +
    +
    + +
    +
    +
    +
    +
    `; diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap index dbdc4fd2e..bc69ca2ca 100644 --- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap @@ -4,15 +4,374 @@ exports[`renders comment stream 1`] = `
    -
    - Unknown argument "clientAuthRevision" on field "me" of type "Query". - -GraphQL request (5:6) -4: ) { -5: me(clientAuthRevision: $authRevision) { - ^ -6: ...StreamContainer_me - +
    +
    +
    + + +
    +
    + +
    +
    +
    +
    +
    +
    + + Markus + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + + Markus + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + + Markus + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    + + Lukas + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    `; diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap index dbdc4fd2e..befacc4ef 100644 --- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap @@ -4,15 +4,262 @@ exports[`renders comment stream 1`] = `
    -
    - Unknown argument "clientAuthRevision" on field "me" of type "Query". - -GraphQL request (5:6) -4: ) { -5: me(clientAuthRevision: $authRevision) { - ^ -6: ...StreamContainer_me - +
    +
    +
    + + +
    +
    + +
    +
    +
    +
    +
    +
    + + Markus + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + + Lukas + + +
    +
    +
    + +
    +
    +
    +
    +
    `; diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap index 4bfa26a4a..d8a24d800 100644 --- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap @@ -4,15 +4,284 @@ exports[`renders comment stream 1`] = `
    -
    - Unknown argument "clientAuthRevision" on field "me" of type "Query". - -GraphQL request (5:6) -4: ) { -5: me(clientAuthRevision: $authRevision) { - ^ -6: ...StreamContainer_me - +
    +
    +
    + + +
    +
    + +
    +
    +
    +
    +
    +
    + + Markus + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + + Lukas + + +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    `; diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx index 74cb146fd..59f24cf20 100644 --- a/src/core/client/ui/components/Tabs/Tab.tsx +++ b/src/core/client/ui/components/Tabs/Tab.tsx @@ -1,6 +1,7 @@ import cn from "classnames"; import React from "react"; import { withStyles } from "talk-ui/hocs"; +import BaseButton from "../BaseButton"; import * as styles from "./Tab.css"; export interface TabProps { @@ -58,14 +59,14 @@ class Tab extends React.Component { role="presentation" onClick={this.handleTabClick} > - + ); } diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx index 88c77b95b..29f993bf1 100644 --- a/src/core/client/ui/components/Tabs/TabBar.tsx +++ b/src/core/client/ui/components/Tabs/TabBar.tsx @@ -13,9 +13,9 @@ export interface TabBarProps { */ classes: typeof styles; /** - * Color style variant + * Style variant */ - color?: "primary" | "secondary"; + variant?: "primary" | "secondary"; /** * Active tab id/name */ @@ -37,7 +37,7 @@ const TabBar: StatelessComponent = props => { children, onTabClick, activeTab, - color, + variant, defaultActiveTab, } = props; @@ -45,8 +45,8 @@ const TabBar: StatelessComponent = props => { classes.root, [ { - [classes.primary]: color === "primary", - [classes.secondary]: color === "secondary", + [classes.primary]: variant === "primary", + [classes.secondary]: variant === "secondary", }, ], className @@ -60,7 +60,7 @@ const TabBar: StatelessComponent = props => { defaultActiveTab && !activeTab ? child.props.tabId === defaultActiveTab : child.props.tabId === activeTab, - color, + variant, onTabClick, }) ); @@ -73,7 +73,7 @@ const TabBar: StatelessComponent = props => { }; TabBar.defaultProps = { - color: "primary", + variant: "primary", }; const enhanced = withStyles(styles)(TabBar); diff --git a/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap index cd06a91e8..8754dd612 100644 --- a/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap +++ b/src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap @@ -2,12 +2,25 @@ exports[`renders correctly 1`] = ` `; diff --git a/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap index 1a4ec45de..0f588bd1d 100644 --- a/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap +++ b/src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap @@ -6,34 +6,73 @@ exports[`renders correctly 1`] = ` role="tablist" > `; diff --git a/src/core/client/ui/components/Tabs/tabs.mdx b/src/core/client/ui/components/Tabs/tabs.mdx index 1fc0f50bc..f465209ae 100644 --- a/src/core/client/ui/components/Tabs/tabs.mdx +++ b/src/core/client/ui/components/Tabs/tabs.mdx @@ -1,14 +1,14 @@ --- name: Tabs -route: '/Tabs' +menu: UI Kit --- # Tabs ### Examples -import { Playground, PropsTable } from 'docz' -import { Flex, TabBar, Tab, TabContent, TabPane } from '../core/client/ui/components' +import { Playground } from 'docz' +import { Flex, TabBar, Tab, TabContent, TabPane } from './index' import Container from "react-with-state-props" ## Primary Tabs @@ -37,7 +37,7 @@ import Container from "react-with-state-props" state={{ activeId: "two" }} render={props => (
    - props.setActiveId(id)}> + props.setActiveId(id)}> One Two Three From 3314bc3ba699f43a2ae14e4fc64970e9e03109ee Mon Sep 17 00:00:00 2001 From: Chi Vinh Le Date: Mon, 17 Sep 2018 20:52:36 +0200 Subject: [PATCH 14/18] Move styles to button --- src/core/client/ui/components/Tabs/Tab.css | 23 ++++++++++------------ src/core/client/ui/components/Tabs/Tab.tsx | 8 ++++---- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/src/core/client/ui/components/Tabs/Tab.css b/src/core/client/ui/components/Tabs/Tab.css index ca7ac0f66..4000b151b 100644 --- a/src/core/client/ui/components/Tabs/Tab.css +++ b/src/core/client/ui/components/Tabs/Tab.css @@ -1,9 +1,16 @@ .root { + display: inline-block; + list-style: none; + margin-right: -1px; + margin-bottom: -1px; +} + +.button { + height: 100%; box-sizing: border-box; + border-bottom: 0; list-style: none; padding: var(--spacing-unit); - display: inline-flex; - margin-bottom: -1px; font-weight: var(--font-weight-regular); font-family: var(--font-family-serif); @@ -12,22 +19,12 @@ } } -.root.primary { +.primary { background: var(--palette-grey-lightest); color: var(--palette-grey-main); border: 1px solid var(--palette-grey-main); - border-left-width: 0; padding: calc(0.5 * var(--spacing-unit)) calc(var(--spacing-unit) * 2); - &:first-child { - border-left-width: 1px; - border-top-left-radius: var(--round-corners); - } - - &:last-child { - border-top-right-radius: var(--round-corners); - } - &.active { background-color: var(--palette-common-white); color: var(--palette-common-black); diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx index 59f24cf20..8e0390c42 100644 --- a/src/core/client/ui/components/Tabs/Tab.tsx +++ b/src/core/client/ui/components/Tabs/Tab.tsx @@ -41,8 +41,8 @@ class Tab extends React.Component { public render() { const { className, classes, children, tabId, active, variant } = this.props; - const rootClassName = cn( - classes.root, + const buttonClassName = cn( + classes.button, { [classes.primary]: variant === "primary", [classes.secondary]: variant === "secondary", @@ -53,13 +53,13 @@ class Tab extends React.Component { return (