Plain UI Components

Plain UI components can be used interchangeably in both Customer Timeline Entries and Customer Cards. This allows you to reuse components and code across both areas.

A few technical notes:

• All component properties are prefixed with their component name to disambiguate the properties in the union.
• In the Core API GraphQL schema we have two separate unions for Custom Timeline Entry Components and Customer Card Components, but both unions share the same types therefore they can be treated as the same.
• The GraphQL schema types are:
  • CustomTimelineEntryComponent union
  • CustomerCardComponent union
  • ComponentInput input type

Example cards and components can be found here:

• GitHub repo: team-plain/example-customer-cards
• JSON API URL: https://example-customer-cards.plain.com/

Badge

Properties:

• badgeLabel: the text that should be displayed on the badge
• badgeColor: one of GREY, GREEN, YELLOW, RED, BLUE

GraphQL:

• Type: ComponentBadge
• Input: ComponentBadgeInput

Component JSON for screenshot

{
  "componentBadge": {
    "badgeLabel": "Subscribed",
    "badgeColor": "GREEN"
  }
}

Container

Properties:

• containerContent (min 1): an array of container components

The following components can be used in a row:

• Badge
• Copy Button
• Divider
• Link Button
• Row
• Spacer
• Text

GraphQL:

• Type: ComponentContainer
• Input: ComponentContainerInput

Component JSON for screenshot

{
  "componentContainer": {
    "containerContent": [
      {
        "componentText": {
          "text": "Container content"
        }
      }
    ]
  }
}

Copy Button

Properties:

• copyButtonTooltipLabel (optional): the text that should be displayed on hover. Defaults to the value if not provided.
• copyButtonValue: the value that should be copied to the user's clipboard after clicking the button

GraphQL:

• Type: ComponentCopyButton
• Input: ComponentCopyButtonInput

Component JSON for screenshot

{
  "componentCopyButton": {
    "copyButtonTooltipLabel": "Order ID",
    "copyButtonValue": "2a8f2dae-3580-402b-aa0a-243efae55e39"
  }
}

Divider

Properties:

• dividerSpacingSize (optional): the spacing the divider should have before and after the component. One of XS, S, M, L, XL. Defaults to S.

GraphQL:

• Type: ComponentDivider
• Input: ComponentDividerInput

Component JSON for screenshot

[
  {
    "componentText": {
      "text": "Content before an XS divider"
    }
  },
  {
    "componentDivider": {
      "dividerSpacingSize": "XS"
    }
  },
  {
    "componentText": {
      "text": "Content before an S divider"
    }
  },
  {
    "componentDivider": {
      "dividerSpacingSize": "S"
    }
  },
  {
    "componentText": {
      "text": "Content before an M divider"
    }
  },
  {
    "componentDivider": {
      "dividerSpacingSize": "M"
    }
  },
  {
    "componentText": {
      "text": "Content before an L divider"
    }
  },
  {
    "componentDivider": {
      "dividerSpacingSize": "L"
    }
  },
  {
    "componentText": {
      "text": "Content before an XL divider"
    }
  },
  {
    "componentDivider": {
      "dividerSpacingSize": "XL"
    }
  },
  {
    "componentText": {
      "text": "Content after an XL divider"
    }
  }
]

Link Button

Properties:

• linkButtonLabel: the text of the button
• linkButtonUrl: the URL the button should open in a new tab

GraphQL:

• Type: ComponentLinkButton
• Input: ComponentLinkButtonInput

Component JSON for screenshot

{
  "componentLinkButton": {
    "linkButtonLabel": "Open in Admin Portal",
    "linkButtonUrl": "https://example.com"
  }
}

Row

Properties:

• rowMainContent (min 1): an array of row components
• rowAsideContent: an array of row components

The following components can be used in a row:

• Badge
• Copy Button
• Divider
• Link Button
• Spacer
• Text

GraphQL:

• Type: ComponentRow
• Input: ComponentRowInput

Component JSON for screenshot

[
  {
    "componentRow": {
      "rowMainContent": [
        {
          "componentText": {
            "text": "Membership"
          }
        }
      ],
      "rowAsideContent": [
        {
          "componentBadge": {
            "badgeLabel": "Premium plan",
            "badgeColor": "BLUE"
          }
        }
      ]
    }
  },
  {
    "componentSpacer": {
      "spacerSize": "S"
    }
  },
  {
    "componentRow": {
      "rowMainContent": [
        {
          "componentText": {
            "text": "Plan start date"
          }
        }
      ],
      "rowAsideContent": [
        {
          "componentText": {
            "text": "2022-10-03 14:12 BST"
          }
        }
      ]
    }
  },
  {
    "componentSpacer": {
      "spacerSize": "S"
    }
  },
  {
    "componentText": {
      "text": "Address",
      "textColor": "MUTED",
      "textSize": "S"
    }
  },
  {
    "componentRow": {
      "rowMainContent": [
        {
          "componentText": {
            "text": "123 Example Street, Fakerton, FA6 4UX"
          }
        }
      ],
      "rowAsideContent": [
        {
          "componentCopyButton": {
            "copyButtonTooltipLabel": "Copy address",
            "copyButtonValue": "123 Example Street, Fakerton, FA6 4UX"
          }
        }
      ]
    }
  }
]

Spacer

Properties:

• spacerSize: the amount of space the component should take up. One of XS, S, M, L, XL.

GraphQL:

• Type: ComponentSpacer
• Input: ComponentSpacerInput

Component JSON for screenshot

[
  {
    "componentText": {
      "text": "Content before an XS spacer"
    }
  },
  {
    "componentSpacer": {
      "spacerSize": "XS"
    }
  },
  {
    "componentText": {
      "text": "Content before an S spacer"
    }
  },
  {
    "componentSpacer": {
      "spacerSize": "S"
    }
  },
  {
    "componentText": {
      "text": "Content before an M spacer"
    }
  },
  {
    "componentSpacer": {
      "spacerSize": "M"
    }
  },
  {
    "componentText": {
      "text": "Content before an L spacer"
    }
  },
  {
    "componentSpacer": {
      "spacerSize": "L"
    }
  },
  {
    "componentText": {
      "text": "Content before an XL spacer"
    }
  },
  {
    "componentSpacer": {
      "spacerSize": "XL"
    }
  },
  {
    "componentText": {
      "text": "Content after an XL spacer"
    }
  }
]

Text

note

This component's text property is rendered as markdown in our support app. See PlainText if you want to render plain text.

Properties:

• text: the text
• textSize (optional): one of NORMAL, MUTED, SUCCESS, WARNING, ERROR, defaults to NORMAL
• textColor (optional): one of S, M, L, defaults to M

GraphQL:

• Type: ComponentText
• Input: ComponentTextInput

Component JSON for screenshot

[
  {
    "componentText": {
      "text": "Small text",
      "textSize": "S"
    }
  },
  {
    "componentText": {
      "text": "Medium text",
      "textSize": "M"
    }
  },
  {
    "componentText": {
      "text": "Large text",
      "textSize": "L"
    }
  },
  {
    "componentText": {
      "text": "Normal text",
      "textColor": "NORMAL"
    }
  },
  {
    "componentText": {
      "text": "Muted text",
      "textColor": "MUTED"
    }
  },
  {
    "componentText": {
      "text": "Success text",
      "textColor": "SUCCESS"
    }
  },
  {
    "componentText": {
      "text": "Warning text",
      "textColor": "WARNING"
    }
  },
  {
    "componentText": {
      "text": "Error text",
      "textColor": "ERROR"
    }
  }
]

Plain Text

note

This component's plainText property is rendered as plain text in our support app. See Text if you want to render the text as markdown.

Properties:

• plainText: the plain text
• plainTextSize (optional): one of NORMAL, MUTED, SUCCESS, WARNING, ERROR, defaults to NORMAL
• plainTextColor (optional): one of S, M, L, defaults to M

GraphQL:

• Type: ComponentPlainText
• Input: ComponentPlainTextInput

Component JSON for screenshot

[
  {
    "componentPlainText": {
      "plainText": "Small text",
      "plainTextSize": "S"
    }
  },
  {
    "componentPlainText": {
      "plainText": "Medium text",
      "plainTextSize": "M"
    }
  },
  {
    "componentPlainText": {
      "plainText": "Large text",
      "plainTextSize": "L"
    }
  },
  {
    "componentPlainText": {
      "plainText": "Normal text",
      "plainTextColor": "NORMAL"
    }
  },
  {
    "componentPlainText": {
      "plainText": "Muted text",
      "plainTextColor": "MUTED"
    }
  },
  {
    "componentPlainText": {
      "plainText": "Success text",
      "plainTextColor": "SUCCESS"
    }
  },
  {
    "componentPlainText": {
      "plainText": "Warning text",
      "plainTextColor": "WARNING"
    }
  },
  {
    "componentPlainText": {
      "plainText": "Error text",
      "plainTextColor": "ERROR"
    }
  }
]