-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ Adding a new loading indicator component
- Loading branch information
1 parent
8ae4d15
commit f4bd376
Showing
19 changed files
with
574 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -22,3 +22,5 @@ bundle-analysis** | |
|
|
||
| storybook-static | ||
| build-storybook.log | ||
|
|
||
| debug.log | ||
87 changes: 87 additions & 0 deletions
87
packages/documentation/components/loading-indicator/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { faBarsProgress } from '@fortawesome/free-solid-svg-icons'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import React from 'react'; | ||
| import DemoPageRenderer from '../../common/demo-page-renderer'; | ||
|
|
||
| const Widgets = React.lazy(() => import('./widgets')); | ||
|
|
||
| const Description = ( | ||
| <div> | ||
| <p> | ||
| A loading indicator component is a visual element that is commonly used in | ||
| user interfaces to indicate that a process or action is taking place in | ||
| the background, and the user needs to wait for the process to complete | ||
| before they can interact with the interface. | ||
| </p> | ||
| </div> | ||
| ); | ||
|
|
||
| function menu() { | ||
| return ( | ||
| <DemoPageRenderer | ||
| tabTitles={['Examples', 'Properties', 'Stackblitz']} | ||
| stackBlitzCodes={['react-ts-gxoozp']} | ||
| title="Loading Indicator" | ||
| description={Description} | ||
| sourceId="loading-indicator/loading-indicator.tsx" | ||
| editId="loading-indicator" | ||
| pageIcon={<FontAwesomeIcon icon={faBarsProgress} size="2x" />} | ||
| features={[ | ||
| 'Customizable shape,speed and size', | ||
| 'Customizable number of items', | ||
| 'RTL support', | ||
| ]} | ||
| properties={[ | ||
| { | ||
| default: 3, | ||
| description: 'Number of items in the loading indicator', | ||
| name: 'count', | ||
| optional: true, | ||
| type: 'Number', | ||
| }, | ||
| { | ||
| default: 'square', | ||
| description: | ||
| 'Shape of the loading indicator. can be <code>square</code> or <code>circle</code>', | ||
| name: 'shape', | ||
| optional: true, | ||
| type: 'String', | ||
| }, | ||
| { | ||
| default: 'false', | ||
| description: 'Direction of the loading indicator', | ||
| name: 'rtl', | ||
| optional: true, | ||
| type: 'Boolean', | ||
| }, | ||
| { | ||
| default: 'slow', | ||
| description: | ||
| 'Speed of the loading indicator. can be <code>slow</code>, <code>normal</code> or <code>fast</code>', | ||
| name: 'speed', | ||
| optional: true, | ||
| type: 'String', | ||
| }, | ||
| { | ||
| default: 'sm', | ||
| description: | ||
| 'Size of the loading indicator. can be <code>sm</code>, <code>md</code> or <code>lg</code>', | ||
| name: 'size', | ||
| optional: true, | ||
| type: 'String', | ||
| }, | ||
| { | ||
| default: '0', | ||
| description: | ||
| 'Custom size of the loading indicator. Allows to set a custom size in pixels', | ||
| name: 'customSize', | ||
| optional: true, | ||
| type: 'Number', | ||
| }, | ||
| ]} | ||
| demoWidget={<Widgets />} | ||
| ></DemoPageRenderer> | ||
| ); | ||
| } | ||
|
|
||
| export default menu; |
15 changes: 15 additions & 0 deletions
15
packages/documentation/components/loading-indicator/widget-variants.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { LoadingIndicator } from '../../../lib/components'; | ||
|
|
||
| export const Default = <LoadingIndicator />; | ||
|
|
||
| export const RTL = <LoadingIndicator count={4} rtl />; | ||
|
|
||
| export const CircleShape = <LoadingIndicator shape="circle" />; | ||
|
|
||
| export const CustomSpeed = <LoadingIndicator speed="fast" />; | ||
|
|
||
| export const CustomSize = <LoadingIndicator size="lg" />; | ||
|
|
||
| export const FineGrainedSize = <LoadingIndicator customSize={10} />; | ||
|
|
||
| export const LoadingIndicatorCount = <LoadingIndicator count={7} />; |
117 changes: 117 additions & 0 deletions
117
packages/documentation/components/loading-indicator/widgets.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import { BlockQuote, Section, Text } from '../../../lib/components'; | ||
| import { DemoWidget } from '../../common/demo-widget'; | ||
| import { | ||
| CircleShape, | ||
| CustomSize, | ||
| CustomSpeed, | ||
| Default, | ||
| FineGrainedSize, | ||
| LoadingIndicatorCount, | ||
| RTL, | ||
| } from './widget-variants'; | ||
|
|
||
| function Widgets() { | ||
| return ( | ||
| <div className="rc-demo-widgets"> | ||
| <Section size="md" title="Default"> | ||
| <DemoWidget | ||
| name="LoadingIndicator" | ||
| width={200} | ||
| style={{ marginLeft: '2rem' }} | ||
| > | ||
| {Default} | ||
| </DemoWidget> | ||
| </Section> | ||
| <Section size="md" title="Shape"> | ||
| <Text> | ||
| The shape of the loading indicator can be changed to circle by passing | ||
| the | ||
| <code>shape</code> prop with value <code>circle</code>. The default | ||
| shape is square. | ||
| </Text> | ||
| <DemoWidget | ||
| name="LoadingIndicator" | ||
| width={200} | ||
| style={{ marginLeft: '2rem' }} | ||
| > | ||
| {CircleShape} | ||
| </DemoWidget> | ||
| </Section> | ||
| <Section size="md" title="Speed"> | ||
| <Text> | ||
| The speed of the loading indicator can be changed by passing the | ||
| <code>speed</code> prop with value <code>slow</code>,{' '} | ||
| <code>normal</code> or <code>fast</code>. The default speed is normal. | ||
| </Text> | ||
| <DemoWidget | ||
| name="LoadingIndicator" | ||
| width={200} | ||
| style={{ marginLeft: '2rem' }} | ||
| > | ||
| {CustomSpeed} | ||
| </DemoWidget> | ||
| </Section> | ||
| <Section size="md" title="Custom length"> | ||
| <Text> | ||
| The number of items in the loading indicator can be changed by passing | ||
| the <code>count</code> prop with a number value. The default count is{' '} | ||
| <code>3</code>. | ||
| </Text> | ||
| <DemoWidget | ||
| name="LoadingIndicator" | ||
| width={200} | ||
| style={{ marginLeft: '2rem' }} | ||
| > | ||
| {LoadingIndicatorCount} | ||
| </DemoWidget> | ||
| </Section> | ||
| <Section size="md" title="Right to Left"> | ||
| <Text> | ||
| The loading indicator can be displayed from right to left by passing | ||
| the <code>rtl</code>. The default direction is left to right. | ||
| </Text> | ||
| <DemoWidget | ||
| name="LoadingIndicator" | ||
| width={200} | ||
| style={{ marginLeft: '2rem' }} | ||
| > | ||
| {RTL} | ||
| </DemoWidget> | ||
| </Section> | ||
| <Section size="md" title="Size"> | ||
| <Text> | ||
| Customize the size of the loading indicator by passing the{' '} | ||
| <code>size</code> prop with value <code>sm</code>, <code>md</code> or{' '} | ||
| <code>lg</code>. The default size is <code>sm</code>. | ||
| </Text> | ||
| <BlockQuote> | ||
| The sizes can be managed by adjusting the iconSizes settings in the | ||
| ThemeProvider | ||
| </BlockQuote> | ||
| <DemoWidget | ||
| name="LoadingIndicator" | ||
| width={200} | ||
| style={{ marginLeft: '2rem' }} | ||
| > | ||
| {CustomSize} | ||
| </DemoWidget> | ||
| </Section> | ||
| <Section size="md" title="Custom size"> | ||
| <Text> | ||
| If you want to take complete control over the size of the loading | ||
| indicator, you can pass the <code>customSize</code> prop with a number | ||
| value (pixels). This will override the <code>size</code> prop. | ||
| </Text> | ||
| <DemoWidget | ||
| name="LoadingIndicator" | ||
| width={200} | ||
| style={{ marginLeft: '2rem' }} | ||
| > | ||
| {FineGrainedSize} | ||
| </DemoWidget> | ||
| </Section> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Widgets; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
f4bd376There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
react-creme – ./
react-creme-prabhuignoto.vercel.app
react-creme.vercel.app
react-creme.prabhumurthy.com
react-creme-git-master-prabhuignoto.vercel.app