` element */
44 | subtitleProps: PropTypes.object,
45 | /** Additional props to be spread to the title `
` element */
46 | titleProps: PropTypes.object
47 | };
48 |
49 | export default withStyles(TileHeader);
50 |
--------------------------------------------------------------------------------
/src/Time/__stories__/Time.stories.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-multi-comp */
2 | import { action } from '@storybook/addon-actions';
3 | import React from 'react';
4 | import Time from '../Time';
5 |
6 | export default {
7 | title: 'Component API/Time',
8 | component: Time
9 | };
10 | export const primary = () => (
11 |
12 | );
13 |
14 | export const meridiemTime = () =>
;
15 | export const disabledTime = () =>
;
16 | export const customTime = () =>
;
17 | export const twelveHour = () =>
;
18 | export const hideSeconds = () =>
;
19 | export const hideMinutes = () =>
;
20 | export const hideHours = () =>
;
21 |
22 | export const timeMeridiemSet = () => (
23 |
27 | );
28 |
29 | export const time12Set = () => (
30 |
33 | );
34 |
35 | export const dev = () => (
36 |
40 | );
41 |
42 | export const noStyles = () => (
43 |
44 | );
45 | noStyles.parameters = { docs: { disable: true } };
46 |
--------------------------------------------------------------------------------
/src/TimePicker/TimePickerItem.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from 'enzyme';
2 | import React from 'react';
3 | import TimePicker from './TimePicker';
4 |
5 | describe('TimePicker Item', () => {
6 | test('should allow props to be spread to the TimePicker component\'s TimePickerItem component\'s input element', () => {
7 | const element = mount(
);
8 |
9 | expect(
10 | element.find('.fd-input').getDOMNode().attributes['data-sample'].value
11 | ).toBe('Sample');
12 | });
13 |
14 | test('should allow props to be spread to the TimePicker component\'s TimePickerItem component\'s button element', () => {
15 | const element = mount(
);
16 |
17 | expect(
18 | element.find('button').getDOMNode().attributes['data-sample'].value
19 | ).toBe('Sample');
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/src/Token/Token.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from 'enzyme';
2 | import React from 'react';
3 | import Token from './Token';
4 |
5 | describe('
', () => {
6 | describe('Prop spreading', () => {
7 | test('should allow props to be spread to the Token component', () => {
8 | const element = mount(
);
9 |
10 | expect(
11 | element.getDOMNode().attributes['data-sample'].value
12 | ).toBe('Sample');
13 | });
14 | });
15 |
16 | test('forwards the ref', () => {
17 | let ref;
18 | class Test extends React.Component {
19 | constructor(props) {
20 | super(props);
21 | ref = React.createRef();
22 | }
23 | render = () =>
;
24 | }
25 | mount(
);
26 | expect(ref.current.tagName).toEqual('SPAN');
27 | expect(ref.current.className).toEqual('fd-token');
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/src/Token/__stories__/Token.stories.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-multi-comp */
2 | import { action } from '@storybook/addon-actions';
3 | import { boolean } from '@storybook/addon-knobs';
4 | import React from 'react';
5 | import Token from '../Token';
6 |
7 | export default {
8 | title: 'Component API/Token',
9 | component: Token
10 | };
11 |
12 | export const primary = () => (
13 |
Default
14 | );
15 |
16 | export const compact = () => (
17 |
Compact
18 | );
19 | export const readOnly = () => (
20 |
Read Only
21 | );
22 |
23 | export const dev = () => (
24 |
Dev
29 | );
30 | dev.parameters = { docs: { disable: true } };
31 |
32 | export const noStyles = () => (
33 |
Default
34 | );
35 | noStyles.parameters = { docs: { disable: true } };
36 |
--------------------------------------------------------------------------------
/src/Wizard/Wizard.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from 'enzyme';
2 | import React from 'react';
3 | import Wizard from './Wizard';
4 |
5 | describe('
', () => {
6 | it('should be created', () => {
7 | const component = mount(
8 |
9 |
10 | content
11 |
12 |
13 | );
14 |
15 | expect(component.find('.fd-wizard .fd-wizard__content .data').text()).toBe('content');
16 | });
17 |
18 | describe('Prop spreading', () => {
19 | it('should allow props to be spread to the component', () => {
20 | const component = mount(
21 |
22 |
23 | content
24 |
25 |
26 | );
27 |
28 | expect(
29 | component.getDOMNode()
30 | .attributes['data-sample']
31 | .value
32 | ).toBe('Sample');
33 | });
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/src/Wizard/WizardContainer.js:
--------------------------------------------------------------------------------
1 | import classnamesBind from 'classnames/bind';
2 | import PropTypes from 'prop-types';
3 | import React from 'react';
4 | import withStyles from '../utils/withStyles';
5 |
6 | import styles from 'fundamental-styles/dist/wizard.css';
7 |
8 | const classnames = classnamesBind.bind(styles);
9 |
10 | /** WizardContainer is a minimal wrapper for the whole wizard component. Should
11 | * be used as a container for `Wizard.Navigation`, `Wizard.Content` and
12 | * `Wizard.Footer` components when building the wizard manually, without the
13 | * build-in logic (but it allows any content).
14 | *
15 | * @returns {Node} WizardContainer component
16 | */
17 | function WizardContainer({
18 | children,
19 | className,
20 | cssNamespace,
21 | ...props
22 | }) {
23 | const wizardClasses = classnames(
24 | `${cssNamespace}-wizard`,
25 | className,
26 | );
27 |
28 | return (
29 |
30 | );
31 | }
32 | WizardContainer.propTypes = {
33 | /** Wizard contents to render (should be `Wizard.Navigation`,
34 | * `Wizard.Content` and `Wizard.Footer` respectively) */
35 | children: PropTypes.node,
36 | /** CSS class(es) to add to the element */
37 | className: PropTypes.string
38 | };
39 |
40 | export default withStyles(WizardContainer);
41 |
--------------------------------------------------------------------------------
/src/Wizard/WizardContainer.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from 'enzyme';
2 | import React from 'react';
3 | import WizardContainer from './WizardContainer';
4 |
5 | describe('
', () => {
6 | it('should be created', () => {
7 | const component = mount(
8 |
9 | content
10 |
11 | );
12 |
13 | expect(component.find('.fd-wizard').text()).toBe('content');
14 | });
15 |
16 | describe('Prop spreading', () => {
17 | it('should allow props to be spread to the component', () => {
18 | const component = mount(
19 |
20 | );
21 |
22 | expect(
23 | component.getDOMNode()
24 | .attributes['data-sample']
25 | .value
26 | ).toBe('Sample');
27 | });
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/src/Wizard/WizardContent.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from 'enzyme';
2 | import React from 'react';
3 | import WizardContent from './WizardContent';
4 |
5 | describe('
', () => {
6 | it('should be created', () => {
7 | const component = mount(
8 |
9 | content
10 |
11 | );
12 |
13 | expect(component.find('.fd-wizard__content').text()).toBe('content');
14 | });
15 |
16 | describe('Prop spreading', () => {
17 | it('should allow props to be spread to the component', () => {
18 | const component = mount(
19 |
20 | );
21 |
22 | expect(
23 | component.getDOMNode()
24 | .attributes['data-sample']
25 | .value
26 | ).toBe('Sample');
27 | });
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/src/Wizard/WizardFooter.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from 'enzyme';
2 | import React from 'react';
3 | import WizardFooter from './WizardFooter';
4 |
5 | describe('
', () => {
6 | it('should be created', () => {
7 | const component = mount(
8 |
9 | );
10 |
11 | expect(component.find('button').text()).toBe('Cancel');
12 | });
13 |
14 | describe('Prop spreading', () => {
15 | it('should allow props to be spread to the component', () => {
16 | const component = mount(
17 |
18 | );
19 |
20 | expect(
21 | component.getDOMNode()
22 | .attributes['data-sample']
23 | .value
24 | ).toBe('Sample');
25 | });
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/src/Wizard/WizardNavigation.js:
--------------------------------------------------------------------------------
1 | import classnamesBind from 'classnames/bind';
2 | import PropTypes from 'prop-types';
3 | import React from 'react';
4 | import withStyles from '../utils/withStyles';
5 | // import { WIZARD_SIZES } from './Wizard';
6 |
7 | import styles from 'fundamental-styles/dist/wizard.css';
8 |
9 | const classnames = classnamesBind.bind(styles);
10 |
11 | const WIZARD_SIZES = ['sm', 'md', 'lg', 'xl'];
12 |
13 | /** WizardContainer is a wrapper for wizard navigation bar. It is meant to be
14 | * used with `Wizard.Step` components as children when building the wizard
15 | * manually, without the build-in logic.
16 | *
17 | * @returns {Node} WizardContainer component
18 | */
19 | function WizardNavigation({
20 | children,
21 | className,
22 | cssNamespace,
23 | size,
24 | ...props
25 | }) {
26 | const navigationClasses = classnames(
27 | `${cssNamespace}-wizard__navigation`,
28 | className,
29 | );
30 |
31 | const progressBarClasses = classnames({
32 | [`${cssNamespace}-wizard__progress-bar`]: true,
33 | [`${cssNamespace}-wizard__progress-bar--${size}`]: size
34 | });
35 |
36 | return (
37 |
38 |
41 |
42 | );
43 | }
44 | WizardNavigation.propTypes = {
45 | /** Wizard.Step nodes to render as steps */
46 | children: PropTypes.node,
47 | /** CSS class(es) to add to the element */
48 | className: PropTypes.string,
49 | /** By default wizard header has no horizontal paddings. Add a size to modify the padding */
50 | size: PropTypes.oneOf(WIZARD_SIZES)
51 | };
52 |
53 | export default withStyles(WizardNavigation);
54 |
--------------------------------------------------------------------------------
/src/Wizard/WizardNavigation.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from 'enzyme';
2 | import React from 'react';
3 | import WizardNavigation from './WizardNavigation';
4 |
5 | describe('
', () => {
6 | it('should be created', () => {
7 | const component = mount(
8 |
9 | content
10 |
11 | );
12 |
13 | expect(component.find('.fd-wizard__navigation').text()).toBe('content');
14 | expect(component.find('.fd-wizard__progress-bar').text()).toBe('content');
15 | });
16 |
17 | describe('Prop spreading', () => {
18 | it('should allow props to be spread to the component', () => {
19 | const component = mount(
20 |
21 | );
22 |
23 | expect(
24 | component.getDOMNode()
25 | .attributes['data-sample']
26 | .value
27 | ).toBe('Sample');
28 | });
29 | });
30 | });
31 |
--------------------------------------------------------------------------------
/src/Wizard/WizardNextStep.js:
--------------------------------------------------------------------------------
1 | import Button from '../Button/Button';
2 | import classnamesBind from 'classnames/bind';
3 | import PropTypes from 'prop-types';
4 | import React from 'react';
5 | import withStyles from '../utils/withStyles';
6 |
7 | import styles from 'fundamental-styles/dist/wizard.css';
8 |
9 | const classnames = classnamesBind.bind(styles);
10 |
11 | function WizardNextStep({
12 | className,
13 | cssNamespace,
14 | label,
15 | onNext
16 | }) {
17 | const nextStepClasses = classnames(`${cssNamespace}-wizard__next-step`, className);
18 | return (
19 |
20 |
24 | {label}
25 |
26 |
27 | );
28 | }
29 | WizardNextStep.propTypes = {
30 | /** CSS class(es) to add to the element */
31 | className: PropTypes.string,
32 | /** Label to use on the next step button */
33 | label: PropTypes.string,
34 |
35 | /**
36 | * Callback function; triggered when the next step button is clicked.
37 | *
38 | * @param {SyntheticEvent} event - React's original SyntheticEvent. See https://reactjs.org/docs/events.html.
39 | * @returns {void}
40 | */
41 | onNext: PropTypes.func
42 | };
43 | WizardNextStep.defaultProps = {
44 | label: 'Next',
45 | onNext: () => {}
46 | };
47 |
48 | export default withStyles(WizardNextStep);
49 |
--------------------------------------------------------------------------------
/src/Wizard/WizardStep.test.js:
--------------------------------------------------------------------------------
1 | import { mount } from 'enzyme';
2 | import React from 'react';
3 | import WizardStep from './WizardStep';
4 |
5 | describe('
', () => {
6 | it('should be created', () => {
7 | const component = mount(
8 |
9 | );
10 |
11 | expect(component.find('.fd-wizard__step .fd-wizard__label').text()).toBe('Foo');
12 | expect(component.find('.fd-wizard__step .fd-wizard__step-indicator').text()).toBe('F');
13 | });
14 |
15 | it('should not render an icon when glyph is not given', () => {
16 | const component = mount(
17 |
18 | );
19 |
20 | expect(component.find('.fd-wizard__step .fd-wizard__icon').length).toBe(0);
21 | });
22 |
23 | it('should render an icon when glyph is given', () => {
24 | const component = mount(
25 |
26 | );
27 |
28 | expect(component.find('.fd-wizard__step i.fd-wizard__icon').length).toBe(1);
29 | });
30 |
31 | describe('Prop spreading', () => {
32 | it('should allow props to be spread to the component', () => {
33 | const component = mount(
34 |
35 | );
36 |
37 | expect(
38 | component.getDOMNode()
39 | .attributes['data-sample']
40 | .value
41 | ).toBe('Sample');
42 | });
43 | });
44 | });
45 |
46 |
--------------------------------------------------------------------------------
/src/utils/_CssNamespaceContext.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const CssNamespaceContext = React.createContext();
4 | export default CssNamespaceContext;
5 |
--------------------------------------------------------------------------------
/src/utils/_PopperContainer.js:
--------------------------------------------------------------------------------
1 | import Portal from 'react-overlays/Portal';
2 | import PropTypes from 'prop-types';
3 | import React from 'react';
4 |
5 | const PopperContainer = ({ children }) => {
6 | return (
7 |
8 | {children}
9 |
10 | );
11 | };
12 |
13 | PopperContainer.displayName = 'PopperContainer';
14 |
15 | PopperContainer.propTypes = {
16 | children: PropTypes.node
17 | };
18 |
19 | export default PopperContainer;
20 |
--------------------------------------------------------------------------------
/src/utils/children.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export const flattenChildren = children => React.Children.toArray(children)
4 | .reduce((result, child) => {
5 | if (child.type === React.Fragment) {
6 | return [
7 | ...result,
8 | ...flattenChildren(child.props.children)
9 | ];
10 | } else {
11 | return [...result, child];
12 | }
13 | }, []);
14 |
--------------------------------------------------------------------------------
/src/utils/modalManager.js:
--------------------------------------------------------------------------------
1 | import ModalManager from 'react-overlays/ModalManager';
2 |
3 | let modalManager;
4 |
5 | export const getModalManager = () => {
6 | if (modalManager) {
7 | return modalManager;
8 | }
9 | modalManager = new ModalManager({ hideSiblingNodes: false, handleContainerOverflow: false });
10 | return modalManager;
11 | };
12 |
--------------------------------------------------------------------------------
/src/utils/modalManager.test.js:
--------------------------------------------------------------------------------
1 | import { getModalManager } from './modalManager';
2 |
3 | describe('modal manager', () => {
4 | it('is a singleton created on demand', () => {
5 | const manager1 = getModalManager();
6 | const manager2 = getModalManager();
7 | expect(manager1).toBe(manager2);
8 | });
9 | });
10 |
--------------------------------------------------------------------------------
/src/utils/shortId.js:
--------------------------------------------------------------------------------
1 | import shortId from 'shortid';
2 |
3 | // A passthrough method to prepend fd- to every automatically generated ID.
4 | function generate() {
5 | return 'fd-' + shortId.generate();
6 | }
7 |
8 | export default { generate };
9 |
--------------------------------------------------------------------------------
/src/utils/tryFocus.js:
--------------------------------------------------------------------------------
1 | export default function tryFocus(node) {
2 | let focusElm;
3 |
4 | try {
5 | if (node) {
6 | let posX = window.pageXOffset,
7 | posY = window.pageYOffset;
8 | node.focus();
9 | focusElm = node;
10 | window.scrollTo(posX, posY);
11 | }
12 | } catch (e) {
13 | // eslint-disable-next-line no-console
14 | console.warn(e);
15 | }
16 |
17 | return focusElm;
18 | }
19 |
--------------------------------------------------------------------------------
/src/utils/useUniqueId.js:
--------------------------------------------------------------------------------
1 | import shortid from './shortId';
2 | import { useState } from 'react';
3 |
4 | export default (defaultId) => {
5 | const [uniqueId, setUniqueId] = useState();
6 | if (defaultId) return defaultId;
7 | if (uniqueId) return uniqueId;
8 | const id = shortid.generate();
9 | setUniqueId(id);
10 | return id;
11 | };
12 |
--------------------------------------------------------------------------------
/src/utils/withStyles.js:
--------------------------------------------------------------------------------
1 | import CssNamespaceContext from './_CssNamespaceContext';
2 | import hoistNonReactStatics from 'hoist-non-react-statics';
3 | import PropTypes from 'prop-types';
4 | import React, { useContext } from 'react';
5 |
6 | export default (WrappedComponent) => {
7 | const Component = React.forwardRef((props, ref) => {
8 | const cssNamespaceContext = useContext(CssNamespaceContext);
9 |
10 | // if no context exists, become the provider
11 | if (!cssNamespaceContext) {
12 | return (
13 |
14 |
18 | );
19 | }
20 |
21 | return (
22 |
26 | );
27 | });
28 |
29 | hoistNonReactStatics(Component, WrappedComponent);
30 |
31 | Component.displayName = WrappedComponent.displayName || WrappedComponent.name;
32 |
33 | Component.defaultProps = {
34 | ...WrappedComponent.defaultProps,
35 | cssNamespace: 'fd'
36 | };
37 |
38 | Component.propTypes = {
39 | ...WrappedComponent.propTypes,
40 | /** Namespace to use as the prefix for CSS classnames */
41 | cssNamespace: PropTypes.string
42 | };
43 |
44 | return Component;
45 | };
46 |
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/ActionBar-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/ActionBar-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Avatar-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Avatar-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Bar-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Bar-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Breadcrumb-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Breadcrumb-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/BusyIndicator-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/BusyIndicator-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Button-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Button-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/ButtonSegmented-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/ButtonSegmented-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Checkbox-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Checkbox-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/ComboboxInput-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/ComboboxInput-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Counter-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Counter-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/DatePicker-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/DatePicker-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/FormFieldset-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/FormFieldset-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/FormGroup-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/FormGroup-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/FormInput-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/FormInput-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/FormItem-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/FormItem-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/FormLabel-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/FormLabel-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/FormLegend-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/FormLegend-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/FormRadioGroup-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/FormRadioGroup-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/FormTextarea-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/FormTextarea-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Icon-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Icon-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/InfoLabel-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/InfoLabel-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/InputGroup-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/InputGroup-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/LayoutGrid-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/LayoutGrid-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/LayoutPanel-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/LayoutPanel-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Link-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Link-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/List-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/List-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Menu-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Menu-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/MessageBox-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/MessageBox-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/MessagePage-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/MessagePage-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/MessageStrip-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/MessageStrip-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/MultiInput-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/MultiInput-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/ObjectStatus-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/ObjectStatus-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Pagination-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Pagination-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Popover-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Popover-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/SearchInput-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/SearchInput-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Select-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Select-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Shellbar-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Shellbar-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/SideNav-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/SideNav-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/StepInput-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/StepInput-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Switch-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Switch-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/TabGroup-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/TabGroup-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Table-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Table-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Tile-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Tile-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Time-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Time-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/TimePicker-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/TimePicker-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Title-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Title-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Token-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Token-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Tree-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Tree-snap.png
--------------------------------------------------------------------------------
/storybook-testing/__image_snapshots__/Wizard-snap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAP/fundamental-react/70fc74aa63c0cdfb1f57cfe58ade300fc7056bf9/storybook-testing/__image_snapshots__/Wizard-snap.png
--------------------------------------------------------------------------------
/storybook-testing/jest.config.js:
--------------------------------------------------------------------------------
1 |
2 | module.exports = {
3 | rootDir: '../storybook-testing/',
4 | verbose: true,
5 | testEnvironment: 'node',
6 | preset: 'jest-puppeteer',
7 | setupFilesAfterEnv: ['../config/jest/setup.js'],
8 | moduleNameMapper: {
9 | '^.+\\.(scss|css)$': '
/../config/jest/CSSStub.js'
10 | },
11 | transformIgnorePatterns: [
12 | 'node_modules\/?!(react-syntax-highlighter)',
13 | 'node_modules/core-js(-pure|-compat)'
14 | ],
15 | transform: {
16 | '^.+\\.stories\\.js$': '@storybook/addon-storyshots/injectFileName',
17 | '^.+\\.?visual\\.js?$': '@storybook/addon-storyshots/injectFileName',
18 | '^.+\\.js?$': 'babel-jest',
19 | '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx'
20 | }
21 | };
22 |
--------------------------------------------------------------------------------
/storybook-testing/storyshots.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jest-environment jsdom
3 | */
4 | import path from 'path';
5 | import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
6 |
7 | // mock react-dom for portals
8 | jest.mock('react-dom');
9 |
10 | // mock shortid for snapshot testing
11 | jest.mock('shortid', () => {
12 | return {
13 | generate: () => 'mocked-short-id'
14 | };
15 | });
16 |
17 | // create jest snapshot tests from each story
18 | initStoryshots({
19 | storyKindRegex: /^((?!.*?Visual).)*$/,
20 | integrityOptions: { cwd: path.join(__dirname, 'src', 'stories') },
21 | test: multiSnapshotWithOptions()
22 | });
23 |
--------------------------------------------------------------------------------
/storybook-testing/visual-tests.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
3 | import initStoryshots from '@storybook/addon-storyshots';
4 |
5 | // needed to prevent failures from @storybook/components
6 | global.window = { ...global };
7 |
8 | const getMatchOptions = ({ context }) => {
9 | return {
10 | failureThreshold: 0.2,
11 | failureThresholdType: 'percent',
12 | customSnapshotIdentifier: () => context.name.replace(/\s/g, ''),
13 | allowSizeMismatch: true
14 | };
15 | };
16 |
17 | //This is needed to keep CI from failing due to viewport differences
18 | const view = {
19 | name: 'Desktop 1200x800',
20 | userAgent: 'placeholder',
21 | viewport: {
22 | width: 1200,
23 | height: 800
24 | }
25 | };
26 |
27 | const customizePage = (page) => page.emulate(view);
28 | const beforeScreenshot = (page) => page.emulate(view);
29 |
30 | // create visual regession images from each story
31 | initStoryshots({
32 | storyKindRegex: /Visual/,
33 | test: imageSnapshot({
34 | storybookUrl: 'http://localhost:12123/',
35 | customizePage,
36 | getMatchOptions,
37 | beforeScreenshot
38 | })
39 | });
40 |
--------------------------------------------------------------------------------
/types/ActionBar/ActionBar.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type ActionBarProps = {
4 | title: string;
5 | actionClassName?: string | undefined;
6 | actionProps?: any;
7 | actions?: React.ReactNode | undefined;
8 | buttonContainerClassName?: string | undefined;
9 | buttonProps?: any;
10 | className?: string | undefined;
11 | description?: string | undefined;
12 | descriptionProps?: any;
13 | disableStyles?: boolean | undefined;
14 | headingLevel?: any;
15 | titleProps?: any;
16 | onBackClick?: ((...args: any[]) => any) | undefined;
17 | } & Pick<
18 | React.HTMLAttributes,
19 | Exclude, 'children'>
20 | >;
21 |
22 | export const ActionBar: React.FunctionComponent & {
23 | displayName: 'ActionBar';
24 | };
25 |
26 | export default ActionBar;
27 |
--------------------------------------------------------------------------------
/types/Avatar/Avatar.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl';
4 |
5 | type HTMLAttributesColorOmited = Omit<
6 | React.HTMLAttributes,
7 | 'color'
8 | >;
9 |
10 | export type AvatarProps = {
11 | backgroundImageUrl?: string | undefined;
12 | border?: boolean | undefined;
13 | circle?: boolean | undefined;
14 | color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | undefined;
15 | glyph?: string | undefined;
16 | label?: string | undefined;
17 | placeholder?: boolean | undefined;
18 | role?: string | undefined;
19 | size?: AvatarSize | undefined;
20 | tile?: boolean | undefined;
21 | transparent?: boolean | undefined;
22 | zoom?: boolean | undefined;
23 | } & HTMLAttributesColorOmited;
24 |
25 | declare const Avatar: React.FunctionComponent;
26 |
27 | export default Avatar;
28 |
--------------------------------------------------------------------------------
/types/Breadcrumb/Breadcrumb.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type BreadcrumbProps = {
4 | disableStyles?: boolean | undefined;
5 | ref?: React.Ref | undefined;
6 | } & Pick<
7 | React.HTMLAttributes,
8 | Exclude, 'className'>
9 | >;
10 |
11 | export type BreadcrumbItemProps = {
12 | className?: string | undefined;
13 | name?: string | undefined;
14 | url?: string | undefined;
15 | } & React.HTMLAttributes;
16 |
17 | declare const Breadcrumb: React.FunctionComponent & {
18 | displayName: 'Breadcrumb';
19 | Item: React.FunctionComponent & {
20 | displayName: 'Breadcrumb.Item';
21 | };
22 | };
23 |
24 | export default Breadcrumb;
25 |
--------------------------------------------------------------------------------
/types/BusyIndicator/BusyIndicator.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type BusyIndicatorSizes = 's' | 'm' | 'l';
4 |
5 | export type BusyIndicatorProps = {
6 | show: boolean;
7 | className?: string | undefined;
8 | localizedText?:
9 | | {
10 | loading?: string | undefined;
11 | }
12 | | undefined;
13 | size?: BusyIndicatorSizes | undefined;
14 | } & React.HTMLAttributes;
15 |
16 | declare const BusyIndicator: React.FunctionComponent;
17 |
18 | export default BusyIndicator;
19 |
--------------------------------------------------------------------------------
/types/Button/Button.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type ButtonOptions = 'emphasized' | 'transparent';
4 |
5 | export type ButtonTypes =
6 | | 'standard'
7 | | 'positive'
8 | | 'negative'
9 | | 'medium'
10 | | 'ghost'
11 | | 'attention';
12 |
13 | export type ButtonProps = {
14 | className?: string | undefined;
15 | compact?: boolean | undefined;
16 | disabled?: boolean | undefined;
17 | disableStyles?: boolean | undefined;
18 | glyph?: string | undefined;
19 | option?: ButtonOptions | undefined;
20 | ref?: React.RefObject | undefined;
21 | selected?: boolean | undefined;
22 | type?: ButtonTypes | undefined;
23 | typeAttr?: 'submit' | 'reset' | 'button' | undefined;
24 | /** Determines whether the icon should be placed before the text */
25 | iconBeforeText?: boolean;
26 | } & React.HTMLAttributes;
27 |
28 | declare const Button: React.FunctionComponent & {
29 | displayName: 'Button';
30 | };
31 |
32 | export default Button;
33 |
--------------------------------------------------------------------------------
/types/Button/ButtonGroup.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type ButtonGroupProps = {
4 | disabled?: boolean | undefined;
5 | disableStyles?: boolean | undefined;
6 | } & React.HTMLAttributes;
7 |
8 | declare const ButtonGroup: React.FunctionComponent & {
9 | displayName: 'ButtonGroup';
10 | };
11 |
12 | export default ButtonGroup;
13 |
--------------------------------------------------------------------------------
/types/Calendar/Calendar.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface CalendarBaseProps {
4 | blockedDates?: Date[] | undefined;
5 | disableStyles?: boolean | undefined;
6 | disableAfterDate?: Date | undefined;
7 | disableBeforeDate?: Date | undefined;
8 | disabledDates?: Date[] | undefined;
9 | disableFutureDates?: boolean | undefined;
10 | disablePastDates?: boolean | undefined;
11 | disableWeekday?: string[] | undefined;
12 | disableWeekends?: boolean | undefined;
13 | localizedText?:
14 | | {
15 | nextMonth?: string | undefined;
16 | previousMonth?: string | undefined;
17 | show12NextYears?: string | undefined;
18 | show12PreviousYears?: string | undefined;
19 | }
20 | | undefined;
21 | }
22 |
23 | export type CalendarProps = CalendarBaseProps & {
24 | monthListProps?: { [x: string]: any } | undefined;
25 | tableBodyProps?: { [x: string]: any } | undefined;
26 | tableHeaderProps?: { [x: string]: any } | undefined;
27 | tableProps?: { [x: string]: any } | undefined;
28 | yearListProps?: { [x: string]: any } | undefined;
29 | onChange?: ((date: Date) => void) | undefined;
30 | } & { [x: string]: any };
31 |
32 | declare class Calendar extends React.Component {}
33 |
34 | export default Calendar;
35 |
--------------------------------------------------------------------------------
/types/Column/Column.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | type ScreenSize =
4 | | 'smallScreen'
5 | | 'mediumScreen'
6 | | 'largeScreen'
7 | | 'xLargeScreen';
8 |
9 | export type ColumnSpanOption = number | Record;
10 |
11 | export interface ColumnProps {
12 | children: React.ReactNode;
13 | className?: string;
14 | /** Set to true to have the column automatically occupy the remaining space in the row */
15 | full?: boolean;
16 | /** How many cells out of 12 should the column be offset by on each screen size. Defaults to none. */
17 | offset?: number;
18 | /** Are the offsets to be applied before or after the column? default: "before" */
19 | offsetPosition?: 'before' | 'after';
20 | /** How many cells out of 12 should the column occupy on each screen size. Defaults to 12. */
21 | span?: number;
22 | }
23 |
24 | declare const Column: React.FunctionComponent & {
25 | displayName: 'Column';
26 | };
27 |
28 | export default Column;
29 |
--------------------------------------------------------------------------------
/types/ComboboxInput/ComboboxInput.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { MenuProps } from '../Menu/Menu';
3 |
4 | export type ComboboxInputProps = {
5 | buttonProps?: object | undefined;
6 | className?: string | undefined;
7 | compact?: boolean | undefined;
8 | disableStyles?: boolean | undefined;
9 | inputProps?: object | undefined;
10 | list: React.ReactNode;
11 | /* An object containing a `Menu` component. */
12 | menu: React.ReactElement;
13 | onClick?:
14 | | ((event: React.MouseEvent) => void)
15 | | undefined;
16 | placeholder?: string | undefined;
17 | popoverProps?: object | undefined;
18 | validationState?:
19 | | {
20 | state?:
21 | | 'error'
22 | | 'warning'
23 | | 'information'
24 | | 'success'
25 | | undefined;
26 | text?: string | undefined;
27 | }
28 | | undefined;
29 | } & { [x: string]: any };
30 |
31 | declare const ComboboxInput: React.FunctionComponent;
32 |
33 | export default ComboboxInput;
34 |
--------------------------------------------------------------------------------
/types/Container/Container.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface ContainerProps {
4 | children: React.ReactNode;
5 | className?: string;
6 | /** Set to true to remove the margins between the panels */
7 | noGap?: boolean;
8 | }
9 |
10 | declare const Container: React.FunctionComponent & {
11 | displayName: 'Container';
12 | };
13 |
14 | export default Container;
15 |
--------------------------------------------------------------------------------
/types/Counter/Counter.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type CounterProps = {
4 | disableStyles?: boolean | undefined;
5 | localizedText?:
6 | | {
7 | counterLabel?: string | undefined;
8 | }
9 | | undefined;
10 | notification?: boolean | undefined;
11 | } & React.HTMLAttributes;
12 |
13 | declare const Counter: React.FunctionComponent & {
14 | displayName: 'Counter';
15 | };
16 |
17 | export default Counter;
18 |
--------------------------------------------------------------------------------
/types/DatePicker/DatePicker.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { CalendarBaseProps } from '../Calendar/Calendar';
3 |
4 | export type DatePickerProps = CalendarBaseProps & {
5 | buttonLabel?: string | undefined;
6 | buttonProps?: { [x: string]: any } | undefined;
7 | compact?: boolean | undefined;
8 | defaultValue?: string | undefined;
9 | enableRangeSelection?: boolean | undefined;
10 | inputProps?: { [x: string]: any } | undefined;
11 | locale?: string | undefined;
12 | onBlur?:
13 | | (({
14 | date,
15 | formattedDate,
16 | }: {
17 | date: Date;
18 | formattedDate: string;
19 | }) => void)
20 | | undefined;
21 | validationState?:
22 | | {
23 | state?:
24 | | 'error'
25 | | 'warning'
26 | | 'information'
27 | | 'success'
28 | | undefined;
29 | text?: string | undefined;
30 | }
31 | | undefined;
32 | } & { [x: string]: any };
33 |
34 | declare class DatePicker extends React.Component {}
35 |
36 | export default DatePicker;
37 |
--------------------------------------------------------------------------------
/types/Dialog/Dialog.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type DialogProps = {
4 | actions: React.ReactNode[];
5 | title: string;
6 | /** Specific function to select list of node to lock the focus */
7 | allowListForLockFocus?: (activeElement: HTMLElement) => void;
8 | backdropClassName?: string | undefined;
9 | bodyProps?: any;
10 | className?: string | undefined;
11 | contentProps?: any;
12 | /** Additional props to disable auto closing dialog */
13 | disableAutoClose?: boolean;
14 | /** Additional props to be spread to the footer of the dialog */
15 | focusElementOnClose?: object;
16 | footerProps?: any;
17 | header?: string | React.ReactNode;
18 | headerProps?: any;
19 | headingLevel?: number;
20 | /** Heading style, if it should be different from the default style for the Dialog. */
21 | headingStyle?: number;
22 | /** Set to **true** to make the dialog visible */
23 | show?: boolean | undefined;
24 | size?: 's' | 'm' | 'l' | 'xl';
25 | subheader?: string | undefined;
26 | titleProps?: any;
27 | onClose?: ((...args: any[]) => any) | undefined;
28 | } & React.HTMLAttributes;
29 |
30 | declare class Dialog extends React.Component {}
31 |
32 | export default Dialog;
33 |
--------------------------------------------------------------------------------
/types/Forms/Checkbox.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type CheckboxProps = {
4 | checked?: boolean | undefined;
5 | className?: string | undefined;
6 | compact?: boolean | undefined;
7 | defaultChecked?: boolean | undefined;
8 | disabled?: boolean | undefined;
9 | disableStyles?: boolean | undefined;
10 | id?: string | undefined;
11 | indeterminate?: boolean | undefined;
12 | inline?: boolean | undefined;
13 | inputProps?: any;
14 | labelClasses?: string | undefined;
15 | labelProps?: any;
16 | name?: string | undefined;
17 | state?: any;
18 | value?: string | undefined;
19 | onChange?: ((...args: any[]) => any) | undefined;
20 | } & { [x: string]: any };
21 |
22 | declare const Checkbox: React.FunctionComponent;
23 |
24 | export default Checkbox;
25 |
--------------------------------------------------------------------------------
/types/Forms/FormFieldset.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type FormFieldsetProps = {
4 | className?: string | undefined;
5 | disableStyles?: boolean | undefined;
6 | } & { [x: string]: any };
7 |
8 | declare const FormFieldset: React.FunctionComponent;
9 |
10 | export default FormFieldset;
11 |
--------------------------------------------------------------------------------
/types/Forms/FormGroup.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type FormGroupProps = {
4 | disableStyles?: boolean | undefined;
5 | } & { [x: string]: any };
6 |
7 | declare const FormGroup: React.FunctionComponent & {
8 | displayName: 'FormGroup';
9 | };
10 |
11 | export default FormGroup;
12 |
--------------------------------------------------------------------------------
/types/Forms/FormInput.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type FormInputProps = {
4 | className?: string | undefined;
5 | compact?: boolean | undefined;
6 | disabled?: boolean | undefined;
7 | disableStyles?: boolean | undefined;
8 | id?: string | undefined;
9 | name?: string | undefined;
10 | placeholder?: string | undefined;
11 | readOnly?: boolean | undefined;
12 | type?: string | undefined;
13 | validationState?:
14 | | {
15 | state?:
16 | | 'error'
17 | | 'warning'
18 | | 'information'
19 | | 'success'
20 | | undefined;
21 | text?: string | undefined;
22 | }
23 | | undefined;
24 | value?: string | number | undefined;
25 | } & { [x: string]: any };
26 |
27 | declare const FormInput: React.FunctionComponent;
28 |
29 | export default FormInput;
30 |
--------------------------------------------------------------------------------
/types/Forms/FormItem.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type FormItemProps = {
4 | className?: string | undefined;
5 | disableStyles?: boolean | undefined;
6 | isHorizontal?: boolean | undefined;
7 | isInline?: boolean | undefined;
8 | } & { [x: string]: any };
9 |
10 | declare const FormItem: React.FunctionComponent;
11 |
12 | export default FormItem;
13 |
--------------------------------------------------------------------------------
/types/Forms/FormLabel.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type FormLabelProps = {
4 | className?: string | undefined;
5 | disabled?: boolean | undefined;
6 | disableStyles?: boolean | undefined;
7 | isInlineHelp?: boolean | undefined;
8 | required?: boolean | undefined;
9 | } & { [x: string]: any };
10 |
11 | declare const FormLabel: React.FunctionComponent;
12 |
13 | export default FormLabel;
14 |
--------------------------------------------------------------------------------
/types/Forms/FormLegend.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type FormLegendProps = {
4 | className?: string | undefined;
5 | disableStyles?: boolean | undefined;
6 | } & { [x: string]: any };
7 |
8 | declare const FormLegend: React.FunctionComponent;
9 |
10 | export default FormLegend;
11 |
--------------------------------------------------------------------------------
/types/Forms/FormRadioGroup.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type FormRadioGroupProps = {
4 | className?: string | undefined;
5 | compact?: boolean | undefined;
6 | disabled?: boolean | undefined;
7 | disableStyles?: boolean | undefined;
8 | inline?: boolean | undefined;
9 | onChange?: ((...args: any[]) => any) | undefined;
10 | } & { [x: string]: any };
11 |
12 | declare class FormRadioGroup extends React.Component {}
13 |
14 | export default FormRadioGroup;
15 |
--------------------------------------------------------------------------------
/types/Forms/FormRadioItem.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type FormRadioItemProps = {
4 | checked?: boolean | undefined;
5 | className?: string | undefined;
6 | compact?: boolean | undefined;
7 | defaultChecked?: boolean | undefined;
8 | disabled?: boolean | undefined;
9 | disableStyles?: boolean | undefined;
10 | id?: string | undefined;
11 | inline?: boolean | undefined;
12 | inputProps?: any;
13 | labelProps?: any;
14 | name?: string | undefined;
15 | state?: any;
16 | value?: string | undefined;
17 | } & { [x: string]: any };
18 |
19 | declare const FormRadioItem: React.FunctionComponent;
20 |
21 | export default FormRadioItem;
22 |
--------------------------------------------------------------------------------
/types/Forms/FormSelect.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type FormSelectProps = {
4 | className?: string | undefined;
5 | compact?: boolean | undefined;
6 | disabled?: boolean | undefined;
7 | disableStyles?: boolean | undefined;
8 | state?: any;
9 | } & { [x: string]: any };
10 |
11 | declare const FormSelect: React.FunctionComponent;
12 |
13 | export default FormSelect;
14 |
--------------------------------------------------------------------------------
/types/Forms/FormSet.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type FormSetProps = {
4 | className?: string | undefined;
5 | disableStyles?: boolean | undefined;
6 | } & { [x: string]: any };
7 |
8 | declare const FormSet: React.FunctionComponent;
9 |
10 | export default FormSet;
11 |
--------------------------------------------------------------------------------
/types/Forms/FormTextarea.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type FormTextareaProps = {
4 | className?: string | undefined;
5 | compact?: boolean | undefined;
6 | disabled?: boolean | undefined;
7 | disableStyles?: boolean | undefined;
8 | readOnly?: boolean | undefined;
9 | state?: any;
10 | } & { [x: string]: any };
11 |
12 | declare const FormTextarea: React.FunctionComponent;
13 |
14 | export default FormTextarea;
15 |
--------------------------------------------------------------------------------
/types/Image/Image.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type imageSize = 's' | 'm' | 'l';
4 | export type imageType = 'circle';
5 | export type ImageProps = {
6 | photo: string;
7 | size: imageSize;
8 | className?: string | undefined;
9 | disableStyles?: boolean | undefined;
10 | type?: imageType | undefined;
11 | } & { [x: string]: any };
12 |
13 | declare const Image: React.FunctionComponent;
14 |
15 | export default Image;
16 |
--------------------------------------------------------------------------------
/types/InfoLabel/InfoLabel.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { IconGlyph } from '../Icon/Icon';
3 |
4 | export type InfoLabelProps = {
5 | className?: string | undefined;
6 | color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
7 | disableStyles?: boolean | undefined;
8 | glyph?: IconGlyph | undefined;
9 | numeric?: boolean | undefined;
10 | } & { [x: string]: any };
11 |
12 | declare const InfoLabel: React.FunctionComponent;
13 |
14 | export default InfoLabel;
15 |
--------------------------------------------------------------------------------
/types/InlineHelp/InlineHelp.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type InlineHelpPlacement =
4 | | 'bottom-right'
5 | | 'bottom-left'
6 | | 'right'
7 | | 'left'
8 | | 'bottom-center';
9 |
10 | export type InlineHelpProps = {
11 | className?: string | undefined;
12 | contentClassName?: string | undefined;
13 | disableStyles?: boolean | undefined;
14 | placement: InlineHelpPlacement;
15 | } & { [x: string]: any };
16 |
17 | declare const InlineHelp: React.FunctionComponent;
18 |
19 | export default InlineHelp;
20 |
--------------------------------------------------------------------------------
/types/InputGroup/InputGroup.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type InputGroupAddonPosition = 'before' | 'after';
4 |
5 | export type InputGroupTypes = 'text' | 'number' | 'search';
6 |
7 | export interface InputGroupAddonProps {
8 | className?: string | undefined;
9 | compact?: boolean | undefined;
10 | isButton?: boolean | undefined;
11 | children?: React.ReactNode;
12 | }
13 |
14 | export type InputGroupProps = {
15 | className?: string | undefined;
16 | compact?: boolean | undefined;
17 | disabled?: boolean | undefined;
18 | disableStyles?: boolean | undefined;
19 | validationState?:
20 | | {
21 | state?:
22 | | 'error'
23 | | 'warning'
24 | | 'information'
25 | | 'success'
26 | | undefined;
27 | text?: string | undefined;
28 | }
29 | | undefined;
30 | props?: any;
31 | } & { [x: string]: any };
32 |
33 | declare class InputGroup extends React.Component {
34 | static displayName: 'InputGroup';
35 | static Addon: React.FunctionComponent & {
36 | displayName: 'InputGroup.Addon';
37 | };
38 | }
39 |
40 | export default InputGroup;
41 |
--------------------------------------------------------------------------------
/types/LayoutPanel/LayoutPanel.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type LayoutPanelHeadProps = {
4 | headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
5 | headingStyle?: 2 | 3 | 4 | 5 | 6 | undefined;
6 | title?: React.ReactNode | string;
7 | description?: string;
8 | } & Omit, 'title'>;
9 |
10 | declare class LayoutPanel extends React.Component<
11 | React.HTMLAttributes
12 | > {
13 | displayName: 'LayoutPanel';
14 | static Actions: React.ComponentClass<
15 | React.HTMLAttributes
16 | > & { displayName: 'LayoutPanel.Actions' };
17 | static Body: React.ComponentClass> & {
18 | displayName: 'LayoutPanel.Body';
19 | };
20 | static Filters: React.ComponentClass<
21 | React.HTMLAttributes
22 | > & { displayName: 'LayoutPanel.Filters' };
23 | static Footer: React.ComponentClass<
24 | React.HTMLAttributes
25 | > & { displayName: 'LayoutPanel.Footer' };
26 | static Head: React.ComponentClass & {
27 | displayName: 'LayoutPanel.Head';
28 | };
29 | static Header: React.ComponentClass<
30 | React.HTMLAttributes
31 | > & { displayName: 'LayoutPanel.Header' };
32 | }
33 |
34 | export default LayoutPanel;
35 |
--------------------------------------------------------------------------------
/types/Link/Link.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type LinkProps = {
4 | className?: string | undefined;
5 | href?: string | undefined;
6 | disabled?: boolean | undefined;
7 | disableStyles?: boolean | undefined;
8 | ref?: React.Ref | undefined;
9 | } & React.AnchorHTMLAttributes;
10 |
11 | declare const Link: React.FunctionComponent & {
12 | displayName: 'Link';
13 | };
14 |
15 | export default Link;
16 |
--------------------------------------------------------------------------------
/types/LocalizationEditor/LocalizationEditor.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type LocalizationEditorProps = {
4 | control: {
5 | buttonProps?: { [x: string]: any } | undefined;
6 | inputProps?: { [x: string]: any } | undefined;
7 | labelProps?: { [x: string]: any } | undefined;
8 | label?: string | undefined;
9 | placeholder?: string | undefined;
10 | language?: string | undefined;
11 | };
12 | menu: Array<{
13 | inputProps?: { [x: string]: any } | undefined;
14 | placeholder?: string | undefined;
15 | language?: string | undefined;
16 | }>;
17 | className?: string | undefined;
18 | compact?: boolean | undefined;
19 | disableStyles?: boolean | undefined;
20 | id?: string | undefined;
21 | inputClassName?: string | undefined;
22 | listProps?: any;
23 | popoverProps?: any;
24 | textarea?: boolean | undefined;
25 | } & React.HTMLAttributes;
26 |
27 | declare const LocalizationEditor: React.FunctionComponent & {
28 | displayName: 'LocalizationEditor';
29 | };
30 |
31 | export default LocalizationEditor;
32 |
--------------------------------------------------------------------------------
/types/Menu/Menu.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type MenuProps = {
4 | addonBefore?: boolean | undefined;
5 | className?: string | undefined;
6 | disableStyles?: boolean | undefined;
7 | } & React.HTMLAttributes;
8 |
9 | export type MenuGroupProps = {
10 | title: string;
11 | className?: string | undefined;
12 | headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
13 | titleProps?: { [x: string]: any } | undefined;
14 | } & React.HTMLAttributes;
15 |
16 | export type MenuItemProps = {
17 | active?: boolean | undefined;
18 | addonAfter?: string | undefined;
19 | addonBefore?: string | undefined;
20 | addonProps?: any;
21 | className?: string | undefined;
22 | disabled?: boolean | undefined;
23 | isLink?: boolean | undefined;
24 | onClick?:
25 | | ((event: React.MouseEvent) => void)
26 | | undefined;
27 | selected?: boolean | undefined;
28 | separator?: boolean | undefined;
29 | url?: string | undefined;
30 | urlProps?: any;
31 | } & React.HTMLAttributes;
32 |
33 | export type MenuListProps = {
34 | addonBefore?: boolean | undefined;
35 | className?: string | undefined;
36 | separated?: boolean | undefined;
37 | } & React.HTMLAttributes;
38 |
39 | declare const Menu: React.FunctionComponent & {
40 | displayName: 'Menu';
41 | Group: React.FunctionComponent & {
42 | displayName: 'Menu.Group';
43 | };
44 | Item: React.FunctionComponent & { displayName: 'Menu.Item' };
45 | List: React.FunctionComponent & { displayName: 'Menu.List' };
46 | };
47 |
48 | export default Menu;
49 |
--------------------------------------------------------------------------------
/types/MessageStrip/MessageStrip.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface MessageStripProps {
4 | buttonProps?: any;
5 | children?: React.ReactNode;
6 | className?: string | undefined;
7 | disableStyles?: boolean | undefined;
8 | dismissible?: boolean | undefined;
9 | link?: string | undefined;
10 | linkProps?: any;
11 | linkText?: string | undefined;
12 | localizedText?: any;
13 | noGlyph?: boolean | undefined;
14 | type?: any;
15 | onCloseClicked?: ((...args: any[]) => any) | undefined;
16 | }
17 |
18 | declare const MessageStrip: React.FunctionComponent & {
19 | displayName: 'MessageStrip';
20 | };
21 |
22 | export default MessageStrip;
23 |
--------------------------------------------------------------------------------
/types/MultiInput/MultiInput.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type MultiInputProps = {
4 | data: any[];
5 | buttonProps?: any;
6 | className?: string | undefined;
7 | compact?: boolean | undefined;
8 | disabled?: boolean | undefined;
9 | disableStyles?: boolean | undefined;
10 | inputProps?: any;
11 | listProps?: any;
12 | placeholder?: string | undefined;
13 | popoverProps?: any;
14 | tagProps?: any;
15 | validationState?:
16 | | {
17 | state?: any;
18 | text?: string | undefined;
19 | }
20 | | undefined;
21 | onTagsUpdate?: ((...args: any[]) => any) | undefined;
22 | } & { [x: string]: any };
23 |
24 | declare class MultiInput extends React.Component {}
25 |
26 | export default MultiInput;
27 |
--------------------------------------------------------------------------------
/types/ObjectStatus/ObjectStatus.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type ObjectStatusTypes =
4 | | 'negative'
5 | | 'critical'
6 | | 'positive'
7 | | 'informative';
8 |
9 | export type ObjectStatusProps = {
10 | glyph?: string | undefined;
11 | indication?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | undefined;
12 | link?: string | undefined;
13 | size?: 'l' | undefined;
14 | status?: ObjectStatusTypes | undefined;
15 | /** aria-label is required for a11y, when object status has only icon */
16 | ariaLabel?: string;
17 | } & React.HTMLAttributes;
18 |
19 | declare const ObjectStatus: React.FunctionComponent;
20 |
21 | export default ObjectStatus;
22 |
--------------------------------------------------------------------------------
/types/Pagination/Pagination.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type PaginationProps = {
4 | itemsTotal: number;
5 | onClick: (...args: any[]) => any;
6 | className?: string | undefined;
7 | disableStyles?: boolean | undefined;
8 | displayTotal?: boolean | undefined;
9 | displayTotalProps?: any;
10 | initialPage?: number | undefined;
11 | itemsPerPage?: number | undefined;
12 | linkProps?: any;
13 | localizedText?:
14 | | {
15 | next: string;
16 | previous: string;
17 | }
18 | | undefined;
19 | nextProps?: any;
20 | prevProps?: any;
21 | totalText?: string | undefined;
22 | visiblePageTotal?: number | undefined;
23 | } & { [x: string]: any };
24 |
25 | declare class Pagination extends React.Component {}
26 |
27 | export default Pagination;
28 |
--------------------------------------------------------------------------------
/types/Row/Row.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface RowProps {
4 | children: React.ReactNode;
5 | className?: string;
6 | }
7 |
8 | declare const Row: React.FunctionComponent & {
9 | displayName: 'Row';
10 | };
11 |
12 | export default Row;
13 |
--------------------------------------------------------------------------------
/types/SearchInput/SearchInput.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type SearchInputProps = {
4 | className?: string | undefined;
5 | compact?: boolean | undefined;
6 | disableStyles?: boolean | undefined;
7 | inputGroupAddonProps?: any;
8 | inputGroupProps?: any;
9 | inputProps?: any;
10 | inShellbar?: boolean | undefined;
11 | listProps?: any;
12 | noSearchBtn?: boolean | undefined;
13 | placeholder?: string | undefined;
14 | popoverProps?: any;
15 | searchBtnProps?: any;
16 | searchList?:
17 | | Array<{
18 | text: string;
19 | callback?: ((...args: any[]) => any) | undefined;
20 | }>
21 | | undefined;
22 | validationState?:
23 | | {
24 | state?: any;
25 | text?: string | undefined;
26 | }
27 | | undefined;
28 | onChange?:
29 | | ((event: React.ChangeEvent) => void)
30 | | undefined;
31 | onEnter?: ((value?: string | number | string[]) => void) | undefined;
32 | } & { [x: string]: any };
33 |
34 | declare class SearchInput extends React.Component {
35 | static displayName: 'SearchInput';
36 | }
37 |
38 | export default SearchInput;
39 |
--------------------------------------------------------------------------------
/types/StepInput/StepInput.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface StepInputProps {
4 | className?: string | undefined;
5 | disabled?: boolean | undefined;
6 | disableStyles?: boolean | undefined;
7 | localizedText?: any;
8 | onChange?: ((stepValue: number) => void) | undefined;
9 | placeholder?: string | undefined;
10 | readOnly?: boolean | undefined;
11 | validationState?:
12 | | {
13 | state?:
14 | | 'error'
15 | | 'warning'
16 | | 'information'
17 | | 'success'
18 | | undefined;
19 | text?: string | undefined;
20 | }
21 | | undefined;
22 | value?: number | undefined;
23 | }
24 |
25 | declare const StepInput: React.FunctionComponent & {
26 | displayName: 'StepInput';
27 | };
28 |
29 | export default StepInput;
30 |
--------------------------------------------------------------------------------
/types/Switch/Switch.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface SwitchProps {
4 | checked?: boolean | undefined;
5 | children?: React.ReactNode;
6 | className?: string | undefined;
7 | compact?: boolean | undefined;
8 | disabled?: boolean | undefined;
9 | disableStyles?: boolean | undefined;
10 | id?: string | undefined;
11 | inputProps?: any;
12 | internalLabels?:
13 | | {
14 | checked?: any;
15 | unchecked?: any;
16 | }
17 | | undefined;
18 | labelProps?: any;
19 | semantic?: boolean | undefined;
20 | onChange?: ((...args: any[]) => any) | undefined;
21 | }
22 |
23 | declare const Switch: React.FunctionComponent & {
24 | displayName: 'Switch';
25 | };
26 |
27 | export default Switch;
28 |
--------------------------------------------------------------------------------
/types/Table/Table.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type TableProps = {
4 | headers: Array;
5 | tableData?: Array<{ rowData: Array }> | undefined;
6 | className?: string | undefined;
7 | disableStyles?: boolean | undefined;
8 | tableBodyClassName?: string | undefined;
9 | tableBodyProps?: any;
10 | tableBodyRowProps?:
11 | | { [x: string]: any }
12 | | ((rowData: string[], index: number) => void)
13 | | undefined;
14 | tableCellClassName?: string | undefined;
15 | tableHeaderClassName?: string | undefined;
16 | tableHeaderProps?: any;
17 | tableHeaderRowClassName?: string | undefined;
18 | tableHeaderRowProps?: any;
19 | tableRowClassName?: string | undefined;
20 | } & { [x: string]: any };
21 |
22 | declare const Table: React.FunctionComponent & {
23 | displayName: 'Table';
24 | };
25 |
26 | export default Table;
27 |
--------------------------------------------------------------------------------
/types/Tabs/Tab.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { IconGlyph } from '../Icon/Icon';
3 |
4 | export type TabProps = {
5 | className?: string | undefined;
6 | disableStyles?: boolean | undefined;
7 | glyph?: IconGlyph | undefined;
8 | id?: string | undefined;
9 | index?: number | undefined;
10 | linkProps?: any;
11 | selected?: boolean | undefined;
12 | tabContentProps?: any;
13 | title?: string | undefined;
14 | onClick?: ((...args: any[]) => any) | undefined;
15 | } & { [x: string]: any };
16 |
17 | declare const Tab: React.FunctionComponent & {
18 | displayName: 'Tab';
19 | };
20 |
21 | export default Tab;
22 |
--------------------------------------------------------------------------------
/types/Tabs/TabGroup.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type TabGroupProps = {
4 | className?: string | undefined;
5 | disableStyles?: boolean | undefined;
6 | selectedIndex?: number | undefined;
7 | size?: any;
8 | tabGroupProps?: any;
9 | onTabClick?: ((event: React.MouseEvent, index: number) => void) | undefined;
10 | } & { [x: string]: any };
11 |
12 | declare class TabGroup extends React.Component {
13 | static displayName: 'TabGroup';
14 | }
15 |
16 | export default TabGroup;
17 |
--------------------------------------------------------------------------------
/types/Tile/Tile.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type TileProps = {
4 | className?: string | undefined;
5 | isDouble?: boolean | undefined;
6 | size?: 's' | undefined;
7 | onClick?:
8 | | ((event: React.MouseEvent) => void)
9 | | undefined;
10 | } & { [x: string]: any };
11 |
12 | export type TileContentProps = {
13 | className?: string | undefined;
14 | twoColumns?: boolean | undefined;
15 | } & { [x: string]: any };
16 |
17 | export type TileFooterProps = {
18 | className?: string | undefined;
19 | } & { [x: string]: any };
20 |
21 | export type TileHeaderProps = {
22 | className?: string | undefined;
23 | subtitle?: string | undefined;
24 | } & { [x: string]: any };
25 |
26 | declare const Tile: React.FC & {
27 | displayName: 'Tile';
28 | Content: React.FC & { displayName: 'Tile.Content' };
29 | Footer: React.FC & { displayName: 'Tile.Footer' };
30 | Header: React.FC & { displayName: 'Tile.Header' };
31 | };
32 |
33 | export default Tile;
34 |
--------------------------------------------------------------------------------
/types/Time/Time.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface TimeBaseProps {
4 | disableStyles?: boolean | undefined;
5 | format12Hours?: boolean | undefined;
6 | showHour?: boolean | undefined;
7 | showMinute?: boolean | undefined;
8 | showSecond?: boolean | undefined;
9 | spinners?: boolean | undefined;
10 | time?:
11 | | { hour: string; minute: string; second: string; meridiem: 0 | 1 }
12 | | undefined;
13 | }
14 |
15 | export type TimeProps = TimeBaseProps & {
16 | disabled?: boolean | undefined;
17 | hoursDownButtonProps?: any;
18 | hoursInputProps?: any;
19 | hoursUpButtonProps?: any;
20 | id?: string | undefined;
21 | localizedText?:
22 | | {
23 | meridiemAM?: string | undefined;
24 | meridiemPM?: string | undefined;
25 | }
26 | | undefined;
27 | meridiemDownButtonProps?: any;
28 | meridiemInputProps?: any;
29 | meridiemUpButtonProps?: any;
30 | minutesDownButtonProps?: any;
31 | minutesInputProps?: any;
32 | minutesUpButtonProps?: any;
33 | secondsDownButtonProps?: any;
34 | secondsInputProps?: any;
35 | secondsUpButtonProps?: any;
36 | onChange?:
37 | | ((time: {
38 | hour: string;
39 | minute: string;
40 | second: string;
41 | meridiem: 0 | 1;
42 | }) => void)
43 | | undefined;
44 | } & { [x: string]: any };
45 |
46 | declare class Time extends React.Component {
47 | static displayName: 'Time';
48 | }
49 |
50 | export default Time;
51 |
--------------------------------------------------------------------------------
/types/TimePicker/TimePicker.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { TimeBaseProps } from '../Time/Time';
3 |
4 | export type TimePickerProps = TimeBaseProps & {
5 | buttonProps?: { [x: string]: any } | undefined;
6 | disabled?: boolean | undefined;
7 | id?: string | undefined;
8 | inputProps?: { [x: string]: any } | undefined;
9 | localizedText?:
10 | | {
11 | meridiemAM: string;
12 | meridiemPM: string;
13 | }
14 | | undefined;
15 | popoverProps?: { [x: string]: any } | undefined;
16 | timeProps?: { [x: string]: any } | undefined;
17 | value?: string | undefined;
18 | onChange?: ((...args: any[]) => any) | undefined;
19 | } & { [x: string]: any };
20 |
21 | declare class TimePicker extends React.Component {
22 | static displayName: 'TimePicker';
23 | }
24 |
25 | export default TimePicker;
26 |
--------------------------------------------------------------------------------
/types/Title/Title.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type TitleProps = {
4 | level: 1 | 2 | 3 | 4 | 5 | 6;
5 | localizedText?:
6 | | {
7 | loading?: string | undefined;
8 | }
9 | | undefined;
10 | className?: string | undefined;
11 | levelStyle?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
12 | wrap?: boolean | undefined;
13 | } & React.HTMLAttributes;
14 |
15 | declare const Title: React.FunctionComponent;
16 |
17 | export default Title;
18 |
--------------------------------------------------------------------------------
/types/Token/Token.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export type TokenProps = {
4 | /** A localized string to be used as aria-label for the token's button */
5 | buttonLabel: string;
6 | className?: string | undefined;
7 | compact?: boolean | undefined;
8 | readOnly?: boolean | undefined;
9 | onClick?:
10 | | ((event: React.MouseEvent) => void)
11 | | undefined;
12 | } & React.HTMLAttributes;
13 |
14 | declare const Token: React.ForwardRefExoticComponent<
15 | TokenProps & React.RefAttributes
16 | >;
17 |
18 | export default Token;
19 |
--------------------------------------------------------------------------------
/types/Wizard/WizardContainer.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface WizardContainerProps {
4 | /** Wizard contents to render (should be Wizard.Navigation, Wizard.Content and Wizard.Footer respectively) */
5 | children?: React.ReactNode;
6 | /** CSS class(es) to add to the element. */
7 | className?: string;
8 | }
9 |
10 | declare const WizardContainer: React.FunctionComponent;
11 |
12 | export default WizardContainer;
13 |
--------------------------------------------------------------------------------
/types/Wizard/WizardContent.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface WizardContentProps {
4 | /** Content background styling */
5 | background?: 'solid' | 'list' | 'transparent';
6 | /** Wizard.Step nodes to render as steps */
7 | children?: React.ReactNode;
8 | /** CSS class(es) to add to the element */
9 | className?: string;
10 | /** By default wizard header has no horizontal paddings. Add a size to modify the padding */
11 | size?: 'sm' | 'md' | 'lg' | 'xl';
12 | }
13 |
14 | declare const WizardContent: React.FunctionComponent;
15 |
16 | export default WizardContent;
17 |
--------------------------------------------------------------------------------
/types/Wizard/WizardFooter.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface WizardFooterProps {
4 | /** Nodes to render as extra content before the Cancel button */
5 | children?: React.ReactNode;
6 | /** CSS class(es) to add to the element */
7 | className?: string;
8 | /** Cancel button label, default is 'Cancel' */
9 | label?: string;
10 | /** Callback function; triggered when the cancel button is pressed. */
11 | onCancel?: (event: React.SyntheticEvent) => void;
12 | }
13 |
14 | declare const WizardFooter: React.FunctionComponent;
15 |
16 | export default WizardFooter;
17 |
--------------------------------------------------------------------------------
/types/Wizard/WizardNavigation.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface WizardNavigationProps {
4 | /** Wizard.Step nodes to render as steps */
5 | children?: React.ReactNode;
6 | /** CSS class(es) to add to the element */
7 | className?: string;
8 | /** By default wizard header has no horizontal paddings. Add a size to modify the padding */
9 | size?: 'sm' | 'md' | 'lg' | 'xl';
10 | }
11 |
12 | declare const WizardNavigation: React.FunctionComponent;
13 |
14 | export default WizardNavigation;
15 |
--------------------------------------------------------------------------------
/types/Wizard/WizardStep.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface WizardStepProps {
4 | title: string;
5 | /** (integrated only) Mark step as having unknown following content. */
6 | branching?: boolean;
7 | /** (integated only) Nodes to render as step content. */
8 | children?: React.ReactNode;
9 | /** CSS class(es) to add to the element. */
10 | className?: string;
11 | /** (standalone only) Appearance of the connector to the next element. */
12 | connector?: 'none' | 'default' | 'active' | 'branching';
13 | /** Icon glyph to display in the indicator component. */
14 | glyph?: React.ReactNode;
15 | /** Text to display in the indicator component if no glyph given. */
16 | indicator?: string;
17 | /** Menu to show instead of triggering a click even. Used mostly for stacking steps. */
18 | menu?: React.ReactNode;
19 | /** (standalone only) Step appearance modifiers. */
20 | modifiers?: Array<
21 | | 'completed'
22 | | 'current'
23 | | 'upcoming'
24 | | 'no-label'
25 | | 'stacked'
26 | | 'stacked-top'
27 | | 'active'
28 | >;
29 | /** (integrated only) Label to use on the next step button. */
30 | nextLabel?: string;
31 | /** Label to use as the optional text in step header. */
32 | optionalLabel?: string;
33 | /** (integrated only) Label to use on the previous step button. */
34 | previousLabel?: string;
35 | /** (integrated only) True if moving to the next step is allowed. default is true */
36 | valid?: boolean;
37 | onClick?: React.MouseEventHandler;
38 | }
39 |
40 | declare const WizardStep: React.FunctionComponent;
41 |
42 | export default WizardStep;
43 |
--------------------------------------------------------------------------------