style(Grid): update typings and propTypes usage (#1231)

* style(Grid): update typings and propTypes usage

* style(Grid): fix type

Author: layershifter

src/collections/Grid/Grid.js

@@ -24,10 +24,10 @@ function Grid(props) {
   const {
     celled,
     centered,
-    container,
     children,
     className,
     columns,
+    container,
     divided,
     doubling,
     padded,
@@ -69,16 +69,6 @@ Grid.Row = GridRow
 Grid._meta = {
   name: 'Grid',
   type: META.TYPES.COLLECTION,
-  props: {
-    celled: ['internally'],
-    columns: [...SUI.WIDTHS, 'equal'],
-    divided: ['vertically'],
-    padded: ['horizontally', 'vertically'],
-    relaxed: ['very'],
-    reversed: ['computer', 'computer vertically', 'mobile', 'mobile vertically', 'tablet', 'tablet vertically'],
-    textAlign: SUI.TEXT_ALIGNMENTS,
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-  },
 }
 
 Grid.propTypes = {
@@ -88,28 +78,28 @@ Grid.propTypes = {
   /** A grid can have rows divided into cells. */
   celled: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(Grid._meta.props.celled),
+    PropTypes.oneOf(['internally']),
   ]),
 
   /** A grid can have its columns centered. */
   centered: PropTypes.bool,
 
-  /** A grid can be combined with a container to use avaiable layout and alignment */
-  container: PropTypes.bool,
-
   /** Primary content. */
   children: PropTypes.node,
 
   /** Additional classes. */
   className: PropTypes.string,
 
   /** Represents column count per row in Grid. */
-  columns: PropTypes.oneOf(Grid._meta.props.columns),
+  columns: PropTypes.oneOf([...SUI.WIDTHS, 'equal']),
+
+  /** A grid can be combined with a container to use avaiable layout and alignment. */
+  container: PropTypes.bool,
 
   /** A grid can have dividers between its columns. */
   divided: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(Grid._meta.props.divided),
+    PropTypes.oneOf(['vertically']),
   ]),
 
   /** A grid can double its column width on tablet and mobile sizes. */
@@ -118,17 +108,19 @@ Grid.propTypes = {
   /** A grid can preserve its vertical and horizontal gutters on first and last columns. */
   padded: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(Grid._meta.props.padded),
+    PropTypes.oneOf(['horizontally', 'vertically']),
   ]),
 
   /** A grid can increase its gutters to allow for more negative space. */
   relaxed: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.oneOf(Grid._meta.props.relaxed),
+    PropTypes.oneOf(['very']),
   ]),
 
   /** A grid can specify that its columns should reverse order at different device sizes. */
-  reversed: PropTypes.oneOf(Grid._meta.props.reversed),
+  reversed: PropTypes.oneOf([
+    'computer', 'computer vertically', 'mobile', 'mobile vertically', 'tablet', 'tablet vertically',
+  ]),
 
   /** A grid can have its columns stack on-top of each other after reaching mobile breakpoints. */
   stackable: PropTypes.bool,
@@ -137,10 +129,10 @@ Grid.propTypes = {
   stretched: PropTypes.bool,
 
   /** A grid can specify its text alignment. */
-  textAlign: PropTypes.oneOf(Grid._meta.props.textAlign),
+  textAlign: PropTypes.oneOf(SUI.TEXT_ALIGNMENTS),
 
   /** A grid can specify its vertical alignment to have all its columns vertically centered. */
-  verticalAlign: PropTypes.oneOf(GridColumn._meta.props.verticalAlign),
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 }
 
 export default Grid

src/collections/Grid/GridColumn.js

@@ -61,19 +61,6 @@ GridColumn._meta = {
   name: 'GridColumn',
   parent: 'Grid',
   type: META.TYPES.COLLECTION,
-  props: {
-    color: SUI.COLORS,
-    computer: SUI.WIDTHS,
-    floated: SUI.FLOATS,
-    largeScreen: SUI.WIDTHS,
-    mobile: SUI.WIDTHS,
-    only: ['computer', 'large screen', 'mobile', 'tablet mobile', 'tablet', 'widescreen'],
-    tablet: SUI.WIDTHS,
-    textAlign: SUI.TEXT_ALIGNMENTS,
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-    widescreen: SUI.WIDTHS,
-    width: SUI.WIDTHS,
-  },
 }
 
 GridColumn.propTypes = {
@@ -86,41 +73,41 @@ GridColumn.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
 
-  /** A column can specify a width for a computer. */
-  computer: PropTypes.oneOf(GridColumn._meta.props.width),
-
   /** A grid column can be colored. */
-  color: PropTypes.oneOf(GridColumn._meta.props.color),
+  color: PropTypes.oneOf(SUI.COLORS),
+
+  /** A column can specify a width for a computer. */
+  computer: PropTypes.oneOf(SUI.WIDTHS),
 
   /** A column can sit flush against the left or right edge of a row. */
-  floated: PropTypes.oneOf(GridColumn._meta.props.floated),
+  floated: PropTypes.oneOf(SUI.FLOATS),
 
   /** A column can specify a width for a large screen device. */
-  largeScreen: PropTypes.oneOf(GridColumn._meta.props.width),
+  largeScreen: PropTypes.oneOf(SUI.WIDTHS),
 
   /** A column can specify a width for a mobile device. */
-  mobile: PropTypes.oneOf(GridColumn._meta.props.width),
+  mobile: PropTypes.oneOf(SUI.WIDTHS),
 
   /** A column can appear only for a specific device, or screen sizes. */
-  only: PropTypes.oneOf(GridColumn._meta.props.only),
+  only: PropTypes.oneOf(['computer', 'large screen', 'mobile', 'tablet mobile', 'tablet', 'widescreen']),
 
   /** An can stretch its contents to take up the entire grid or row height. */
   stretched: PropTypes.bool,
 
   /** A column can specify a width for a tablet device. */
-  tablet: PropTypes.oneOf(GridColumn._meta.props.width),
+  tablet: PropTypes.oneOf(SUI.WIDTHS),
 
   /** A row can specify its text alignment. */
-  textAlign: PropTypes.oneOf(GridColumn._meta.props.textAlign),
+  textAlign: PropTypes.oneOf(SUI.TEXT_ALIGNMENTS),
 
   /** A column can specify its vertical alignment to have all its columns vertically centered. */
-  verticalAlign: PropTypes.oneOf(GridColumn._meta.props.verticalAlign),
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 
   /** A column can specify a width for a wide screen device. */
-  widescreen: PropTypes.oneOf(GridColumn._meta.props.width),
+  widescreen: PropTypes.oneOf(SUI.WIDTHS),
 
   /** Represents width of column. */
-  width: PropTypes.oneOf(GridColumn._meta.props.width),
+  width: PropTypes.oneOf(SUI.WIDTHS),
 }
 
 export default GridColumn

src/collections/Grid/GridRow.js

@@ -55,14 +55,6 @@ GridRow._meta = {
   name: 'GridRow',
   parent: 'Grid',
   type: META.TYPES.COLLECTION,
-  props: {
-    color: SUI.COLORS,
-    columns: [...SUI.WIDTHS, 'equal'],
-    only: ['computer', 'large screen', 'mobile', 'tablet mobile', 'tablet', 'widescreen'],
-    reversed: ['computer', 'computer vertically', 'mobile', 'mobile vertically', 'tablet', 'tablet vertically'],
-    textAlign: SUI.TEXT_ALIGNMENTS,
-    verticalAlign: SUI.VERTICAL_ALIGNMENTS,
-  },
 }
 
 GridRow.propTypes = {
@@ -79,28 +71,30 @@ GridRow.propTypes = {
   className: PropTypes.string,
 
   /** A grid row can be colored. */
-  color: PropTypes.oneOf(GridRow._meta.props.color),
+  color: PropTypes.oneOf(SUI.COLORS),
 
   /** Represents column count per line in Row. */
-  columns: PropTypes.oneOf(GridRow._meta.props.columns),
+  columns: PropTypes.oneOf([...SUI.WIDTHS, 'equal']),
 
   /** A row can have dividers between its columns. */
   divided: PropTypes.bool,
 
   /** A row can appear only for a specific device, or screen sizes. */
-  only: PropTypes.oneOf(GridRow._meta.props.only),
+  only: PropTypes.oneOf(['computer', 'large screen', 'mobile', 'tablet mobile', 'tablet', 'widescreen']),
 
   /** A  row can specify that its columns should reverse order at different device sizes. */
-  reversed: PropTypes.oneOf(GridRow._meta.props.reversed),
+  reversed: PropTypes.oneOf([
+    'computer', 'computer vertically', 'mobile', 'mobile vertically', 'tablet', 'tablet vertically',
+  ]),
 
   /** An can stretch its contents to take up the entire column height. */
   stretched: PropTypes.bool,
 
   /** A row can specify its text alignment. */
-  textAlign: PropTypes.oneOf(GridRow._meta.props.textAlign),
+  textAlign: PropTypes.oneOf(SUI.TEXT_ALIGNMENTS),
 
   /** A row can specify its vertical alignment to have all its columns vertically centered. */
-  verticalAlign: PropTypes.oneOf(GridRow._meta.props.verticalAlign),
+  verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS),
 }
 
 export default GridRow

src/collections/Grid/index.d.ts

@@ -1,19 +1,23 @@
+import * as React from 'react';
 import {
   SemanticCOLORS,
   SemanticFLOATS,
   SemanticTEXTALIGNMENTS,
   SemanticVERTICALALIGNMENTS,
   SemanticWIDTHS
 } from '../..';
-import * as React from 'react';
 
-export type GridPropReversed = 'computer' | 'computer vertically' | 'mobile' | 'mobile vertically' | 'tablet' | 'tablet vertically';
+type GridPropOnly = 'computer' | 'large screen' | 'mobile' | 'tablet mobile' | 'tablet' | 'widescreen';
+type GridPropReversed = 'computer' | 'computer vertically' | 'mobile' | 'mobile vertically' | 'tablet' | 'tablet vertically';
+
 export interface GridProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
   /** A grid can have rows divided into cells. */
-  celled?: boolean|'internally';
+  celled?: boolean | 'internally';
 
   /** A grid can have its columns centered. */
   centered?: boolean;
@@ -27,6 +31,9 @@ export interface GridProps {
   /** Represents column count per row in Grid. */
   columns?: SemanticWIDTHS | 'equal';
 
+  /** A grid can be combined with a container to use avaiable layout and alignment. */
+  container?: boolean;
+
   /** A grid can have dividers between its columns. */
   divided?: boolean | 'vertically';
 
@@ -55,15 +62,16 @@ export interface GridProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS;
 }
 
-interface GridClass extends React.ComponentClass<GridProps> {
+interface GridComponent extends React.StatelessComponent<GridProps> {
   Column: typeof GridColumn;
   Row: typeof GridRow;
 }
 
-export const Grid: GridClass;
+export const Grid: GridComponent;
 
-type GridPropOnly = 'computer' | 'large screen' | 'mobile' | 'tablet mobile' | 'tablet' | 'widescreen';
 interface GridColumnProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -110,9 +118,11 @@ interface GridColumnProps {
   width?: SemanticWIDTHS;
 }
 
-export const GridColumn: React.ComponentClass<GridColumnProps>;
+export const GridColumn: React.StatelessComponent<GridColumnProps>;
 
 interface GridRowProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -150,4 +160,4 @@ interface GridRowProps {
   verticalAlign?: SemanticVERTICALALIGNMENTS;
 }
 
-export const GridRow: React.ComponentClass<GridRowProps>;
+export const GridRow: React.StatelessComponent<GridRowProps>;

test/specs/collections/Grid/Grid-test.js

@@ -6,8 +6,8 @@ import GridRow from 'src/collections/Grid/GridRow'
 
 describe('Grid', () => {
   common.isConformant(Grid)
-  common.hasUIClassName(Grid)
   common.hasSubComponents(Grid, [GridRow, GridColumn])
+  common.hasUIClassName(Grid)
   common.rendersChildren(Grid)
 
   common.implementsTextAlignProp(Grid)

test/specs/collections/Grid/GridRow-test.js

@@ -6,6 +6,10 @@ describe('GridRow', () => {
   common.isConformant(GridRow)
   common.rendersChildren(GridRow)
 
+  common.implementsTextAlignProp(GridRow)
+  common.implementsVerticalAlignProp(GridRow)
+  common.implementsWidthProp(GridRow, { propKey: 'columns', widthClass: 'column', canEqual: true })
+
   common.propKeyAndValueToClassName(GridRow, 'only')
   common.propKeyAndValueToClassName(GridRow, 'reversed')
 
@@ -14,8 +18,4 @@ describe('GridRow', () => {
   common.propKeyOnlyToClassName(GridRow, 'stretched')
 
   common.propValueOnlyToClassName(GridRow, 'color', SUI.COLORS)
-
-  common.implementsTextAlignProp(GridRow)
-  common.implementsVerticalAlignProp(GridRow)
-  common.implementsWidthProp(GridRow, { propKey: 'columns', widthClass: 'column', canEqual: true })
 })