@shopify/polaris/dist/esm/components/AccountConnection/AccountConnection.js

Shopify’s product component library

import React$1 from 'react';
import { Avatar as Avatar$1 } from '../Avatar/Avatar.js';
import { TextStyle as TextStyle$1 } from '../TextStyle/TextStyle.js';
import { buttonFrom } from '../Button/utils.js';
import { Stack as Stack$1 } from '../Stack/Stack.js';
import { Card as Card$1 } from '../Card/Card.js';
import { SettingAction as SettingAction$1 } from '../SettingAction/SettingAction.js';
import styles from './AccountConnection.scss.js';

function AccountConnection({
  connected = false,
  action,
  avatarUrl,
  accountName = '',
  title,
  details,
  termsOfService
}) {
  var initials = accountName ? accountName.split(/\s+/).map(name => name[0]).join('') : undefined;
  var avatarMarkup = connected ? /*#__PURE__*/React$1.createElement(Avatar$1, {
    accessibilityLabel: "",
    name: accountName,
    initials: initials,
    source: avatarUrl
  }) : null;
  var titleMarkup = null;

  if (title) {
    titleMarkup = /*#__PURE__*/React$1.createElement("div", null, title);
  } else if (accountName) {
    titleMarkup = /*#__PURE__*/React$1.createElement("div", null, accountName);
  }

  var detailsMarkup = details ? /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(TextStyle$1, {
    variation: "subdued"
  }, details)) : null;
  var termsOfServiceMarkup = termsOfService ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.TermsOfService
  }, termsOfService) : null;
  var actionElement = action ? buttonFrom(action, {
    primary: !connected
  }) : null;
  return /*#__PURE__*/React$1.createElement(Card$1, {
    sectioned: true
  }, /*#__PURE__*/React$1.createElement(SettingAction$1, {
    action: actionElement
  }, /*#__PURE__*/React$1.createElement(Stack$1, null, avatarMarkup, /*#__PURE__*/React$1.createElement(Stack$1.Item, {
    fill: true
  }, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Content
  }, titleMarkup, detailsMarkup)))), termsOfServiceMarkup);
}

export { AccountConnection };