diff --git a/src/collections/Form/index.d.ts b/src/collections/Form/index.d.ts index cce7960eab..bd24318073 100644 --- a/src/collections/Form/index.d.ts +++ b/src/collections/Form/index.d.ts @@ -4,8 +4,7 @@ import { ReactFormEvents, SemanticFormOnClick, SemanticGenericOnClick, - SemanticWIDTHSNUMBER, - SemanticWIDTHSSTRING + SemanticWIDTHS } from '../..'; import * as React from 'react'; import { InputProps } from '../../elements/Input/index'; @@ -54,7 +53,7 @@ interface FormProps { warning?: boolean; /** Forms can automatically divide fields to be equal width */ - widths?: SemanticWIDTHSSTRING | SemanticWIDTHSNUMBER | number | 'equal'; + widths?: SemanticWIDTHS | 'equal'; } interface FormClass extends React.ComponentClass { @@ -110,7 +109,7 @@ interface FormFieldProps { type?: string; /** A field can specify its width in grid columns */ - width?: SemanticWIDTHSSTRING | SemanticWIDTHSNUMBER | number; + width?: SemanticWIDTHS; } export const FormField: React.ComponentClass; @@ -168,7 +167,7 @@ interface FormGroupProps { inline?: boolean; /** Fields Groups can specify their width in grid columns or automatically divide fields to be equal width */ - widths?: SemanticWIDTHSSTRING | SemanticWIDTHSNUMBER | number | 'equal'; + widths?: SemanticWIDTHS | 'equal'; } export const FormGroup: React.ComponentClass; diff --git a/src/collections/Grid/index.d.ts b/src/collections/Grid/index.d.ts index b88f682f1e..aae1287e4a 100644 --- a/src/collections/Grid/index.d.ts +++ b/src/collections/Grid/index.d.ts @@ -1,10 +1,9 @@ import { - SemanticCOLORS, - SemanticFLOATS, - SemanticTEXTALIGNMENTS, - SemanticVERTICALALIGNMENTS, - SemanticWIDTHSNUMBER, - SemanticWIDTHSSTRING + SemanticCOLORS, + SemanticFLOATS, + SemanticTEXTALIGNMENTS, + SemanticVERTICALALIGNMENTS, + SemanticWIDTHS } from '../..'; import * as React from 'react'; @@ -26,7 +25,7 @@ export interface GridProps { className?: string; /** Represents column count per row in Grid. */ - columns?: number | SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING | number | 'equal'; + columns?: SemanticWIDTHS | 'equal'; /** A grid can have dividers between its columns. */ divided?: boolean | 'vertically'; @@ -78,16 +77,16 @@ interface GridColumnProps { color?: SemanticCOLORS; /** A column can specify a width for a computer. */ - computer?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING | number; + computer?: SemanticWIDTHS; /** A column can sit flush against the left or right edge of a row. */ floated?: SemanticFLOATS; /** A column can specify a width for a large screen device. */ - largeScreen?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING| number; + largeScreen?: SemanticWIDTHS; /** A column can specify a width for a mobile device. */ - mobile?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING| number; + mobile?: SemanticWIDTHS; /** A column can appear only for a specific device, or screen sizes. */ only?: GridPropOnly; @@ -96,7 +95,7 @@ interface GridColumnProps { stretched?: boolean; /** A column can specify a width for a tablet device. */ - tablet?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING| number; + tablet?: SemanticWIDTHS; /** A row can specify its text alignment. */ textAlign?: SemanticTEXTALIGNMENTS; @@ -105,10 +104,10 @@ interface GridColumnProps { verticalAlign?: SemanticVERTICALALIGNMENTS; /** A column can specify a width for a wide screen device. */ - widescreen?: number | SemanticWIDTHSSTRING| number; + widescreen?: SemanticWIDTHS; /** Represents width of column. */ - width?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING| number; + width?: SemanticWIDTHS; } export const GridColumn: React.ComponentClass; @@ -130,7 +129,7 @@ interface GridRowProps { color?: SemanticCOLORS; /** Represents column count per line in Row. */ - columns?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING| number | 'equal'; + columns?: SemanticWIDTHS | 'equal'; /** A row can have dividers between its columns. */ divided?: boolean; diff --git a/src/collections/Menu/index.d.ts b/src/collections/Menu/index.d.ts index 91d21711a1..d44125d223 100644 --- a/src/collections/Menu/index.d.ts +++ b/src/collections/Menu/index.d.ts @@ -3,8 +3,7 @@ import { SemanticCOLORS, SemanticFLOATS, SemanticSIZES, - SemanticWIDTHSNUMBER, - SemanticWIDTHSSTRING + SemanticWIDTHS } from '../..'; import * as React from 'react'; @@ -91,7 +90,7 @@ export interface MenuProps { vertical?: boolean; /** A menu can have its items divided evenly. */ - widths?: number|SemanticWIDTHSSTRING | SemanticWIDTHSNUMBER| number; + widths?: SemanticWIDTHS; } interface MenuClass extends React.ComponentClass { diff --git a/src/collections/Table/Table.js b/src/collections/Table/Table.js index 9d5997fb12..c0259687b5 100644 --- a/src/collections/Table/Table.js +++ b/src/collections/Table/Table.js @@ -20,13 +20,12 @@ import TableHeaderCell from './TableHeaderCell' import TableRow from './TableRow' /** - * A table displays a collections of data grouped into rows + * A table displays a collections of data grouped into rows. */ function Table(props) { const { - basic, attached, - renderBodyRow, + basic, celled, children, className, @@ -40,6 +39,7 @@ function Table(props) { headerRow, inverted, padded, + renderBodyRow, selectable, singleLine, size, @@ -55,15 +55,11 @@ function Table(props) { 'ui', color, size, - useKeyOrValueAndKey(attached, 'attached'), - useKeyOrValueAndKey(basic, 'basic'), useKeyOnly(celled, 'celled'), useKeyOnly(collapsing, 'collapsing'), - useKeyOrValueAndKey(compact, 'compact'), useKeyOnly(definition, 'definition'), useKeyOnly(fixed, 'fixed'), useKeyOnly(inverted, 'inverted'), - useKeyOrValueAndKey(padded, 'padded'), useKeyOnly(selectable, 'selectable'), useKeyOnly(singleLine, 'single line'), useKeyOnly(sortable, 'sortable'), @@ -71,9 +67,13 @@ function Table(props) { useKeyOnly(striped, 'striped'), useKeyOnly(structured, 'structured'), useKeyOnly(unstackable, 'unstackable'), + useKeyOrValueAndKey(attached, 'attached'), + useKeyOrValueAndKey(basic, 'basic'), + useKeyOrValueAndKey(compact, 'compact'), + useKeyOrValueAndKey(padded, 'padded'), useWidthProp(columns, 'column'), + 'table', className, - 'table' ) const rest = getUnhandledProps(Table, props) const ElementType = getElementType(Table, props) @@ -96,15 +96,6 @@ function Table(props) { Table._meta = { name: 'Table', type: META.TYPES.COLLECTION, - props: { - attached: ['top', 'bottom'], - basic: ['very'], - color: SUI.COLORS, - columns: SUI.WIDTHS, - compact: ['very'], - padded: ['very'], - size: _.without(SUI.SIZES, 'mini', 'tiny', 'medium', 'big', 'huge', 'massive'), - }, } Table.defaultProps = { @@ -117,14 +108,14 @@ Table.propTypes = { /** Attach table to other content */ attached: PropTypes.oneOfType([ - PropTypes.oneOf(Table._meta.props.attached), PropTypes.bool, + PropTypes.oneOf(['top', 'bottom']), ]), /** A table can reduce its complexity to increase readability. */ basic: PropTypes.oneOfType([ + PropTypes.oneOf(['very']), PropTypes.bool, - PropTypes.oneOf(Table._meta.props.basic), ]), /** A table may be divided each row into separate cells. */ @@ -140,15 +131,15 @@ Table.propTypes = { collapsing: PropTypes.bool, /** A table can be given a color to distinguish it from other tables. */ - color: PropTypes.oneOf(Table._meta.props.color), + color: PropTypes.oneOf(SUI.COLORS), /** A table can specify its column count to divide its content evenly. */ - columns: PropTypes.oneOf(Table._meta.props.columns), + columns: PropTypes.oneOf(SUI.WIDTHS), /** A table may sometimes need to be more compact to make more rows visible at a time. */ compact: PropTypes.oneOfType([ PropTypes.bool, - PropTypes.oneOf(Table._meta.props.compact), + PropTypes.oneOf(['very']), ]), /** A table may be formatted to emphasize a first column that defines a rows content. */ @@ -171,7 +162,7 @@ Table.propTypes = { /** A table may sometimes need to be more padded for legibility. */ padded: PropTypes.oneOfType([ PropTypes.bool, - PropTypes.oneOf(Table._meta.props.padded), + PropTypes.oneOf(['very']), ]), /** @@ -191,7 +182,7 @@ Table.propTypes = { singleLine: PropTypes.bool, /** A table can also be small or large. */ - size: PropTypes.oneOf(Table._meta.props.size), + size: PropTypes.oneOf(_.without(SUI.SIZES, 'mini', 'tiny', 'medium', 'big', 'huge', 'massive')), /** A table may allow a user to sort contents by clicking on a table header. */ sortable: PropTypes.bool, diff --git a/src/collections/Table/TableCell.js b/src/collections/Table/TableCell.js index 98c17b7c3f..65798911ea 100644 --- a/src/collections/Table/TableCell.js +++ b/src/collections/Table/TableCell.js @@ -16,6 +16,9 @@ import { } from '../../lib' import Icon from '../../elements/Icon' +/** + * A table row can have cells. + */ function TableCell(props) { const { active, @@ -70,11 +73,6 @@ TableCell._meta = { name: 'TableCell', type: META.TYPES.COLLECTION, parent: 'Table', - props: { - textAlign: SUI.TEXT_ALIGNMENTS, - verticalAlign: SUI.VERTICAL_ALIGNMENTS, - width: SUI.WIDTHS, - }, } TableCell.defaultProps = { @@ -122,16 +120,16 @@ TableCell.propTypes = { singleLine: PropTypes.bool, /** A table cell can adjust its text alignment. */ - textAlign: PropTypes.oneOf(TableCell._meta.props.textAlign), + textAlign: PropTypes.oneOf(_.without(SUI.TEXT_ALIGNMENTS, 'justified')), /** A table cell can adjust its text alignment. */ - verticalAlign: PropTypes.oneOf(TableCell._meta.props.verticalAlign), + verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS), /** A cell may warn a user. */ warning: PropTypes.bool, /** A table can specify the width of individual columns independently. */ - width: PropTypes.oneOf(TableCell._meta.props.width), + width: PropTypes.oneOf(SUI.WIDTHS), } TableCell.create = createShorthandFactory(TableCell, content => ({ content }), true) diff --git a/src/collections/Table/TableFooter.js b/src/collections/Table/TableFooter.js index 9e43a32572..0f30cd621a 100644 --- a/src/collections/Table/TableFooter.js +++ b/src/collections/Table/TableFooter.js @@ -3,6 +3,9 @@ import React from 'react' import { META } from '../../lib' import TableHeader from './TableHeader' +/** + * A table can have a footer. + */ function TableFooter(props) { return } diff --git a/src/collections/Table/TableHeader.js b/src/collections/Table/TableHeader.js index 4f7c440632..73ef7c4a71 100644 --- a/src/collections/Table/TableHeader.js +++ b/src/collections/Table/TableHeader.js @@ -9,6 +9,9 @@ import { useKeyOnly, } from '../../lib' +/** + * A table can have a header. + */ function TableHeader(props) { const { children, className, fullWidth } = props const classes = cx( diff --git a/src/collections/Table/TableHeaderCell.js b/src/collections/Table/TableHeaderCell.js index ff07448d2d..892a5c6e50 100644 --- a/src/collections/Table/TableHeaderCell.js +++ b/src/collections/Table/TableHeaderCell.js @@ -1,5 +1,6 @@ import cx from 'classnames' import React, { PropTypes } from 'react' + import { customPropTypes, getUnhandledProps, @@ -8,6 +9,9 @@ import { } from '../../lib' import TableCell from './TableCell' +/** + * A table can have a header cell. + */ function TableHeaderCell(props) { const { as, className, sorted } = props const classes = cx( @@ -15,16 +19,14 @@ function TableHeaderCell(props) { className ) const rest = getUnhandledProps(TableHeaderCell, props) - return + + return } TableHeaderCell._meta = { name: 'TableHeaderCell', type: META.TYPES.COLLECTION, parent: 'Table', - props: { - sorted: ['ascending', 'descending'], - }, } TableHeaderCell.propTypes = { @@ -35,7 +37,7 @@ TableHeaderCell.propTypes = { className: PropTypes.string, /** A header cell can be sorted in ascending or descending order. */ - sorted: PropTypes.oneOf(TableHeaderCell._meta.props.sorted), + sorted: PropTypes.oneOf(['ascending', 'descending']), } TableHeaderCell.defaultProps = { diff --git a/src/collections/Table/TableRow.js b/src/collections/Table/TableRow.js index b42b8c4eab..dfb38d6aed 100644 --- a/src/collections/Table/TableRow.js +++ b/src/collections/Table/TableRow.js @@ -15,6 +15,9 @@ import { } from '../../lib' import TableCell from './TableCell' +/** + * A table can have rows. + */ function TableRow(props) { const { active, @@ -60,10 +63,6 @@ TableRow._meta = { name: 'TableRow', type: META.TYPES.COLLECTION, parent: 'Table', - props: { - textAlign: SUI.TEXT_ALIGNMENTS, - verticalAlign: SUI.VERTICAL_ALIGNMENTS, - }, } TableRow.defaultProps = { @@ -103,10 +102,10 @@ TableRow.propTypes = { positive: PropTypes.bool, /** A table row can adjust its text alignment. */ - textAlign: PropTypes.oneOf(TableRow._meta.props.textAlign), + textAlign: PropTypes.oneOf(_.without(SUI.TEXT_ALIGNMENTS, 'justified')), /** A table row can adjust its vertical alignment. */ - verticalAlign: PropTypes.oneOf(TableRow._meta.props.verticalAlign), + verticalAlign: PropTypes.oneOf(SUI.VERTICAL_ALIGNMENTS), /** A row may warn a user. */ warning: PropTypes.bool, diff --git a/src/collections/Table/index.d.ts b/src/collections/Table/index.d.ts index b2e4b90298..ad67e9bc05 100644 --- a/src/collections/Table/index.d.ts +++ b/src/collections/Table/index.d.ts @@ -1,14 +1,13 @@ +import * as React from 'react'; import { - SemanticCOLORS, - SemanticSIZES, - SemanticTEXTALIGNMENTS, - SemanticVERTICALALIGNMENTS, - SemanticWIDTHSNUMBER, - SemanticWIDTHSSTRING + SemanticCOLORS, + SemanticVERTICALALIGNMENTS, + SemanticWIDTHS } from '../..'; -import * as React from 'react'; interface TableProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -19,7 +18,7 @@ interface TableProps { basic?: boolean | 'very'; /** A table may be divided each row into separate cells. */ - celled?: boolean|'internally'; + celled?: boolean | 'internally'; /** Primary content. */ children?: React.ReactNode; @@ -34,7 +33,7 @@ interface TableProps { color?: SemanticCOLORS; /** A table can specify its column count to divide its content evenly. */ - columns?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING | number; + columns?: SemanticWIDTHS; /** A table may sometimes need to be more compact to make more rows visible at a time. */ compact?: boolean | 'very'; @@ -43,7 +42,7 @@ interface TableProps { definition?: boolean; /** - * A table can use fixed a special faster form of table rendering that does not resize table cells based on content + * A table can use fixed a special faster form of table rendering that does not resize table cells based on content. */ fixed?: boolean; @@ -63,7 +62,7 @@ interface TableProps { * A function that takes (data, index) and returns shorthand for a TableRow * to be placed within Table.Body. */ - renderBodyRow?: ()=>void; // TODO - check; + renderBodyRow?: (data: any, index: number) => any; /** A table can have its rows appear selectable. */ selectable?: boolean; @@ -72,7 +71,10 @@ interface TableProps { singleLine?: boolean; /** A table can also be small or large. */ - size?: SemanticSIZES; + size?: 'small' | 'large'; + + /** A table may allow a user to sort contents by clicking on a table header. */ + sortable?: boolean; /** A table can specify how it stacks table content responsively. */ stackable?: boolean; @@ -84,13 +86,13 @@ interface TableProps { structured?: boolean; /** Data to be passed to the renderBodyRow function. */ - tableData?: any; + tableData?: Array; /** A table can specify how it stacks table content responsively. */ unstackable?: boolean; } -interface TableClass extends React.ComponentClass { +interface TableComponent extends React.StatelessComponent { Body: typeof TableBody; Cell: typeof TableCell; Footer: typeof TableFooter; @@ -99,9 +101,11 @@ interface TableClass extends React.ComponentClass { Row: typeof TableRow; } -export const Table: TableClass; +export const Table: TableComponent; interface TableBodyProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -112,51 +116,52 @@ interface TableBodyProps { className?: string; } -export const TableBody: React.ComponentClass; +export const TableBody: React.StatelessComponent; interface TableCellProps { + [key: string]: any; + + /** An element type to render as (string or function). */ + as?: any; /** A cell can be active or selected by a user. */ active?: boolean; - /** An element type to render as (string or function). */ - as ?: any; - /** Primary content. */ - children ?: React.ReactNode; + children?: React.ReactNode; /** Additional classes. */ className?: string; /** A table can be collapsing, taking up only as much space as its rows. */ - collapsing ?: boolean; + collapsing?: boolean; /** Shorthand for primary content. */ - content ?: any; + content?: React.ReactNode; /** A cell can be disabled. */ - disabled ?: boolean; + disabled?: boolean; /** A cell may call attention to an error or a negative value. */ - error ?: boolean; + error?: boolean; /** Add an Icon by name, props object, or pass an */ - icon ?: any; + icon?: any; /** A cell may let a user know whether a value is bad. */ - negative ?: boolean; + negative?: boolean; /** A cell may let a user know whether a value is good. */ - positive ?: boolean; + positive?: boolean; /** A cell can be selectable. */ selectable?: boolean; /** A cell can specify that its contents should remain on a single line and not wrap. */ - singleLine ?: boolean; + singleLine?: boolean; /** A table cell can adjust its text alignment. */ - textAlign?: SemanticTEXTALIGNMENTS; + textAlign?: 'center' | 'left' | 'right'; /** A table cell can adjust its text alignment. */ verticalAlign?: SemanticVERTICALALIGNMENTS; @@ -165,19 +170,19 @@ interface TableCellProps { warning?: boolean; /** A table can specify the width of individual columns independently. */ - width?: number | SemanticWIDTHSSTRING | SemanticWIDTHSNUMBER; + width?: SemanticWIDTHS; } -export const TableCell: React.ComponentClass; +export const TableCell: React.StatelessComponent; -interface TableFooterProps { - /** An element type to render as (string or function). */ - as?: any; +interface TableFooterProps extends TableHeaderProps { } -export const TableFooter: React.ComponentClass; +export const TableFooter: React.StatelessComponent; interface TableHeaderProps { + [key: string]: any; + /** An element type to render as (string or function). */ as?: any; @@ -191,23 +196,23 @@ interface TableHeaderProps { fullWidth?: boolean; } -export const TableHeader: React.ComponentClass; +export const TableHeader: React.StatelessComponent; -interface TableHeaderCellProps { - /** An element type to render as (string or function). */ - as?: any; +interface TableHeaderCellProps extends TableCellProps { + sorted: 'ascending' | 'descending'; } -export const TableHeaderCell: React.ComponentClass; +export const TableHeaderCell: React.StatelessComponent; interface TableRowProps { + [key: string]: any; + + /** An element type to render as (string or function). */ + as?: any; /** A row can be active or selected by a user. */ active?: boolean; - /** An element type to render as (string or function). */ - as ?: any; - /** An element type to render as (string or function). */ cellAs?: any; @@ -215,25 +220,25 @@ interface TableRowProps { cells?: any; /** Primary content. */ - children ?: React.ReactNode; + children?: React.ReactNode; /** Additional classes. */ className?: string; /** A row can be disabled. */ - disabled ?: boolean; + disabled?: boolean; /** A row may call attention to an error or a negative value. */ - error ?: boolean; + error?: boolean; /** A row may let a user know whether a value is bad. */ - negative ?: boolean; + negative?: boolean; /** A row may let a user know whether a value is good. */ - positive ?: boolean; + positive?: boolean; /** A table row can adjust its text alignment. */ - textAlign?: SemanticTEXTALIGNMENTS; + textAlign?: 'center' | 'left' | 'right'; /** A table row can adjust its vertical alignment. */ verticalAlign?: SemanticVERTICALALIGNMENTS; @@ -242,4 +247,4 @@ interface TableRowProps { warning?: boolean; } -export const TableRow: React.ComponentClass; +export const TableRow: React.StatelessComponent; diff --git a/src/elements/Button/ButtonGroup.js b/src/elements/Button/ButtonGroup.js index 70130d4715..7be2b07c17 100644 --- a/src/elements/Button/ButtonGroup.js +++ b/src/elements/Button/ButtonGroup.js @@ -22,7 +22,8 @@ function ButtonGroup(props) { secondary, size, toggle, vertical, widths, } = props - const classes = cx('ui', + const classes = cx( + 'ui', size, color, useValueAndKey(attached, 'attached'), diff --git a/src/elements/Button/index.d.ts b/src/elements/Button/index.d.ts index e7a4723bcd..730486b794 100644 --- a/src/elements/Button/index.d.ts +++ b/src/elements/Button/index.d.ts @@ -5,8 +5,7 @@ import { SemanticSOCIAL, SemanticFLOATS, SemanticSIZES, - SemanticWIDTHSSTRING, - SemanticWIDTHSNUMBER + SemanticWIDTHS } from '../../index'; export type SemanticButtonLABELPOSITIONS = 'right' | 'left'; @@ -147,7 +146,7 @@ interface GroupProps { size?: SemanticSIZES; /** Groups can have their widths divided evenly */ - widths?: number | SemanticWIDTHSSTRING | SemanticWIDTHSNUMBER; + widths?: SemanticWIDTHS; } export const ButtonGroup: React.ComponentClass; diff --git a/src/elements/Image/index.d.ts b/src/elements/Image/index.d.ts index 0d66200dc6..705ab9f360 100644 --- a/src/elements/Image/index.d.ts +++ b/src/elements/Image/index.d.ts @@ -1,10 +1,9 @@ import { LabelProps } from '../Label'; import { - SemanticFLOATS, - SemanticSIZES, - SemanticVERTICALALIGNMENTS, - SemanticWIDTHSNUMBER, - SemanticWIDTHSSTRING + SemanticFLOATS, + SemanticSIZES, + SemanticVERTICALALIGNMENTS, + SemanticWIDTHS } from '../..'; import * as React from 'react'; @@ -72,7 +71,7 @@ export interface ImageProps { verticalAlign?: SemanticVERTICALALIGNMENTS; /** The img element width attribute. */ - width?: number|SemanticWIDTHSSTRING| SemanticWIDTHSNUMBER; + width?: SemanticWIDTHS; /** An image can render wrapped in a `div.ui.image` as alternative HTML markup. */ wrapped?: boolean; diff --git a/src/elements/Segment/Segment.js b/src/elements/Segment/Segment.js index a06c6cb05b..069054a962 100644 --- a/src/elements/Segment/Segment.js +++ b/src/elements/Segment/Segment.js @@ -148,7 +148,7 @@ Segment.propTypes = { tertiary: PropTypes.bool, /** Formats content to be aligned as part of a vertical group. */ - textAlign: PropTypes.oneOf(SUI.TEXT_ALIGNMENTS), + textAlign: PropTypes.oneOf(_.without(SUI.TEXT_ALIGNMENTS, 'justified')), /** Formats content to be aligned vertically. */ vertical: PropTypes.bool, diff --git a/src/index.d.ts b/src/index.d.ts index 6b73d9e506..6106ca507a 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -11,11 +11,21 @@ export type SemanticFLOATS = 'left' | 'right'; export type SemanticSIZES = 'mini' | 'tiny' | 'small' | 'medium' | 'large' | 'big' | 'huge' | 'massive'; export type SemanticTEXTALIGNMENTS = 'left' | 'center' | 'right' | 'justified'; export type SemanticVERTICALALIGNMENTS = 'top' | 'middle' | 'bottom'; -export type SemanticWIDTHSNUMBER = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14' | '15' | '16'; -export type SemanticWIDTHSSTRING = 'one' | 'two' | 'three' | 'four' | 'five' | 'six' | 'seven' | 'eight' | 'nine' | 'ten' | 'eleven' | 'twelve' | 'thirteen' | 'fourteen' | 'fifteen' | 'sixteen'; export type SemanticCOUNTRY = 'ad' | 'andorra' | 'ae' | 'united arab emirates' | 'uae' | 'af' | 'afghanistan' | 'ag' | 'antigua' | 'ai' | 'anguilla' | 'al' | 'albania' | 'am' | 'armenia' | 'an' | 'netherlands antilles' | 'ao' | 'angola' | 'ar' | 'argentina' | 'as' | 'american samoa' | 'at' | 'austria' | 'au' | 'australia' | 'aw' | 'aruba' | 'ax' | 'aland islands' | 'az' | 'azerbaijan' | 'ba' | 'bosnia' | 'bb' | 'barbados' | 'bd' | 'bangladesh' | 'be' | 'belgium' | 'bf' | 'burkina faso' | 'bg' | 'bulgaria' | 'bh' | 'bahrain' | 'bi' | 'burundi' | 'bj' | 'benin' | 'bm' | 'bermuda' | 'bn' | 'brunei' | 'bo' | 'bolivia' | 'br' | 'brazil' | 'bs' | 'bahamas' | 'bt' | 'bhutan' | 'bv' | 'bouvet island' | 'bw' | 'botswana' | 'by' | 'belarus' | 'bz' | 'belize' | 'ca' | 'canada' | 'cc' | 'cocos islands' | 'cd' | 'congo' | 'cf' | 'central african republic' | 'cg' | 'congo brazzaville' | 'ch' | 'switzerland' | 'ci' | 'cote divoire' | 'ck' | 'cook islands' | 'cl' | 'chile' | 'cm' | 'cameroon' | 'cn' | 'china' | 'co' | 'colombia' | 'cr' | 'costa rica' | 'cs' | 'serbia' | 'cu' | 'cuba' | 'cv' | 'cape verde' | 'cx' | 'christmas island' | 'cy' | 'cyprus' | 'cz' | 'czech republic' | 'de' | 'germany' | 'dj' | 'djibouti' | 'dk' | 'denmark' | 'dm' | 'dominica' | 'do' | 'dominican republic' | 'dz' | 'algeria' | 'ec' | 'ecuador' | 'ee' | 'estonia' | 'eg' | 'egypt' | 'eh' | 'western sahara' | 'er' | 'eritrea' | 'es' | 'spain' | 'et' | 'ethiopia' | 'eu' | 'european union' | 'fi' | 'finland' | 'fj' | 'fiji' | 'fk' | 'falkland islands' | 'fm' | 'micronesia' | 'fo' | 'faroe islands' | 'fr' | 'france' | 'ga' | 'gabon' | 'gb' | 'united kingdom' | 'gd' | 'grenada' | 'ge' | 'georgia' | 'gf' | 'french guiana' | 'gh' | 'ghana' | 'gi' | 'gibraltar' | 'gl' | 'greenland' | 'gm' | 'gambia' | 'gn' | 'guinea' | 'gp' | 'guadeloupe' | 'gq' | 'equatorial guinea' | 'gr' | 'greece' | 'gs' | 'sandwich islands' | 'gt' | 'guatemala' | 'gu' | 'guam' | 'gw' | 'guinea-bissau' | 'gy' | 'guyana' | 'hk' | 'hong kong' | 'hm' | 'heard island' | 'hn' | 'honduras' | 'hr' | 'croatia' | 'ht' | 'haiti' | 'hu' | 'hungary' | 'id' | 'indonesia' | 'ie' | 'ireland' | 'il' | 'israel' | 'in' | 'india' | 'io' | 'indian ocean territory' | 'iq' | 'iraq' | 'ir' | 'iran' | 'is' | 'iceland' | 'it' | 'italy' | 'jm' | 'jamaica' | 'jo' | 'jordan' | 'jp' | 'japan' | 'ke' | 'kenya' | 'kg' | 'kyrgyzstan' | 'kh' | 'cambodia' | 'ki' | 'kiribati' | 'km' | 'comoros' | 'kn' | 'saint kitts and nevis' | 'kp' | 'north korea' | 'kr' | 'south korea' | 'kw' | 'kuwait' | 'ky' | 'cayman islands' | 'kz' | 'kazakhstan' | 'la' | 'laos' | 'lb' | 'lebanon' | 'lc' | 'saint lucia' | 'li' | 'liechtenstein' | 'lk' | 'sri lanka' | 'lr' | 'liberia' | 'ls' | 'lesotho' | 'lt' | 'lithuania' | 'lu' | 'luxembourg' | 'lv' | 'latvia' | 'ly' | 'libya' | 'ma' | 'morocco' | 'mc' | 'monaco' | 'md' | 'moldova' | 'me' | 'montenegro' | 'mg' | 'madagascar' | 'mh' | 'marshall islands' | 'mk' | 'macedonia' | 'ml' | 'mali' | 'mm' | 'myanmar' | 'burma' | 'mn' | 'mongolia' | 'mo' | 'macau' | 'mp' | 'northern mariana islands' | 'mq' | 'martinique' | 'mr' | 'mauritania' | 'ms' | 'montserrat' | 'mt' | 'malta' | 'mu' | 'mauritius' | 'mv' | 'maldives' | 'mw' | 'malawi' | 'mx' | 'mexico' | 'my' | 'malaysia' | 'mz' | 'mozambique' | 'na' | 'namibia' | 'nc' | 'new caledonia' | 'ne' | 'niger' | 'nf' | 'norfolk island' | 'ng' | 'nigeria' | 'ni' | 'nicaragua' | 'nl' | 'netherlands' | 'no' | 'norway' | 'np' | 'nepal' | 'nr' | 'nauru' | 'nu' | 'niue' | 'nz' | 'new zealand' | 'om' | 'oman' | 'pa' | 'panama' | 'pe' | 'peru' | 'pf' | 'french polynesia' | 'pg' | 'new guinea' | 'ph' | 'philippines' | 'pk' | 'pakistan' | 'pl' | 'poland' | 'pm' | 'saint pierre' | 'pn' | 'pitcairn islands' | 'pr' | 'puerto rico' | 'ps' | 'palestine' | 'pt' | 'portugal' | 'pw' | 'palau' | 'py' | 'paraguay' | 'qa' | 'qatar' | 're' | 'reunion' | 'ro' | 'romania' | 'rs' | 'serbia' | 'ru' | 'russia' | 'rw' | 'rwanda' | 'sa' | 'saudi arabia' | 'sb' | 'solomon islands' | 'sc' | 'seychelles' | 'gb sct' | 'scotland' | 'sd' | 'sudan' | 'se' | 'sweden' | 'sg' | 'singapore' | 'sh' | 'saint helena' | 'si' | 'slovenia' | 'sj' | 'svalbard' | 'jan mayen' | 'sk' | 'slovakia' | 'sl' | 'sierra leone' | 'sm' | 'san marino' | 'sn' | 'senegal' | 'so' | 'somalia' | 'sr' | 'suriname' | 'st' | 'sao tome' | 'sv' | 'el salvador' | 'sy' | 'syria' | 'sz' | 'swaziland' | 'tc' | 'caicos islands' | 'td' | 'chad' | 'tf' | 'french territories' | 'tg' | 'togo' | 'th' | 'thailand' | 'tj' | 'tajikistan' | 'tk' | 'tokelau' | 'tl' | 'timorleste' | 'tm' | 'turkmenistan' | 'tn' | 'tunisia' | 'to' | 'tonga' | 'tr' | 'turkey' | 'tt' | 'trinidad' | 'tv' | 'tuvalu' | 'tw' | 'taiwan' | 'tz' | 'tanzania' | 'ua' | 'ukraine' | 'ug' | 'uganda' | 'um' | 'us minor islands' | 'us' | 'america' | 'united states' | 'uy' | 'uruguay' | 'uz' | 'uzbekistan' | 'va' | 'vatican city' | 'vc' | 'saint vincent' | 've' | 'venezuela' | 'vg' | 'british virgin islands' | 'vi' | 'us virgin islands' | 'vn' | 'vietnam' | 'vu' | 'vanuatu' | 'gb wls' | 'wales' | 'wf' | 'wallis and futuna' | 'ws' | 'samoa' | 'ye' | 'yemen' | 'yt' | 'mayotte' | 'za' | 'south africa' | 'zm' | 'zambia' | 'zw' | 'zimbabwe'; export type SemanticPOSITIONING = 'top left' | 'top right' | 'bottom right' | 'bottom left' | 'right center' | 'left center' | 'top center' | 'bottom center'; +// ====================================================== +// Widths +// ====================================================== + +type SemanticWIDTHSNUMBER = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; +type SemanticWIDTHSSTRING = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | + '9' | '10' | '11' | '12' | '13' | '14' | '15' | '16' | + 'one' | 'two' | 'three' | 'four' | 'five' | 'six' | 'seven' | 'eight' | + 'nine' | 'ten' | 'eleven' | 'twelve' | 'thirteen' | 'fourteen' | 'fifteen' | 'sixteen'; + +export type SemanticWIDTHS = SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING; + export type SemanticGenericOnClick = (event: any, value: any) => void; export type SemanticFormOnClick = (event: any, object: Object) => void; export type SemanticSearchOnClick = (event: any, value: any, text: string) => void; // TODO - not sure if this is correct. diff --git a/src/views/Card/index.d.ts b/src/views/Card/index.d.ts index 4131485bbe..3e6435cb82 100644 --- a/src/views/Card/index.d.ts +++ b/src/views/Card/index.d.ts @@ -1,4 +1,4 @@ -import { ReactMouseEvents, SemanticCOLORS, SemanticWIDTHSNUMBER, SemanticWIDTHSSTRING } from '../..'; +import { ReactMouseEvents, SemanticCOLORS, SemanticWIDTHS } from '../..'; import * as React from 'react'; interface CardProps extends ReactMouseEvents { @@ -120,7 +120,7 @@ interface CardGroupProps { items?: Array; /** A group of cards can set how many cards should exist in a row */ - itemsPerRow?: SemanticWIDTHSNUMBER | SemanticWIDTHSSTRING | number; + itemsPerRow?: SemanticWIDTHS; /** A group of cards can automatically stack rows to a single columns on mobile devices */ stackable?: boolean; diff --git a/src/views/Statistic/index.d.ts b/src/views/Statistic/index.d.ts index 9c4c35ebe3..3c8ab63304 100644 --- a/src/views/Statistic/index.d.ts +++ b/src/views/Statistic/index.d.ts @@ -1,5 +1,5 @@ import { Label } from '../../elements/Label'; -import { SemanticCOLORS, SemanticFLOATS, SemanticSIZES, SemanticWIDTHSNUMBER, SemanticWIDTHSSTRING } from '../..'; +import { SemanticCOLORS, SemanticFLOATS, SemanticSIZES, SemanticWIDTHS } from '../..'; import * as React from 'react'; @@ -72,7 +72,7 @@ interface StatisticGroupProps { size?: SemanticSIZES; /** A statistic group can have its items divided evenly. */ - widths?: SemanticWIDTHSSTRING | SemanticWIDTHSNUMBER | number; + widths?: SemanticWIDTHS; } export const StatisticGroup: React.ComponentClass; diff --git a/test/specs/collections/Form/Form-test.js b/test/specs/collections/Form/Form-test.js index 38cf941985..0a68c3b2f9 100644 --- a/test/specs/collections/Form/Form-test.js +++ b/test/specs/collections/Form/Form-test.js @@ -1,3 +1,4 @@ +import _ from 'lodash' import React from 'react' import { findDOMNode } from 'react-dom' @@ -11,6 +12,7 @@ import FormInput from 'src/collections/Form/FormInput' import FormRadio from 'src/collections/Form/FormRadio' import FormSelect from 'src/collections/Form/FormSelect' import FormTextArea from 'src/collections/Form/FormTextArea' +import { SUI } from 'src/lib' import * as common from 'test/specs/commonTests' import { consoleUtil, sandbox } from 'test/utils' @@ -36,7 +38,7 @@ describe('Form', () => { common.propKeyOnlyToClassName(Form, 'success') common.propKeyOnlyToClassName(Form, 'warning') - common.propValueOnlyToClassName(Form, 'size') + common.propValueOnlyToClassName(Form, 'size', _.without(SUI.SIZES, 'medium')) common.implementsWidthProp(Form, { propKey: 'widths' }) diff --git a/test/specs/collections/Grid/GridColumn-test.js b/test/specs/collections/Grid/GridColumn-test.js index b1accb3e00..df7c11f00a 100644 --- a/test/specs/collections/Grid/GridColumn-test.js +++ b/test/specs/collections/Grid/GridColumn-test.js @@ -1,17 +1,11 @@ -import * as common from 'test/specs/commonTests' import GridColumn from 'src/collections/Grid/GridColumn' +import { SUI } from 'src/lib' +import * as common from 'test/specs/commonTests' describe('GridColumn', () => { common.isConformant(GridColumn) common.rendersChildren(GridColumn) - common.propKeyAndValueToClassName(GridColumn, 'floated') - common.propKeyAndValueToClassName(GridColumn, 'only') - - common.propKeyOnlyToClassName(GridColumn, 'stretched') - - common.propValueOnlyToClassName(GridColumn, 'color') - common.implementsTextAlignProp(GridColumn) common.implementsVerticalAlignProp(GridColumn) @@ -33,4 +27,11 @@ describe('GridColumn', () => { common.implementsWidthProp(GridColumn, { propKey: 'width', widthClass: 'wide', canEqual: false, }) + + common.propKeyAndValueToClassName(GridColumn, 'floated') + common.propKeyAndValueToClassName(GridColumn, 'only') + + common.propKeyOnlyToClassName(GridColumn, 'stretched') + + common.propValueOnlyToClassName(GridColumn, 'color', SUI.COLORS) }) diff --git a/test/specs/collections/Grid/GridRow-test.js b/test/specs/collections/Grid/GridRow-test.js index 0afa9996d5..351bf95718 100644 --- a/test/specs/collections/Grid/GridRow-test.js +++ b/test/specs/collections/Grid/GridRow-test.js @@ -1,5 +1,6 @@ -import * as common from 'test/specs/commonTests' import GridRow from 'src/collections/Grid/GridRow' +import { SUI } from 'src/lib' +import * as common from 'test/specs/commonTests' describe('GridRow', () => { common.isConformant(GridRow) @@ -12,7 +13,7 @@ describe('GridRow', () => { common.propKeyOnlyToClassName(GridRow, 'divided') common.propKeyOnlyToClassName(GridRow, 'stretched') - common.propValueOnlyToClassName(GridRow, 'color') + common.propValueOnlyToClassName(GridRow, 'color', SUI.COLORS) common.implementsTextAlignProp(GridRow) common.implementsVerticalAlignProp(GridRow) diff --git a/test/specs/collections/Menu/Menu-test.js b/test/specs/collections/Menu/Menu-test.js index 626260a9fc..6046540e9f 100644 --- a/test/specs/collections/Menu/Menu-test.js +++ b/test/specs/collections/Menu/Menu-test.js @@ -1,9 +1,11 @@ +import _ from 'lodash' import React from 'react' import Menu from 'src/collections/Menu/Menu' import MenuItem from 'src/collections/Menu/MenuItem' import MenuHeader from 'src/collections/Menu/MenuHeader' import MenuMenu from 'src/collections/Menu/MenuMenu' +import { SUI } from 'src/lib' import * as common from 'test/specs/commonTests' import { sandbox } from 'test/utils' @@ -33,8 +35,8 @@ describe('Menu', () => { common.propKeyOrValueAndKeyToClassName(Menu, 'icon', ['labeled']) common.propKeyOrValueAndKeyToClassName(Menu, 'tabular', ['right']) - common.propValueOnlyToClassName(Menu, 'color') - common.propValueOnlyToClassName(Menu, 'size') + common.propValueOnlyToClassName(Menu, 'color', SUI.COLORS) + common.propValueOnlyToClassName(Menu, 'size', _.without(SUI.SIZES, 'medium', 'big')) it('renders a `div` by default', () => { shallow() diff --git a/test/specs/collections/Menu/MenuItem-test.js b/test/specs/collections/Menu/MenuItem-test.js index 236811c50d..fb5f95886e 100644 --- a/test/specs/collections/Menu/MenuItem-test.js +++ b/test/specs/collections/Menu/MenuItem-test.js @@ -2,6 +2,7 @@ import faker from 'faker' import React from 'react' import MenuItem from 'src/collections/Menu/MenuItem' +import { SUI } from 'src/lib' import * as common from 'test/specs/commonTests' import { sandbox } from 'test/utils' @@ -19,8 +20,8 @@ describe('MenuItem', () => { common.propKeyOrValueAndKeyToClassName(MenuItem, 'fitted', ['horizontally', 'vertically']) - common.propValueOnlyToClassName(MenuItem, 'color') - common.propValueOnlyToClassName(MenuItem, 'position') + common.propValueOnlyToClassName(MenuItem, 'color', SUI.COLORS) + common.propValueOnlyToClassName(MenuItem, 'position', ['right']) it('renders a `div` by default', () => { shallow() diff --git a/test/specs/collections/Menu/MenuMenu-test.js b/test/specs/collections/Menu/MenuMenu-test.js index 09a1097281..24360aaa3d 100644 --- a/test/specs/collections/Menu/MenuMenu-test.js +++ b/test/specs/collections/Menu/MenuMenu-test.js @@ -4,5 +4,6 @@ import * as common from 'test/specs/commonTests' describe('MenuMenu', () => { common.isConformant(MenuMenu) common.rendersChildren(MenuMenu) - common.propValueOnlyToClassName(MenuMenu, 'position') + + common.propValueOnlyToClassName(MenuMenu, 'position', ['right']) }) diff --git a/test/specs/collections/Message/Message-test.js b/test/specs/collections/Message/Message-test.js index 170dbe4358..11e6d9b4a8 100644 --- a/test/specs/collections/Message/Message-test.js +++ b/test/specs/collections/Message/Message-test.js @@ -1,10 +1,11 @@ +import _ from 'lodash' import React from 'react' import Message from 'src/collections/Message/Message' import MessageContent from 'src/collections/Message/MessageContent' import MessageHeader from 'src/collections/Message/MessageHeader' import MessageList from 'src/collections/Message/MessageList' - +import { SUI } from 'src/lib' import * as common from 'test/specs/commonTests' import { sandbox } from 'test/utils' @@ -45,8 +46,8 @@ describe('Message', () => { common.propKeyOrValueAndKeyToClassName(Message, 'attached', ['bottom']) - common.propValueOnlyToClassName(Message, 'size') - common.propValueOnlyToClassName(Message, 'color') + common.propValueOnlyToClassName(Message, 'color', SUI.COLORS) + common.propValueOnlyToClassName(Message, 'size', _.without(SUI.SIZES, 'medium')) describe('header', () => { it('adds MessageContent when defined', () => { diff --git a/test/specs/collections/Table/Table-test.js b/test/specs/collections/Table/Table-test.js index 1381142e9a..e400b9f2b6 100644 --- a/test/specs/collections/Table/Table-test.js +++ b/test/specs/collections/Table/Table-test.js @@ -1,6 +1,6 @@ +import _ from 'lodash' import React from 'react' -import * as common from 'test/specs/commonTests' import Table from 'src/collections/Table/Table' import TableBody from 'src/collections/Table/TableBody' import TableCell from 'src/collections/Table/TableCell' @@ -8,11 +8,13 @@ import TableFooter from 'src/collections/Table/TableFooter' import TableHeader from 'src/collections/Table/TableHeader' import TableHeaderCell from 'src/collections/Table/TableHeaderCell' import TableRow from 'src/collections/Table/TableRow' +import { SUI } from 'src/lib' +import * as common from 'test/specs/commonTests' describe('Table', () => { common.isConformant(Table) - common.hasUIClassName(Table) common.hasSubComponents(Table, [TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow]) + common.hasUIClassName(Table) common.rendersChildren(Table) common.implementsWidthProp(Table, { @@ -41,8 +43,10 @@ describe('Table', () => { common.propKeyOrValueAndKeyToClassName(Table, 'compact', ['very']) common.propKeyOrValueAndKeyToClassName(Table, 'padded', ['very']) - common.propValueOnlyToClassName(Table, 'color') - common.propValueOnlyToClassName(Table, 'size') + common.propValueOnlyToClassName(Table, 'color', SUI.COLORS) + common.propValueOnlyToClassName(Table, 'size', + _.without(SUI.SIZES, 'mini', 'tiny', 'medium', 'big', 'huge', 'massive') + ) it('renders as a table by default', () => { shallow() diff --git a/test/specs/collections/Table/TableCell-test.js b/test/specs/collections/Table/TableCell-test.js index 47cc5d3f24..d70e98263b 100644 --- a/test/specs/collections/Table/TableCell-test.js +++ b/test/specs/collections/Table/TableCell-test.js @@ -8,7 +8,7 @@ describe('TableCell', () => { common.rendersChildren(TableCell) common.implementsCreateMethod(TableCell) - common.implementsTextAlignProp(TableCell) + common.implementsTextAlignProp(TableCell, ['left', 'center', 'right']) common.implementsVerticalAlignProp(TableCell) common.implementsWidthProp(TableCell, { propKey: 'width', widthClass: 'wide', canEqual: false }) diff --git a/test/specs/collections/Table/TableRow-test.js b/test/specs/collections/Table/TableRow-test.js index a605e6068a..8054544919 100644 --- a/test/specs/collections/Table/TableRow-test.js +++ b/test/specs/collections/Table/TableRow-test.js @@ -8,7 +8,7 @@ describe('TableRow', () => { common.rendersChildren(TableRow) common.implementsCreateMethod(TableRow) - common.implementsTextAlignProp(TableRow) + common.implementsTextAlignProp(TableRow, ['left', 'center', 'right']) common.implementsVerticalAlignProp(TableRow) common.propKeyOnlyToClassName(TableRow, 'active') diff --git a/test/specs/commonTests.js b/test/specs/commonTests.js index f0ec1f8cbf..817e7bd1d1 100644 --- a/test/specs/commonTests.js +++ b/test/specs/commonTests.js @@ -873,7 +873,7 @@ export const implementsTextAlignProp = (Component, alignments = SUI.TEXT_ALIGNME _noDefaultClassNameFromProp(Component, 'textAlign', options) _noClassNameFromBoolProps(Component, 'textAlign', options) - _.each(alignments, propVal => { + alignments.forEach(propVal => { if (propVal === 'justified') { it('adds "justified" without "aligned" to className', () => { shallow() @@ -909,7 +909,7 @@ export const implementsVerticalAlignProp = (Component, alignments = SUI.VERTICAL _noDefaultClassNameFromProp(Component, 'verticalAlign', options) _noClassNameFromBoolProps(Component, 'verticalAlign', options) - _.each(alignments, propVal => { + alignments.forEach(propVal => { it(`adds "${propVal} aligned" to className`, () => { shallow() .should.have.className(`${propVal} ${'aligned'}`) @@ -956,11 +956,12 @@ export const propKeyOnlyToClassName = (Component, propKey, options = {}) => { * Assert that only a Component prop's value is converted to className. * @param {React.Component|Function} Component The component to test. * @param {String} propKey A props key. + * @param {array} propValues Array of possible props values. * @param {Object} [options={}] * @param {Object} [options.requiredProps={}] Props required to render the component. * @param {Object} [options.className=propKey] The className to assert exists. */ -export const propValueOnlyToClassName = (Component, propKey, options = {}) => { +export const propValueOnlyToClassName = (Component, propKey, propValues, options = {}) => { const { requiredProps = {} } = options const { assertRequired } = commonTestHelpers('propValueOnlyToClassName', Component) @@ -972,7 +973,7 @@ export const propValueOnlyToClassName = (Component, propKey, options = {}) => { _noClassNameFromBoolProps(Component, propKey, options) it('adds prop value to className', () => { - _.each(_.get(Component, `_meta.props[${propKey}]`), propValue => { + propValues.forEach(propValue => { shallow(createElement(Component, { ...requiredProps, [propKey]: propValue })) .should.have.className(propValue) }) @@ -982,7 +983,7 @@ export const propValueOnlyToClassName = (Component, propKey, options = {}) => { // silence propType warnings consoleUtil.disableOnce() - _.each(_.get(Component, `_meta.props[${propKey}]`), propValue => { + propValues.forEach(propValue => { shallow(createElement(Component, { ...requiredProps, [propKey]: propValue })) .should.not.have.className(propKey) }) diff --git a/test/specs/elements/Button/Button-test.js b/test/specs/elements/Button/Button-test.js index ae7d08cf4e..ba10e1908c 100644 --- a/test/specs/elements/Button/Button-test.js +++ b/test/specs/elements/Button/Button-test.js @@ -4,6 +4,7 @@ import Button from 'src/elements/Button/Button' import ButtonContent from 'src/elements/Button/ButtonContent' import ButtonGroup from 'src/elements/Button/ButtonGroup' import ButtonOr from 'src/elements/Button/ButtonOr' +import { SUI } from 'src/lib' import * as common from 'test/specs/commonTests' import { sandbox } from 'test/utils' @@ -45,8 +46,17 @@ describe('Button', () => { className: 'labeled', }) - common.propValueOnlyToClassName(Button, 'color') - common.propValueOnlyToClassName(Button, 'size') + common.propValueOnlyToClassName(Button, 'color', [ + ...SUI.COLORS, + 'facebook', + 'twitter', + 'google plus', + 'vk', + 'linkedin', + 'instagram', + 'youtube', + ]) + common.propValueOnlyToClassName(Button, 'size', SUI.SIZES) it('renders a button by default', () => { shallow(