Custom Title

import _ from 'lodash'; import React, { useState, useEffect } from 'react'; import { Story, Meta } from '@storybook/react'; import { ILoadingIndicatorProps } from './LoadingIndicator'; import Button from '../Button/Button'; import LoadingIndicator from './LoadingIndicator'; import BarChart from '../BarChart/BarChart'; import LoadingIcon from '../Icon/LoadingIcon/LoadingIcon'; export default { title: 'Loading Indicator/LoadingIndicator', component: LoadingIndicator, parameters: { docs: { description: { component: LoadingIndicator.peek.description, }, }, }, } as Meta; /* Interactive */ export const Interactive: Story = (args) => { const dates = ['2015-01-01', '2015-01-02', '2015-01-03', '2015-01-04']; const getData = () => _.map(dates, (date) => ({ x: date, y: _.random(1, 5) })); const [state, setState] = useState({ isLoading: true, data: _.map(dates, (date) => ({ x: date, y: 0 })), overlayKind: 'dark', }); const handleOverlayKindClick = () => { setState({ ...state, overlayKind: state.overlayKind === 'dark' ? 'light' : 'dark', }); }; useEffect(() => { const removeIsLoading = setTimeout( () => setState({ ...state, isLoading: false, data: getData() }), 1000 ); return () => { clearTimeout(removeIsLoading); }; }, []); return ( {/* */} ); // }, }; /* Basic */ export const Basic: Story = (args) => { return ( ); }; /* Custom Message */ export const CustomMessage: Story = (args) => { const { LoadingMessage, LoadingMessage: { Title, Body, Icon }, } = LoadingIndicator; return (

Custom Title Custom Body } Title='Enhancing...' Body='Please wait' />

); }; /* No Title */ export const NoTitle: Story = (args) => { return ( ); }; NoTitle.args = { isLoading: true, }; /* No Overlay */ export const NoOverlay: Story = (args) => { return ( ); }; NoOverlay.args = { hasOverlay: false, isLoading: true, }; /* Dark Overlay */ export const DarkOverlay: Story = (args) => { return ( ); }; DarkOverlay.args = { isLoading: true, overlayKind: 'dark', };