// src/components/patterns/form-component/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/form-component
additionalProperties: false
type: object
required:
  - form
properties:
  form:
    type: string
    format: html
    description: /elements/form
  text_teaser:
    type: string
    format: html
    description: /patterns/text-teaser
  background_color:
    type: string
    description: 'Format: #rrggbb'

// src/components/patterns/form-component/mocks.yaml

form:
  $tpl: elements/form
  $ref: elements/form#initiative-application
  classes:
    - FormComponent-form
text_teaser:
  $tpl: patterns/text-teaser
  $ref: patterns/text-teaser#initiative-application
  element: true
  classes:
    - FormComponent-textTeaser
background_color: '#efeae5'

// src/components/patterns/form-component/form-component.twig

{{ attach_library('finstral_global/pattern-form-component') }}

<div
	class="FormComponent u-container u-grid u-breakout"
	{% if background_color %} style="--FormComponent-background: {{ background_color }};"{% endif %}
>
	{% if text_teaser %}
		{{ text_teaser|mira({
			classes: ["FormComponent-textTeaser"],
			element: true
		}) }}
	{% endif %}

	{{ form|mira({
		classes: ["FormComponent-form"]
	}) }}
</div>