feat:add grid & correct disabled tabs

src/components/Grid/grid/RowContext.tsx

@@ -0,0 +1,9 @@
+import { createContext, Context } from 'react'
+
+export interface RowContextState {
+  gutter?: number
+}
+
+export const RowContext: Context<RowContextState> = createContext({})
+
+export default RowContext

src/components/Grid/grid/_style.scss

@@ -0,0 +1,14 @@
+$grid-columns: 24;
+
+.row {
+  display: flex;
+}
+
+@for $index from 1 to 24 {
+  .col-#{$index} {
+    flex: 0 0 percentage($number: $index / $grid-columns);
+  }
+}
+.col {
+  box-sizing: border-box;
+}

src/components/Grid/grid/col.tsx

@@ -0,0 +1,35 @@
+import React, { useContext, CSSProperties } from 'react'
+import classNames from 'classnames'
+import RowContext from './RowContext'
+import './style.scss'
+
+export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
+  span: number
+  offset?: number
+}
+
+export function Col(props: ColProps) {
+  const { children, span, offset } = props
+
+  const classObj = {
+    [`col-${span}`]: span !== void 0,
+    [`col-offset-${offset}`]: offset !== void 0,
+  }
+  const classes = classNames('col', classObj)
+
+  const { gutter } = useContext(RowContext)
+  const styleObj: CSSProperties = {}
+  if (gutter && gutter > 0) {
+    const horizontalGutter = gutter / 2
+    styleObj.paddingLeft = horizontalGutter
+    styleObj.paddingRight = horizontalGutter
+  }
+
+  return (
+    <div className={classes} style={{ ...styleObj }}>
+      {children}
+    </div>
+  )
+}
+
+export default Col

src/components/Grid/grid/index.tsx

@@ -0,0 +1,4 @@
+import Row from './row'
+import Col from './col'
+
+export default { Row, Col }

src/components/Grid/grid/row.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import RowContext from './RowContext'
+import './style.scss'
+
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+  gutter?: number
+}
+
+export function Row(props: RowProps) {
+  const { gutter = 0, children } = props
+
+  const rowContext = React.useMemo(() => ({ gutter }), [gutter])
+
+  const rowStyle: React.CSSProperties = {}
+
+  if (gutter && gutter > 0) {
+    rowStyle.marginLeft = gutter / -2
+    rowStyle.marginRight = gutter / -2
+  }
+
+  return (
+    <RowContext.Provider value={rowContext}>
+      <div className="row" style={{ ...rowStyle }}>
+        {children}
+      </div>
+    </RowContext.Provider>
+  )
+}
+
+export default Row

src/components/Grid/index.tsx

@@ -0,0 +1 @@
+export { default as Grid } from './grid'

src/components/Tabs/_style.scss

@@ -16,7 +16,7 @@
     color: $nav-tabs-link-hover-color;
   }
   // Disabled state lightens text
-  &.--disabled {
+  &.disabled {
     color: $nav-link-disabled-color;
     pointer-events: none;
     cursor: default;

src/styles/index.scss

@@ -63,3 +63,5 @@
 
 // calendar&datepicker
 @import '../components/Calendar/style';
+
+@import '../components/Grid/grid/style';