diff --git a/src/components/Spinner/Spinner.stories.js b/src/components/Spinner/Spinner.stories.js index eb7482fcf..aa494fcbe 100644 --- a/src/components/Spinner/Spinner.stories.js +++ b/src/components/Spinner/Spinner.stories.js @@ -1,4 +1,4 @@ -import { number, select } from '@storybook/addon-knobs'; +import { number, select, text } from '@storybook/addon-knobs'; import React from 'react'; import { textColors } from '../../tooling/colors'; import Button from '../Button/Button'; @@ -12,6 +12,7 @@ export default { export const Default = () => { const color = select('color', textColors, 'primary'); const type = select('type', ['spin', 'border', 'grow'], Spinner.default); + const label = text('label', 'loading'); return (
@@ -36,6 +37,16 @@ export const Default = () => {

text-{color}:

+ +
+

+ ...and accept a label prop for accessibility by screen-readers (default to + 'loading'):{' '} +

+

+ {' '} + {' '} +

); }; diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx index 73a8aba8d..401c80e16 100644 --- a/src/components/Spinner/Spinner.tsx +++ b/src/components/Spinner/Spinner.tsx @@ -2,13 +2,18 @@ import React from 'react'; import { Spinner, SpinnerProps } from 'reactstrap'; import ApmSpinner from './ApmSpinner'; -const SpinnerWrapper = ({ type, ...props }: SpinnerProps) => - type === 'spin' ? : ; +const SpinnerWrapper = ({ type, label, ...props }: SpinnerProps) => + type === 'spin' ? ( + + ) : ( + + ); SpinnerWrapper.defaultProps = { // TODO: update, Spinner doesn't contain the defaultProps types so we cast as any ...(Spinner as any).defaultProps, type: 'spin', + label: 'loading', }; SpinnerWrapper.displayName = 'Spinner';