{icon}
diff --git a/lib/components/Alert/__snapshots__/Alert.test.tsx.snap b/lib/components/Alert/__snapshots__/Alert.test.tsx.snap
index 168ad742d14..24d4a298d2b 100644
--- a/lib/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/lib/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -10,16 +10,20 @@ exports[`Alert Theme: jobStreet Tones critical 1`] = `
{
static displayName = 'Bullet';
render() {
- const { className } = this.props;
+ const { children } = this.props;
return (
-
+
+
+ {children}
+
+
);
}
}
diff --git a/lib/components/Bullet/__snapshots__/Bullet.test.tsx.snap b/lib/components/Bullet/__snapshots__/Bullet.test.tsx.snap
index e2d988043ff..9b7839895c6 100644
--- a/lib/components/Bullet/__snapshots__/Bullet.test.tsx.snap
+++ b/lib/components/Bullet/__snapshots__/Bullet.test.tsx.snap
@@ -2,32 +2,48 @@
exports[`Bullet Theme: jobStreet Default 1`] = `
- Bullet
+
+ Bullet
+
`;
exports[`Bullet Theme: seekAnz Default 1`] = `
- Bullet
+
+ Bullet
+
`;
exports[`Bullet Theme: seekAsia Default 1`] = `
- Bullet
+
+ Bullet
+
`;
exports[`Bullet Theme: wireframe Default 1`] = `
- Bullet
+
+ Bullet
+
`;
diff --git a/lib/components/BulletList/BulletList.tsx b/lib/components/BulletList/BulletList.tsx
index 316d40e2cb2..fe73c6945e0 100644
--- a/lib/components/BulletList/BulletList.tsx
+++ b/lib/components/BulletList/BulletList.tsx
@@ -1,12 +1,16 @@
-import React, { Component } from 'react';
-import Box, { BoxProps } from '../Box/Box';
+import React, { Component, ReactNode } from 'react';
+import Box from '../Box/Box';
-export type BulletListProps = BoxProps;
+export interface BulletListProps {
+ children?: ReactNode;
+}
export default class BulletList extends Component
{
static displayName = 'BulletList';
render() {
- return ;
+ const { children } = this.props;
+
+ return {children};
}
}
diff --git a/lib/components/Card/Card.docs.tsx b/lib/components/Card/Card.docs.tsx
index 3e297e2252e..a3f52761611 100644
--- a/lib/components/Card/Card.docs.tsx
+++ b/lib/components/Card/Card.docs.tsx
@@ -10,28 +10,30 @@ const docs: ComponentDocs = {
label: 'Standard Card',
render: () => (
-
- This text is inside a card.
+
+
+ This text is inside a card.
+
-
- This text is inside a card.
+
+
+ This text is inside a card.
+
)
diff --git a/lib/components/Card/Card.tsx b/lib/components/Card/Card.tsx
index 67715d2b3f7..0f5528711f0 100644
--- a/lib/components/Card/Card.tsx
+++ b/lib/components/Card/Card.tsx
@@ -1,12 +1,20 @@
-import React, { Component } from 'react';
-import Box, { BoxProps } from '../Box/Box';
+import React, { Component, ReactNode } from 'react';
+import Box from '../Box/Box';
-export type CardProps = BoxProps;
+export interface CardProps {
+ children?: ReactNode;
+}
export default class Card extends Component {
static displayName = 'Card';
render() {
- return ;
+ const { children } = this.props;
+
+ return (
+
+ {children}
+
+ );
}
}
diff --git a/lib/components/Card/__snapshots__/Card.test.tsx.snap b/lib/components/Card/__snapshots__/Card.test.tsx.snap
index 7b8fe529365..7031be0ad96 100644
--- a/lib/components/Card/__snapshots__/Card.test.tsx.snap
+++ b/lib/components/Card/__snapshots__/Card.test.tsx.snap
@@ -2,32 +2,48 @@
exports[`Card Theme: jobStreet Default 1`] = `
- Children
+
+ Children
+
- Children
+
+ Children
+
- Children
+
+ Children
+
- Children
+
+ Children
+
{
)
}}
htmlFor={id}
- {...labelProps}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
>
{
theme.atoms.transition.fast
)}
/>
- {!inChecklistCard ? (
-
- ) : null}
-
+
+
+
{
{children ? (
-
- {children}
-
+ {children}
) : null}
{message !== false ? (
-
-
-
+
) : null}
-
+
);
}}
diff --git a/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index 8e5e48ab9ea..5efcca48293 100644
--- a/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/lib/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -1,9 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Checkbox Theme: jobStreet Checked 1`] = `
-
-
- Children
-
+ Children
-
- Children
-
+ Children
-
- Children
-
+ Children
Message
@@ -446,9 +448,7 @@ exports[`Checkbox Theme: jobStreet With message 1`] = `
`;
exports[`Checkbox Theme: seekAnz Checked 1`] = `
-
-
- Children
-
+ Children
-
- Children
-
+ Children
-
- Children
-
+ Children
Message
@@ -891,9 +895,7 @@ exports[`Checkbox Theme: seekAnz With message 1`] = `
`;
exports[`Checkbox Theme: seekAsia Checked 1`] = `
-
-
- Children
-
+ Children
-
- Children
-
+ Children
-
- Children
-
+ Children
Message
@@ -1336,9 +1342,7 @@ exports[`Checkbox Theme: seekAsia With message 1`] = `
`;
exports[`Checkbox Theme: wireframe Checked 1`] = `
-
-
- Children
-
+ Children
-
- Children
-
+ Children
-
- Children
-
+ Children
Message
diff --git a/lib/components/ChecklistCard/ChecklistCard.docs.tsx b/lib/components/ChecklistCard/ChecklistCard.docs.tsx
deleted file mode 100644
index b6c9cc58c4b..00000000000
--- a/lib/components/ChecklistCard/ChecklistCard.docs.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from 'react';
-import ChecklistCard from './ChecklistCard';
-import Checkbox from '../Checkbox/Checkbox';
-import Text from '../Text/Text';
-import { ComponentDocs } from '../../../docs/src/types';
-
-const handleChange = () => undefined;
-
-const docs: ComponentDocs = {
- examples: [
- {
- label: 'Standard Checklist Card',
- render: ({ id }) => (
-
-
-
-
-
- )
- },
- {
- label: 'Nested Checklist Card',
- render: ({ id }) => (
-
-
- This text is visible when the checkbox is checked.
-
-
- This text is visible when the checkbox is checked.
-
-
- This text is visible when the checkbox is checked.
-
-
- )
- },
- {
- label: 'Nested Checklist Card With Critical Messages',
- render: ({ id }) => (
-
-
- This text is visible when the checkbox is checked.
-
-
- This text is visible when the checkbox is checked.
-
-
- This text is visible when the checkbox is checked.
-
-
- This text is visible when the checkbox is checked.
-
-
- )
- }
- ]
-};
-
-export default docs;
diff --git a/lib/components/ChecklistCard/ChecklistCard.test.tsx b/lib/components/ChecklistCard/ChecklistCard.test.tsx
deleted file mode 100644
index f11dd5b2c5c..00000000000
--- a/lib/components/ChecklistCard/ChecklistCard.test.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { ChecklistCard, Checkbox } from '..';
-import { render } from 'react-testing-library';
-import forEachTheme from '../../test/utils/forEachTheme';
-
-const noop = () => undefined;
-
-describe('ChecklistCard', () => {
- forEachTheme(({ ThemeProvider }) => {
- test('Default', () => {
- const { container } = render(
-
-
-
-
-
-
-
- );
- expect(container.firstChild).toMatchSnapshot();
- });
- });
-});
diff --git a/lib/components/ChecklistCard/ChecklistCard.tsx b/lib/components/ChecklistCard/ChecklistCard.tsx
deleted file mode 100644
index b01e6d3bcdf..00000000000
--- a/lib/components/ChecklistCard/ChecklistCard.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { Component, Fragment, ReactElement } from 'react';
-import Card, { CardProps } from '../Card/Card';
-import Divider from '../Divider/Divider';
-import { CheckboxProps } from '../Checkbox/Checkbox';
-import { RadioProps } from '../Radio/Radio';
-
-export interface ChecklistCardProps extends CardProps {
- children:
- | Array
>
- | Array>
- | ReactElement
- | ReactElement;
-}
-
-export default class ChecklistCard extends Component {
- static displayName = 'ChecklistCard';
-
- render() {
- const { children, ...restProps } = this.props;
- return (
-
- {React.Children.map(children, (child, i) => {
- if (typeof child !== 'object') {
- return null;
- }
-
- const checkboxChild = child as ReactElement;
-
- return (
-
- {i > 0 && checkboxChild.props.tone !== 'critical' ? (
-
- ) : null}
- {React.cloneElement(child, {
- variant: 'inChecklistCard'
- })}
-
- );
- })}
-
- );
- }
-}
diff --git a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap b/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
deleted file mode 100644
index 07775e38b85..00000000000
--- a/lib/components/ChecklistCard/__snapshots__/ChecklistCard.test.tsx.snap
+++ /dev/null
@@ -1,961 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ChecklistCard Theme: jobStreet Default 1`] = `
-
-`;
-
-exports[`ChecklistCard Theme: seekAnz Default 1`] = `
-
-`;
-
-exports[`ChecklistCard Theme: seekAsia Default 1`] = `
-
-`;
-
-exports[`ChecklistCard Theme: wireframe Default 1`] = `
-
-`;
diff --git a/lib/components/Divider/Divider.tsx b/lib/components/Divider/Divider.tsx
index 01dac145875..ed2547472e1 100644
--- a/lib/components/Divider/Divider.tsx
+++ b/lib/components/Divider/Divider.tsx
@@ -1,35 +1,19 @@
import React, { Component } from 'react';
-import classnames from 'classnames';
import styles from './Divider.css.js';
-import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
-import Box, { BoxProps } from '../Box/Box';
-import { BorderColorVariants, BorderWidthVariants } from '../../themes/theme';
+import Box from '../Box/Box';
-export interface DividerProps extends BoxProps {
- borderColor?: BorderColorVariants;
- borderWidth?: BorderWidthVariants;
-}
-
-export default class Divider extends Component {
+export default class Divider extends Component<{}> {
static displayName = 'Divider';
render() {
- const { borderColor, borderWidth, className, ...restProps } = this.props;
-
return (
-
- {theme => (
-
-
-
- )}
-
+
+
+
);
}
}
diff --git a/lib/components/Divider/__snapshots__/Divider.test.tsx.snap b/lib/components/Divider/__snapshots__/Divider.test.tsx.snap
index 2e4260c1d0b..a6abd243345 100644
--- a/lib/components/Divider/__snapshots__/Divider.test.tsx.snap
+++ b/lib/components/Divider/__snapshots__/Divider.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Divider Theme: jobStreet Default 1`] = `
class="Divider__root Box__root borderColor__standard"
>
`;
@@ -15,7 +15,7 @@ exports[`Divider Theme: seekAnz Default 1`] = `
class="Divider__root Box__root borderColor__standard"
>
`;
@@ -25,7 +25,7 @@ exports[`Divider Theme: seekAsia Default 1`] = `
class="Divider__root Box__root borderColor__standard"
>
`;
@@ -35,7 +35,7 @@ exports[`Divider Theme: wireframe Default 1`] = `
class="Divider__root Box__root borderColor__standard"
>
`;
diff --git a/lib/components/FieldLabel/FieldLabel.tsx b/lib/components/FieldLabel/FieldLabel.tsx
index 9954fc46a0b..99ad997afec 100644
--- a/lib/components/FieldLabel/FieldLabel.tsx
+++ b/lib/components/FieldLabel/FieldLabel.tsx
@@ -1,12 +1,20 @@
-import React, { Component } from 'react';
-import Text, { TextProps } from '../Text/Text';
+import React, { Component, ReactNode } from 'react';
+import Text from '../Text/Text';
-export type FieldLabelProps = TextProps;
+export interface FieldLabelProps {
+ children?: ReactNode;
+}
export default class FieldLabel extends Component
{
static displayName = 'FieldLabel';
render() {
- return ;
+ const { children } = this.props;
+
+ return (
+
+ {children}
+
+ );
}
}
diff --git a/lib/components/FieldMessage/FieldMessage.tsx b/lib/components/FieldMessage/FieldMessage.tsx
index 51843ba8cb2..a8370ec3e4b 100644
--- a/lib/components/FieldMessage/FieldMessage.tsx
+++ b/lib/components/FieldMessage/FieldMessage.tsx
@@ -1,33 +1,31 @@
import React, { Component, ReactNode } from 'react';
-import classnames from 'classnames';
import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
-import { Theme } from '../../themes/theme';
+import Box from '../Box/Box';
import Text, { TextProps } from '../Text/Text';
import ErrorIcon from '../icons/ErrorIcon/ErrorIcon';
import TickCircleIcon from '../icons/TickCircleIcon/TickCircleIcon';
import styles from './FieldMessage.css.js';
export interface FieldMessageProps extends TextProps {
+ id?: string;
tone?: 'neutral' | 'critical' | 'positive';
message: ReactNode | false;
}
-const renderIcon = (theme: Theme, tone: FieldMessageProps['tone']) => {
+const renderIcon = (tone: FieldMessageProps['tone']) => {
if (tone === 'critical') {
return (
-
+
+
+
);
}
if (tone === 'positive') {
return (
-
+
+
+
);
}
@@ -38,19 +36,21 @@ export default class FieldMessage extends Component {
static displayName = 'FieldMessage';
render() {
- const { tone = 'neutral', message, ...restProps } = this.props;
+ const { id, tone = 'neutral', message } = this.props;
return message === false ? null : (
{theme => (
-
-
- {/* This element acts as a min-height, preserving vertical space for the message: */}
-
- {renderIcon(theme, tone)}
-
{message}
-
+ {/* This element acts as a min-height, preserving vertical space for the message: */}
+
+ {renderIcon(tone)}
+
{message}
+
-
-
- Message
+
+
+ Message
+
@@ -30,17 +38,21 @@ exports[`FieldMessage Theme: jobStreet Critical 1`] = `
exports[`FieldMessage Theme: jobStreet Default 1`] = `
-
- Message
+ class="FieldMessage__content"
+ >
+
+
+ Message
+
@@ -48,16 +60,20 @@ exports[`FieldMessage Theme: jobStreet Default 1`] = `
exports[`FieldMessage Theme: jobStreet Empty 1`] = `
-
+ class="FieldMessage__content"
+ >
+
+
+
`;
@@ -66,27 +82,35 @@ exports[`FieldMessage Theme: jobStreet False 1`] = `null`;
exports[`FieldMessage Theme: jobStreet Positive 1`] = `
-
-
- Message
+
+
+ Message
+
@@ -94,27 +118,35 @@ exports[`FieldMessage Theme: jobStreet Positive 1`] = `
exports[`FieldMessage Theme: seekAnz Critical 1`] = `
-
-
- Message
+
+
+ Message
+
@@ -122,17 +154,21 @@ exports[`FieldMessage Theme: seekAnz Critical 1`] = `
exports[`FieldMessage Theme: seekAnz Default 1`] = `
-
- Message
+ class="FieldMessage__content"
+ >
+
+
+ Message
+
@@ -140,16 +176,20 @@ exports[`FieldMessage Theme: seekAnz Default 1`] = `
exports[`FieldMessage Theme: seekAnz Empty 1`] = `
-
+ class="FieldMessage__content"
+ >
+
+
+
`;
@@ -158,27 +198,35 @@ exports[`FieldMessage Theme: seekAnz False 1`] = `null`;
exports[`FieldMessage Theme: seekAnz Positive 1`] = `
-
-
- Message
+
+
+ Message
+
@@ -186,27 +234,35 @@ exports[`FieldMessage Theme: seekAnz Positive 1`] = `
exports[`FieldMessage Theme: seekAsia Critical 1`] = `
-
-
- Message
+
+
+ Message
+
@@ -214,17 +270,21 @@ exports[`FieldMessage Theme: seekAsia Critical 1`] = `
exports[`FieldMessage Theme: seekAsia Default 1`] = `
-
- Message
+ class="FieldMessage__content"
+ >
+
+
+ Message
+
@@ -232,16 +292,20 @@ exports[`FieldMessage Theme: seekAsia Default 1`] = `
exports[`FieldMessage Theme: seekAsia Empty 1`] = `
-
+ class="FieldMessage__content"
+ >
+
+
+
`;
@@ -250,27 +314,35 @@ exports[`FieldMessage Theme: seekAsia False 1`] = `null`;
exports[`FieldMessage Theme: seekAsia Positive 1`] = `
-
-
- Message
+
+
+ Message
+
@@ -278,27 +350,35 @@ exports[`FieldMessage Theme: seekAsia Positive 1`] = `
exports[`FieldMessage Theme: wireframe Critical 1`] = `
-
-
- Message
+
+
+ Message
+
@@ -306,17 +386,21 @@ exports[`FieldMessage Theme: wireframe Critical 1`] = `
exports[`FieldMessage Theme: wireframe Default 1`] = `
-
- Message
+ class="FieldMessage__content"
+ >
+
+
+ Message
+
@@ -324,16 +408,20 @@ exports[`FieldMessage Theme: wireframe Default 1`] = `
exports[`FieldMessage Theme: wireframe Empty 1`] = `
-
+ class="FieldMessage__content"
+ >
+
+
+
`;
@@ -342,27 +430,35 @@ exports[`FieldMessage Theme: wireframe False 1`] = `null`;
exports[`FieldMessage Theme: wireframe Positive 1`] = `
-
-
- Message
+
+
+ Message
+
diff --git a/lib/components/Radio/Radio.docs.tsx b/lib/components/Radio/Radio.docs.tsx
index 5cabbb35390..e24f95d9c91 100644
--- a/lib/components/Radio/Radio.docs.tsx
+++ b/lib/components/Radio/Radio.docs.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import Radio from './Radio';
+import Text from '../Text/Text';
import { ComponentDocs } from '../../../docs/src/types';
const handleChange = () => undefined;
@@ -74,6 +75,20 @@ const docs: ComponentDocs = {
tone="positive"
/>
)
+ },
+ {
+ label: 'Nested Radio Button',
+ render: ({ id }) => (
+
+ This text is visible when the radio button is checked.
+
+ )
}
]
};
diff --git a/lib/components/Radio/Radio.tsx b/lib/components/Radio/Radio.tsx
index 6cf6b56b820..16def89da89 100644
--- a/lib/components/Radio/Radio.tsx
+++ b/lib/components/Radio/Radio.tsx
@@ -1,6 +1,5 @@
import React, { Component, ReactNode, AllHTMLAttributes } from 'react';
import classnames from 'classnames';
-import { Omit } from 'utility-types';
import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
import getCheckboxRadioSize from '../private/getCheckboxRadioSize';
import Box from '../Box/Box';
@@ -21,19 +20,15 @@ const textColorForState = (disabled: boolean, hovered: boolean) => {
return 'neutral';
};
+type InputProps = AllHTMLAttributes
;
+type RequiredInputProps = 'id' | 'checked' | 'onChange';
+type OptionalInputProps = 'disabled' | 'children';
export interface RadioProps
- extends Omit, 'label'> {
- variant?: 'default' | 'inChecklistCard';
- id: string;
- checked: boolean;
+ extends Required>,
+ Pick {
label: ReactNode;
- disabled?: boolean;
- inputProps?: object;
- labelProps?: object;
tone?: 'neutral' | 'critical' | 'positive';
message?: ReactNode | false;
- messageProps?: object;
- children?: ReactNode;
}
interface State {
@@ -67,62 +62,35 @@ export default class Radio extends Component {
{theme => {
const {
- variant = 'default',
id,
label,
checked,
+ onChange,
disabled = false,
- className,
- style,
- inputProps,
- labelProps,
tone = 'neutral',
message,
- messageProps,
- children,
- ...restProps
+ children
} = this.props;
const { hovered } = this.state;
- const inChecklistCard = variant === 'inChecklistCard';
const fieldMessageId = `${id}-message`;
const radioSize = getCheckboxRadioSize(theme);
return (
-
+
{
)
}}
htmlFor={id}
- {...labelProps}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
>
@@ -179,18 +146,16 @@ export default class Radio extends Component {
theme.atoms.transition.fast
)}
/>
- {!inChecklistCard ? (
-
- ) : null}
+
{
{children ? (
-
- {children}
-
+ {children}
) : null}
{message !== false ? (
-
-
-
+
) : null}
-
+
);
}}
diff --git a/lib/components/Radio/__snapshots__/Radio.test.tsx.snap b/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
index 0c5a83c3000..f599b2eb9f0 100644
--- a/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
+++ b/lib/components/Radio/__snapshots__/Radio.test.tsx.snap
@@ -1,9 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Radio Theme: jobStreet Checked 1`] = `
-
+
+
-
- Children
-
+ Children
+
-
- Children
-
+ Children
+
+
-
- Children
-
+ Children
Message
@@ -401,9 +383,7 @@ exports[`Radio Theme: jobStreet With message 1`] = `
`;
exports[`Radio Theme: seekAnz Checked 1`] = `
-
+
+
-
- Children
-
+ Children
+
-
- Children
-
+ Children
+
+
-
- Children
-
+ Children
Message
@@ -801,9 +765,7 @@ exports[`Radio Theme: seekAnz With message 1`] = `
`;
exports[`Radio Theme: seekAsia Checked 1`] = `
-
+
+
-
- Children
-
+ Children
+
-
- Children
-
+ Children
+
+
-
- Children
-
+ Children
Message
@@ -1201,9 +1147,7 @@ exports[`Radio Theme: seekAsia With message 1`] = `
`;
exports[`Radio Theme: wireframe Checked 1`] = `
-
+
+
-
- Children
-
+ Children
+
-
- Children
-
+ Children
+
+
-
- Children
-
+ Children
Message
diff --git a/lib/components/Strong/Strong.tsx b/lib/components/Strong/Strong.tsx
index a046df48ee5..882edffe372 100644
--- a/lib/components/Strong/Strong.tsx
+++ b/lib/components/Strong/Strong.tsx
@@ -1,23 +1,23 @@
-import React, { Component, AllHTMLAttributes } from 'react';
-import classnames from 'classnames';
+import React, { Component, ReactNode } from 'react';
import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
-export type StrongProps = AllHTMLAttributes
;
+export interface StrongProps {
+ children: ReactNode;
+}
export default class Strong extends Component {
static displayName = 'Strong';
render() {
+ const { children } = this.props;
+
return (
{theme => {
- const { className, ...restProps } = this.props;
-
return (
-
+
+ {children}
+
);
}}
diff --git a/lib/components/Text/Text.css.js b/lib/components/Text/Text.css.js
index 6cee325927e..00ca02daa6d 100644
--- a/lib/components/Text/Text.css.js
+++ b/lib/components/Text/Text.css.js
@@ -4,6 +4,7 @@ export default {
},
'.listItem': {
display: 'list-item',
- listStyle: 'disc'
+ listStyle: 'disc',
+ marginLeft: '1.3em'
}
};
diff --git a/lib/components/Text/Text.tsx b/lib/components/Text/Text.tsx
index 90227504338..504c5f8321c 100644
--- a/lib/components/Text/Text.tsx
+++ b/lib/components/Text/Text.tsx
@@ -1,5 +1,4 @@
-import React, { Component } from 'react';
-import { Omit } from 'utility-types';
+import React, { Component, ReactNode } from 'react';
import classnames from 'classnames';
import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
import styles from './Text.css.js';
@@ -11,7 +10,8 @@ import {
TransformVariants
} from '../../themes/theme';
-export interface TextProps extends Omit {
+export interface TextProps extends Pick {
+ children?: ReactNode;
size?: FontSizeVariants;
color?: ColorVariants;
weight?: FontWeightVariants;
@@ -37,8 +37,7 @@ export default class Text extends Component {
color,
weight,
baseline = true,
- className,
- ...restProps
+ children
} = this.props;
const transformSize = `${size}Text`;
@@ -51,7 +50,6 @@ export default class Text extends Component {
{
typeof component === 'string' && /^li$/i.test(component)
}
)}
- {...restProps}
- />
+ >
+ {children}
+
);
}}
diff --git a/lib/components/icons/ChevronIcon/ChevronIcon.css.js b/lib/components/icons/ChevronIcon/ChevronIcon.css.js
index 3bc800db328..6df3a1f809a 100644
--- a/lib/components/icons/ChevronIcon/ChevronIcon.css.js
+++ b/lib/components/icons/ChevronIcon/ChevronIcon.css.js
@@ -3,6 +3,9 @@ export default {
transition: 'transform 0.3s ease',
transformOrigin: '50% 50%'
},
+ '.inline': {
+ display: 'inline-block'
+ },
'.left': {
transform: 'rotate(90deg)'
},
diff --git a/lib/components/icons/ChevronIcon/ChevronIcon.css.js.d.ts b/lib/components/icons/ChevronIcon/ChevronIcon.css.js.d.ts
index 6354db7a5ac..7aee2740f17 100644
--- a/lib/components/icons/ChevronIcon/ChevronIcon.css.js.d.ts
+++ b/lib/components/icons/ChevronIcon/ChevronIcon.css.js.d.ts
@@ -1,5 +1,6 @@
// This file is automatically generated.
// Please do not change this file!
+export const inline: string;
export const left: string;
export const right: string;
export const root: string;
diff --git a/lib/components/icons/ChevronIcon/ChevronIcon.tsx b/lib/components/icons/ChevronIcon/ChevronIcon.tsx
index ac918071a6d..cb13844725c 100644
--- a/lib/components/icons/ChevronIcon/ChevronIcon.tsx
+++ b/lib/components/icons/ChevronIcon/ChevronIcon.tsx
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import classnames from 'classnames';
import { Omit } from 'utility-types';
+import Box from '../../Box/Box';
import Icon, { IconProps } from '../Icon/Icon';
import ChevronSvg from './ChevronSvg';
import styles from './ChevronIcon.css.js';
@@ -13,18 +14,19 @@ export default class ChevronIcon extends Component {
static displayName = 'ChevronIcon';
render() {
- const { className, direction = 'down', ...restProps } = this.props;
+ const { direction = 'down', inline, ...restProps } = this.props;
return (
-
+ >
+
+
);
}
}
diff --git a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
index 8ad09c4d089..b129d91366d 100644
--- a/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
+++ b/lib/components/icons/ChevronIcon/__snapshots__/ChevronIcon.test.tsx.snap
@@ -1,365 +1,477 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChevronIcon Theme: jobStreet Default 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: jobStreet Down 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: jobStreet Inline 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: jobStreet Left 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: jobStreet Right 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: jobStreet Sized 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: jobStreet Up 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAnz Default 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAnz Down 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAnz Inline 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAnz Left 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAnz Right 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAnz Sized 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAnz Up 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAsia Default 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAsia Down 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAsia Inline 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAsia Left 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAsia Right 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAsia Sized 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: seekAsia Up 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: wireframe Default 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: wireframe Down 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: wireframe Inline 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: wireframe Left 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: wireframe Right 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: wireframe Sized 1`] = `
-
+
+
`;
exports[`ChevronIcon Theme: wireframe Up 1`] = `
-
+
+
`;
diff --git a/lib/components/icons/ErrorIcon/__snapshots__/ErrorIcon.test.tsx.snap b/lib/components/icons/ErrorIcon/__snapshots__/ErrorIcon.test.tsx.snap
index b1858d4b760..b891e2a88ca 100644
--- a/lib/components/icons/ErrorIcon/__snapshots__/ErrorIcon.test.tsx.snap
+++ b/lib/components/icons/ErrorIcon/__snapshots__/ErrorIcon.test.tsx.snap
@@ -2,7 +2,7 @@
exports[`ErrorIcon Theme: jobStreet Default 1`] = `