name: Summary card
description: An extension of the Summary list component. It can be used where there are multiple groups of lists to be displayed in their own discrete sections.
accessibility_criteria: |
  - accept focus
  - be focusable with a keyboard
  - be usable with a keyboard
  - indicate when it has focus
uses_component_wrapper_helper: true
examples:
  default:
    data:
      title: Title
      rows:
        - key: key one
          value: value1
        - key: key two
          value: value2
  with_custom-id:
    data:
      id: custom_id
      title: Title
      rows:
        - key: key one
          value: value1
        - key: key two
          value: value2
  with_actions:
    data:
      title: Title
      rows:
        - key: key one
          value: value1
        - key: key two
          value: value2
      summary_card_actions:
        - label: View
          href: "#1"
        - label: Edit
          href: "#2"
  with_destructive_action:
    data:
      title: Title
      rows:
        - key: key one
          value: value1
        - key: key two
          value: value2
      summary_card_actions:
        - label: Delete
          href: "#1"
          destructive: true

  with_row_actions:
    data:
      title: Title
      rows:
        - key: key one
          value: value1
          actions:
            - label: View
              href: "#1"
            - label: Edit
              href: "#2"
        - key: key two
          value: value2
          actions:
            - label: View
              href: "#1"
            - label: Edit
              href: "#2"
  with_row_destructive_action:
    data:
      title: Title
      rows:
        - key: key
          value: value
          actions:
            - label: View
              href: "#1"
            - label: Edit
              href: "#2"
            - label: Delete
              href: "#3"
              destructive: true
  with_row_action_that_opens_in_new_tab:
    data:
      title: Title
      rows:
        - key: key
          value: value
          actions:
            - label: View
              href: "#1"
              opens_in_new_tab: true
  with_row_data_attributes:
    description: |
      Data attributes can be passed to individual rows within the component as shown.
    data:
      title: Title
      rows:
        - key: key one
          value: value1
          data:
            module: "something"