ChurchCenterStatus

View Source

render(
  <ChurchCenterStatus
    ccAppEnabled
    ccPublishingEnabled
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled
    ccPublishingEnabled
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled={false}
    ccPublishingEnabled
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled={false}
    ccPublishingEnabled
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled={false}
    ccPublishingEnabled
    ccWebEnabled={false}
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled={false}
    ccPublishingEnabled
    ccWebEnabled={false}
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled
    ccPublishingEnabled={false}
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled
    ccPublishingEnabled={false}
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    settingsUrl="#settings"
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled
    ccPublishingEnabled={false}
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    renderPopoverFooter={(buttonProps) => (
      <Button title="Another link!" {...buttonProps} />
    )}
    settingsUrl="#settings"
    showSettingsLink={false}
  />
)

render(
  <ChurchCenterStatus
    ccAppEnabled
    ccPublishingEnabled={false}
    ccWebEnabled
    description="On Church Center, people can browse and register for events."
    destinationLabel="event list"
    productUrl="#product"
    renderPopoverFooter={(buttonProps) => (
      <Button title="Another link!" {...buttonProps} />
    )}
    settingsUrl="#settings"
    showSettingsLink={false}
  />
)

Custom icons

To use the Planning Center General set of icons, import the general set to your theme and define the overrides with the icons prop.

To learn how to import the general set to your theme, see Grouped Icon Sets.

render(
  <ThemeProvider theme={{ icons }}>
    <StackView axis="horizontal" spacing={2}>
      <ChurchCenterStatus
        ccAppEnabled
        ccPublishingEnabled
        ccWebEnabled={false}
        description="On Church Center, people can browse and register for events."
        destinationLabel="event list"
        icons={{
          check: 'general.check',
          exclamationTriangle: 'general.exclamationTriangle',
          external: 'general.newWindow',
          x: 'general.x',
        }}
        productUrl="#product"
        settingsUrl="#settings"
      />
      <ChurchCenterStatus
        ccAppEnabled
        ccPublishingEnabled={false}
        ccWebEnabled
        description="On Church Center, people can browse and register for events."
        destinationLabel="event list"
        icons={{
          check: 'general.check',
          exclamationTriangle: 'general.exclamationTriangle',
          external: 'general.newWindow',
          x: 'general.x',
        }}
        productUrl="#product"
        settingsUrl="#settings"
      />
    </StackView>
  </ThemeProvider>
)

render(
  <ThemeProvider theme={{ icons }}>
    <StackView axis="horizontal" spacing={2}>
      <ChurchCenterStatus
        ccAppEnabled
        ccPublishingEnabled
        ccWebEnabled={false}
        description="On Church Center, people can browse and register for events."
        destinationLabel="event list"
        icons={{
          check: 'general.check',
          exclamationTriangle: 'general.exclamationTriangle',
          external: 'general.newWindow',
          x: 'general.x',
        }}
        productUrl="#product"
        settingsUrl="#settings"
      />
      <ChurchCenterStatus
        ccAppEnabled
        ccPublishingEnabled={false}
        ccWebEnabled
        description="On Church Center, people can browse and register for events."
        destinationLabel="event list"
        icons={{
          check: 'general.check',
          exclamationTriangle: 'general.exclamationTriangle',
          external: 'general.newWindow',
          x: 'general.x',
        }}
        productUrl="#product"
        settingsUrl="#settings"
      />
    </StackView>
  </ThemeProvider>
)

Props

Accepts StackView props.

buttonPropsobject

Pass props to the Dropdown buttons.

ccAppEnabledboolean

Determines status of Church Center App.

ccPublishingEnabledboolean

Determines status of publishing to Church Center.

ccWebEnabledboolean

Determines status of Church Center Web.

descriptionstring

Renders a text description in popover when status is active.

destinationLabelstring

Renders a text for Church Center destination button (“Visit {destinationLabel}”).

disabledDescriptionstring

Renders a text description in popover when status is inactive.

dropdownPropsobject

Pass props to the Dropdown component.

iconsobject

Provide icon overrides for “check”, “exclamationTriangle”, “external”, and “x” icons.

productUrlstring

Where the browser should navigate when destination button is pressed.

renderPopoverFooterFunction

Render nodes at the end of the popover. buttonProps is passed as an argument and can be spread on any <Button /> component to match the style of the other popover links.

settingsUrlstring

Where the browser should navigate when settings button is pressed.

showSettingsLinkboolean

Toggle the settings link display.

Custom icons
Props

PreviousCard.Section NextCollapse