Content Embed

// src/components/patterns/content-embed/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /patterns/content-embed
additionalProperties: false
required:
  - type
properties:
  type:
    type: string
    enum:
      - embed
      - iframe
      - map_box
  headline:
    type: string
  embed:
    type: string
    format: html
  iframe:
    $ref: /elements/iframe
  as_element:
    type: boolean

// src/components/patterns/content-embed/mocks.yaml

$hidden: true
$variants:
  - $name: iFrame issuu
    type: iframe
    iframe:
      $ref: elements/iframe#issuu
  - $name: with max-width
    type: iframe
    iframe:
      $ref: elements/iframe#with-max-width
  - $name: without own container
    type: iframe
    iframe:
      $ref: elements/iframe#issuu
    as_element: true
  - $name: iFrame Vimeo
    type: iframe
    iframe:
      $ref: elements/iframe#vimeo
  - $name: Twitter Embed
    type: embed
    embed: >-
      <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Watching the
      cable management in progress is a feast for the eyes. <a
      href="https://twitter.com/hashtag/cabling?src=hash&amp;ref_src=twsrc%5Etfw">#cabling</a>
      <a
      href="https://twitter.com/hashtag/cablemanagement?src=hash&amp;ref_src=twsrc%5Etfw">#cablemanagement</a>
      <a
      href="https://t.co/WkJJZyQXEC">pic.twitter.com/WkJJZyQXEC</a></p>&mdash;
      CDN77.com (@CDN77com) <a
      href="https://twitter.com/CDN77com/status/1413091637232869381?ref_src=twsrc%5Etfw">July
      8, 2021</a></blockquote> <script async
      src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  - $name: youtube with image overlay
    type: iframe
    iframe:
      $ref: elements/iframe#with-max-width
  - $name: spotify with custom aspect ratio
    type: iframe
    iframe:
      $ref: elements/iframe#spotify
      width: 300
      height: 380
  - $name: content with headline
    headline: Content Embed with Headline
    type: embed
    embed: >-
      <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Watching the
      cable management in progress is a feast for the eyes. <a
      href="https://twitter.com/hashtag/cabling?src=hash&amp;ref_src=twsrc%5Etfw">#cabling</a>
      <a
      href="https://twitter.com/hashtag/cablemanagement?src=hash&amp;ref_src=twsrc%5Etfw">#cablemanagement</a>
      <a
      href="https://t.co/WkJJZyQXEC">pic.twitter.com/WkJJZyQXEC</a></p>&mdash;
      CDN77.com (@CDN77com) <a
      href="https://twitter.com/CDN77com/status/1413091637232869381?ref_src=twsrc%5Etfw">July
      8, 2021</a></blockquote> <script async
      src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

// src/components/patterns/content-embed/content-embed.html.twig

<div class="ContentEmbed{% if not as_element %} ContentEmbed--component u-container u-grid{% endif %}">
  <div class="ContentEmbed-inner">
    {% if headline %}
      <h2> {{ headline }}</h2>
    {% endif %}

    {% if type == "embed" %}
      {{ embed|raw }}
    {% else %}
      {% include "@elements/iframe/iframe.html.twig" with iframe|merge({type: type}) only %}
    {% endif %}
  </div>
</div>