Updated

Signed-off-by: Avior <github@avior.me>

src/Row/Row.module.styl

@@ -0,0 +1,31 @@
+@import "../config"
+
+.row
+	display flex
+	flex-wrap wrap
+	margin (0 - $gapSize) 0 0 (0 - $gapSize)
+
+.nowrap
+	flex-wrap nowrap
+
+.nogrow > *
+	max-width initial
+	flex-grow 0
+	flex-basis initial
+
+for dir in 'row-reverse' 'column' 'column-reverse'
+	.direction-{dir}
+		flex-direction unquote(dir)
+
+@media (max-width $mobile)
+	for dir in 'row-reverse' 'column' 'column-reverse'
+		.direction-mobile-{dir}
+			flex-direction unquote(dir)
+
+for just in 'flex-start' 'center' 'flex-end' 'space-between' 'space-around' 'space-evenly'
+	.justify-{just}
+		justify-content unquote(just)
+
+for align in 'flex-start' 'center' 'flex-end' 'baseline'
+	.align-{align}
+		align-items unquote(align)

src/Row/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { buildClassName } from '../Util'
+import css from './Row.module.styl'
+
+interface Props {
+	children?: React.ReactNode
+	direction?: 'row-reverse' | 'column' | 'column-reverse'
+	mobileDirection?: 'row-reverse' | 'column' | 'column-reverse'
+	justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'
+	align?: 'flex-start' | 'center' | 'flex-end' | 'baseline'
+	nowrap?: boolean
+	nogrow?: boolean
+	className?: string
+	onClick?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+}
+
+export default class Row extends React.Component<Props> {
+
+	public render = () => (
+		<div
+			className={buildClassName(
+				css.row,
+				[css[`direction-${this.props.direction}`], this.props.direction],
+				[css[`direction-mobile-${this.props.mobileDirection}`], this.props.mobileDirection],
+				[css[`justify-${this.props.justify}`], this.props.justify],
+				[css[`align-${this.props.align}`], this.props.align],
+				[css.nowrap, this.props.nowrap],
+				[css.nogrow, this.props.nogrow],
+				this.props.className
+			)}
+			onClick={this.props.onClick}
+		>
+			{this.props.children}
+		</div>
+	)
+
+}