// src/components/patterns/cloud-services/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/cloud-services
additionalProperties: false
type: object
required:
  - services_section_label
  - services
  - welcome_message
properties:
  services_section_label:
    type: string
  services:
    type: array
    items:
      type: string
      format: html
      description: /patterns/cloud-services/card-service
  welcome_message:
    type: object
    additionalProperties: false
    required:
      - message
    properties:
      heading_id:
        type: string
      message:
        type: string

// src/components/patterns/cloud-services/mocks.yaml

services_section_label: Available cloud services
welcome_message:
  heading_id: welcome-message-heading
  message: Always good afternoon, Tiziana.
services:
  - $tpl: /patterns/cloud-services/card-service
    $ref: /patterns/cloud-services/card-service#default
  - $tpl: /patterns/cloud-services/card-service
    $ref: /patterns/cloud-services/card-service#with-support-link
$variants:
  - $name: four-up
    services:
      - $tpl: /patterns/cloud-services/card-service
        $ref: /patterns/cloud-services/card-service#with-support-link
        cta:
          label: Your offers
          url: /offers
        descrition: Configure products and create offers.
        heading: Composer
      - $tpl: /patterns/cloud-services/card-service
        $ref: /patterns/cloud-services/card-service#with-support-link
        descrition: Manage orders and complaints.
        heading: Webmonitor
        cta:
          label: Monitor status
          url: /monitor

// src/components/patterns/cloud-services/cloud-services.twig

{{ attach_library('finstral_global/pattern-cloud-services') }}

{% set heading_id = "cloud-services-" ~ random() ~ "-heading" %}

<div class="CloudServices u-container u-breakout">
  {% include "@patterns/cloud-services/welcome-message/welcome-message.twig" with welcome_message only %}

	{% if services is not empty %}
		<section aria-labelledby="{{ heading_id }}" class="CloudServices-wrapper">
			<span id="{{ heading_id }}" hidden>{{ services_section_label }}</span>
			<ul class="CloudServices-services">
				{% for service in services %}
					<li>{{ service }}</li>
				{% endfor %}
			</ul>
		</section>
	{% endif %}
</div>