Issue #3390334 by finnsky, snig, smustgrave, e0ipso, jidrone: Create new Badge component for recipe

# This is so your IDE knows about the syntax for fixes and autocomplete.

$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json

# The human readable name.

name: Umami Badge

# Status can be: "experimental", "stable", "deprecated", "obsolete".

status: experimental

# Schema for the props. We support www.json-schema.org. Learn more about the

# syntax there.

props:

  # Props are always an object with keys. Each key is a variable in your

  # component template.

  type: object

  properties:

    attributes:

      type: Drupal\Core\Template\Attribute

      title: Attributes

      description: Wrapper attributes.

    icon:

      type: string

      description: Icon Name

      enum:

        - knife

        - timer

        - serves

        - difficulty

    label:

      type: string

      description: Label text

slots:

  text:

    type: string

    description: Text

.umami-badge__container {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}

/* Large */

@media screen and (min-width: 60rem) {  /* 960px */

  .umami-badge__container {

    flex-direction: column;

    gap: 0;

    width: 100%;

    padding-block: 0.96em;

  }

}

.umami-badge__icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

}

/* Large */

@media screen and (min-width: 60rem) {  /* 960px */

  .umami-badge__icon {

    align-items: start;

    width: 56px;

    height: 64px;

  }

}

.umami-badge__label {

  font-weight: bold;

}

.umami-badge__label::after {

  content: ":";

}

<div{{attributes.addClass('umami-badge')}}>

  <div class="umami-badge__container">

    {% if icon %}

      <div class="umami-badge__icon">

        {{ source(componentMetadata.path ~ '/icons/' ~ icon|default('knife') ~ '.svg') }}

      </div>

    {% endif %}

    {% if label %}

      <div class="umami-badge__label">{{~ label ~}}</div>

    {% endif %}

    {% block text %}{% endblock %}

  </div>

</div>

<svg xmlns="http://www.w3.org/2000/svg" fill="#008068" viewBox="0 0 600 600"><path d="M299.29 118.57c-120.29 0-217.86 97.61-217.86 217.86a215.64 215.64 0 0 0 48.81 137.22 13.8 13.8 0 0 0 19.76 2.12c5.66-5 7.07-14.15 2.12-19.81a187.92 187.92 0 0 1-20.51-31.83l45.27-18.39a14.12 14.12 0 1 0-10.61-26.17l-46 18.39c-5-14.15-8.49-29-9.2-44.56h48.1a14.15 14.15 0 0 0 0-28.29h-48.74a165.28 165.28 0 0 1 8.49-46l43.85 18.39c2.12.71 3.54 1.41 5.66 1.41a14 14 0 0 0 12.73-8.49 14.36 14.36 0 0 0-7.78-18.39l-43.85-18.39A204.84 204.84 0 0 1 155 214.77l32.54 32.54a13.68 13.68 0 0 0 19.81 0 13.68 13.68 0 0 0 0-19.81l-33.24-33.24A211.56 211.56 0 0 1 213 167.38l17.68 42.44c2.12 5.66 7.78 8.49 13.44 8.49 2.12 0 3.54 0 5.66-1.41a15.46 15.46 0 0 0 3.54-2.12c-1.41 12-2.83 30.42-2.83 58 0 33.24.71 74.27 3.54 86.29a49.32 49.32 0 0 0 48.1 38.2 54.6 54.6 0 0 0 10.61-1.41c26.88-5.66 43.85-31.83 38.2-58-2.12-12-18.39-49.51-31.83-79.22-12.73-28.29-21.22-45.27-27.59-55.17 2.12 2.12 5.66 2.83 8.49 2.83a14.19 14.19 0 0 0 14.15-14.15v-44.58a202.27 202.27 0 0 1 46.68 9.2l-17.68 42.44a14.36 14.36 0 0 0 7.78 18.39c2.12.71 3.54 1.41 5.66 1.41a14 14 0 0 0 12.73-8.49L387 168.08a182.4 182.4 0 0 1 38.2 26.17L392 227.5a13.68 13.68 0 0 0 0 19.81 13.68 13.68 0 0 0 19.81 0l32.54-32.54c9.9 12 19.1 25.46 25.46 39.61l-43.85 18.39a14.36 14.36 0 0 0-7.78 18.39c2.12 5.66 7.78 8.49 13.44 8.49 2.12 0 3.54 0 5.66-1.41l43.85-17.68a233 233 0 0 1 8.49 45.27h-48.1a14.15 14.15 0 0 0 0 28.29h48.1a199.17 199.17 0 0 1-9.9 45.27l-45.27-19.1a14.12 14.12 0 0 0-10.61 26.17l44.56 18.39a207.78 207.78 0 0 1-21.93 33.24 13.8 13.8 0 0 0 2.12 19.81c2.83 2.12 5.66 3.54 9.2 3.54a12.73 12.73 0 0 0 10.61-5 217.33 217.33 0 0 0 50.22-139.34c-.76-120.92-99.08-218.53-219.33-218.53zm24 226.35a20.66 20.66 0 0 1-16.27 24c-11.32 2.12-22.63-5-24.76-15.56-2.12-12-3.54-71.44-2.12-110.34 16.32 35.41 40.37 90.58 43.2 101.9zM271.71 188.6h-2.83c-5 .71-8.49 2.83-11.32 9.9l-17.68-42.44a196.33 196.33 0 0 1 46-9.2v46c0 1.41 0 2.83.71 3.54-7.1-7.8-10.59-7.8-14.88-7.8z"/><circle cx="300.24" cy="339.59" r="9.2" transform="rotate(-11.9 300.247 339.58)"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" fill="#ff6138" viewBox="0 0 600 600"><path d="M540.13 125.81C530 105.45 504.5 85.08 479 85.08a41.47 41.47 0 0 0-9.46.73c-7.27 1.45-26.91 5.82-136.73 130.92h-.73c-8.73 0-13.82 0-145.46 138.19C122.66 420.37 60.11 488 59.38 488.74a14.55 14.55 0 0 0 8 24 122.6 122.6 0 0 0 24 2.18c69.09 0 152.73-53.82 210.92-98.91 39.27-30.55 113.46-96.73 115.64-114.19.73-6.55-2.18-13.82-9.46-23.27L487 181.81h3.64c14.55 0 34.91-3.64 47.28-19.64 8.08-9.45 8.76-23.27 2.21-36.36zM102.29 485.1c85.1-90.91 203.65-215.28 230.56-237.83 13.82 8.73 45.09 37.82 53.82 50.91C361.94 330.91 207 474.92 102.29 485.1zM515.4 144.72c-5.82 7.27-18.91 8-24.73 8a45.59 45.59 0 0 1-8-.73c-5.09-.73-10.18 1.45-13.82 5.09l-78.55 96.73a246.41 246.41 0 0 0-30.55-25.46c93.83-104.72 114.2-113.45 115.65-114.18 9.46-2.18 25.46 6.55 34.18 18.91 5.82 6.55 5.82 10.92 5.82 11.64z"/><circle cx="483.4" cy="135.26" r="9.46"/></svg>