services

// src/components/patterns/profile-edit/services/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: patterns/profile-edit/services
type: object
required:
  - services
additionalProperties: false
properties:
  services:
    type: array
    items:
      type: object
      properties:
        service:
          type: string
        status:
          type: string
          enum:
            - active
            - inactive

// src/components/patterns/profile-edit/services/mocks.yaml

services:
  - service: Contacts
    status: active
  - service: Composer
    status: active
  - service: Webmonitor
    status: inactive

// src/components/patterns/profile-edit/services/services.twig

<h2 class="u-typo-HeadlineM ProfileEditServices-title">{{ "profile_edit.services.title"|t }}</h2>

<ul class="ProfileEditServices">
	{% for item in services %}
		<li class="ProfileEditServices-item">
			<h3 class="u-typo-HeadlineS">{{ item.service }}</h3>
			<span class="ProfileEditServices-status">
				{% include "@elements/icon/icon.twig" with {
					classes: ['ProfileEditServices-icon--' ~ item.status],
					name: item.status == "active" ? "check_circle_filled" : "delete_filled"
				} only %}
				{{ ("profile_edit_services.status." ~ item.status)|t }}
			</span>
		</li>
	{% endfor %}
</ul>