feat(Loader): add component

Author: layershifter

docs/src/examples/components/Loader/Types/LoaderExample.tsx

@@ -0,0 +1,6 @@
+import { Loader } from '@stardust-ui/react'
+import * as React from 'react'
+
+const LoaderExample: React.FC = () => <Loader />
+
+export default LoaderExample

docs/src/examples/components/Loader/Types/LoaderExampleLabel.shorthand.tsx

@@ -0,0 +1,6 @@
+import { Loader } from '@stardust-ui/react'
+import * as React from 'react'
+
+const LoaderExampleLabel: React.FC = () => <Loader label="Loading..." />
+
+export default LoaderExampleLabel

docs/src/examples/components/Loader/Types/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const LoaderTypesExamples = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Loader"
+      description="A basic loader."
+      examplePath="components/Loader/Types/LoaderExample"
+    />
+    <ComponentExample
+      title="Label"
+      description="A loader can contain label."
+      examplePath="components/Loader/Types/LoaderExampleLabel"
+    />
+  </ExampleSection>
+)
+
+export default LoaderTypesExamples

docs/src/examples/components/Loader/Variations/LoaderExampleInline.tsx

@@ -0,0 +1,6 @@
+import { Loader } from '@stardust-ui/react'
+import * as React from 'react'
+
+const LoaderExampleInline: React.FC = () => <Loader inline />
+
+export default LoaderExampleInline

docs/src/examples/components/Loader/Variations/LoaderExampleLabelPosition.shorthand.tsx

@@ -0,0 +1,14 @@
+import { Grid, Loader } from '@stardust-ui/react'
+import * as React from 'react'
+
+const LoaderExampleLabel: React.FC = () => (
+  <Grid columns={2} variables={{ gridGap: '20px' }}>
+    <Loader label="At start" labelPosition="start" />
+    <Loader label="At end" labelPosition="end" />
+
+    <Loader label="At above" labelPosition="above" />
+    <Loader label="At below" labelPosition="below" />
+  </Grid>
+)
+
+export default LoaderExampleLabel

docs/src/examples/components/Loader/Variations/LoaderExampleSize.tsx

@@ -0,0 +1,16 @@
+import { Grid, Loader } from '@stardust-ui/react'
+import * as React from 'react'
+
+const LoaderExampleSize: React.FC = () => (
+  <Grid columns="3" variables={{ gridGap: '20px' }}>
+    <Loader size="smallest" />
+    <Loader size="smaller" />
+    <Loader size="small" />
+
+    <Loader size="large" />
+    <Loader size="larger" />
+    <Loader size="largest" />
+  </Grid>
+)
+
+export default LoaderExampleSize

docs/src/examples/components/Loader/Variations/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const LoaderTypesExamples = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Inline"
+      description="Loaders can appear inline with content."
+      examplePath="components/Loader/Variations/LoaderExampleInline"
+    />
+    <ComponentExample
+      title="Label Position"
+      description="A loader can contain label."
+      examplePath="components/Loader/Variations/LoaderExampleLabelPosition"
+    />
+    <ComponentExample
+      title="Size"
+      description="A basic loader."
+      examplePath="components/Loader/Variations/LoaderExampleSize"
+    />
+  </ExampleSection>
+)
+
+export default LoaderTypesExamples

docs/src/examples/components/Loader/index.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react'
+
+import Types from './Types'
+import Variations from './Variations'
+
+const LoaderExamples = () => (
+  <>
+    <Types />
+    <Variations />
+  </>
+)
+
+export default LoaderExamples

src/components/Animation/Animation.tsx

@@ -124,6 +124,7 @@ class Animation extends UIComponent<ReactPropsStrict<AnimationProps>, any> {
           style: { ...animationStyle, ...(child.props && child.props.style) },
         })
       : ''
+    console.log(animationStyle)
 
     return (
       <ElementType className={classes.root} {...rest}>

src/components/Loader/Loader.tsx

@@ -0,0 +1,75 @@
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+
+import {
+  UIComponent,
+  createShorthandFactory,
+  UIComponentProps,
+  commonPropTypes,
+  ColorComponentProps,
+} from '../../lib'
+import { defaultBehavior } from '../../lib/accessibility'
+import { Accessibility } from '../../lib/accessibility/types'
+import { ReactProps } from '../../../types/utils'
+import Slot from '../Slot/Slot'
+
+export type LoaderPosition = 'above' | 'below' | 'start' | 'end'
+export type LoaderSize =
+  | 'smallest'
+  | 'smaller'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'larger'
+  | 'largest'
+
+export interface LoaderProps extends UIComponentProps, ColorComponentProps {
+  /**
+   * Accessibility behavior if overridden by the user.
+   * @default defaultBehavior
+   */
+  accessibility?: Accessibility
+  labelPosition?: LoaderPosition
+  size?: LoaderSize
+}
+
+/**
+ * A Loader indicates a possible user action.
+ */
+class Loader extends UIComponent<ReactProps<LoaderProps>> {
+  static create: Function
+  static displayName = 'Loader'
+  static className = 'ui-loader'
+
+  static propTypes = {
+    ...commonPropTypes.createCommon({
+      children: false,
+      content: false,
+      color: true,
+    }),
+    accessibility: PropTypes.func,
+    labelPosition: PropTypes.oneOf(['above', 'below', 'start', 'end']),
+    size: PropTypes.oneOf(['smallest', 'smaller', 'small', 'medium', 'large', 'larger', 'largest']),
+  }
+
+  static defaultProps = {
+    accessibility: defaultBehavior,
+    labelPosition: 'below',
+    size: 'medium',
+  }
+
+  renderComponent({ ElementType, classes, accessibility, variables, styles, rest }) {
+    const { label } = this.props
+
+    return (
+      <ElementType className={classes.root} {...accessibility.attributes.root} {...rest}>
+        {Slot.create('', { defaultProps: { styles: styles.indicator } })}
+        {Slot.create(label, { defaultProps: { styles: styles.label } })}
+      </ElementType>
+    )
+  }
+}
+
+Loader.create = createShorthandFactory(Loader, 'content')
+
+export default Loader