Sha256: 638860a72dcc16324784ca041ea85e67903b13440b436a9da2d526918fddb3e5

Contents?: true

Size: 1.12 KB

Versions: 294

Compression:

Stored size: 1.12 KB

Contents

import React from 'react'
import classnames from 'classnames'

import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
import { globalProps } from '../utilities/globalProps'

import Body from '../pb_body/_body'
import Icon from '../pb_icon/_icon'

type LoadingInlineProps = {
  align?: "left" | "center" | "right",
  aria?: { [key: string]: string },
  className?: string,
  data?: { [key: string]: string },
  id?: string,
}

const LoadingInline = (props: LoadingInlineProps) => {
  const {
    align = 'left',
    aria = {},
    className,
    data = {},
    id,
  } = props

  const ariaProps = buildAriaProps(aria)
  const dataProps = buildDataProps(data)
  const classes = classnames(
    buildCss(`pb_loading_inline_kit_${align}`),
    globalProps(props),
    className
  )

  return (
    <div
      {...ariaProps}
      {...dataProps}
      className={classes}
      id={id}
    >
      <Body color="light">
        <Icon
          aria={{ label: 'loading icon' }}
          fixedWidth
          icon="spinner"
          pulse
        />
        {' Loading'}
      </Body>
    </div>
  )
}

export default LoadingInline

Version data entries

294 entries across 294 versions & 1 rubygems

Version Path
playbook_ui-12.16.0.pre.alpha.PLAY693tooltipwrongbg558 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.16.0.pre.alpha.PLAY693tooltipwrongbg547 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.16.0.pre.alpha.PLAY693tooltipwrongbg532 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.16.0.pre.alpha.lightboxcurrentphotoprop531 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.16.0.pre.alpha.tiptaptestingpart1528 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.16.0 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.15.0 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.14.0.pre.alpha.lightboxcurrentphotoprop460 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown457 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.14.0 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.13.0.pre.alpha.PLAY693tooltipwrongbg440 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.13.0.pre.alpha.addingProductTokens439 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.13.0.pre.alpha.PLAY705phonenumberkit438 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.13.0 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.12.0 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.11.0 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.10.0.pre.alpha.PLAY705phonenumberreturn372 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
playbook_ui-12.10.0.pre.alpha.PLAY677richtexteditorts370 app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx