feedback

Positive feedback

Ano 12

        {% include "@Components/feedback/feedback.twig" with {
  props : {
    title: "Ano",
    variant: "positive",
    count: "12"
  }
}
 %}

            <div class="feedback__wrapper">
  <a class="feedback --positive" href='#'>
    <span class="feedback__title">Ano</span>
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.507" height="15.358" viewBox="0 0 17.507 15.358">
  <g id="Group_981" data-name="Group 981" transform="translate(-594.25 -1113.392)">
    <path id="Path" d="M2.944,9.5H1.056A1.056,1.056,0,0,1,0,8.444V1.056A1.056,1.056,0,0,1,1.056,0H2.944A1.056,1.056,0,0,1,4,1.056V8.444A1.056,1.056,0,0,1,2.944,9.5Z" transform="translate(595 1118.5)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path class="like" id="Path-2" data-name="Path" d="M0,5.429,3.649.678A1.734,1.734,0,0,1,6.363.632h0a1.792,1.792,0,0,1,.409,1.141V5.044h3.1a1.8,1.8,0,0,1,1.5.8l.329.491a1.8,1.8,0,0,1,.234,1.5l-1.359,4.722a1.8,1.8,0,0,1-1.729,1.3H2.55a1.8,1.8,0,0,1-1.318-.574L0,11.957" transform="translate(599 1114.143)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </span>
  </a>
  <span class="feedback__count">12</span>
</div>

Negative feedback

Ne 3

        {% include "@Components/feedback/feedback.twig" with {
  props : {
    title: "Ne",
    variant: "negative",
    count: "3"
  }
}
 %}

            <div class="feedback__wrapper">
  <a class="feedback --negative" href='#'>
    <span class="feedback__title">Ne</span>
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.507" height="15.357" viewBox="0 0 17.507 15.357">
  <g id="Group_982" data-name="Group 982" transform="translate(0.759 0.75)">
    <path id="Path" d="M1.056,0H2.944A1.056,1.056,0,0,1,4,1.056V8.444A1.056,1.056,0,0,1,2.944,9.5H1.056A1.056,1.056,0,0,1,0,8.444V1.056A1.056,1.056,0,0,1,1.056,0Z" transform="translate(11.997)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path  class="like" id="Path-2" data-name="Path" d="M12,8.428,8.348,13.179a1.734,1.734,0,0,1-2.714.046h0a1.792,1.792,0,0,1-.409-1.141V8.813h-3.1a1.8,1.8,0,0,1-1.5-.8L.3,7.523a1.8,1.8,0,0,1-.234-1.5L1.429,1.3A1.8,1.8,0,0,1,3.158,0H9.447a1.8,1.8,0,0,1,1.318.574L12,1.9" transform="translate(0 0)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </span>
  </a>
  <span class="feedback__count">3</span>
</div>

Voted feedback

Ne 3

        {% include "@Components/feedback/feedback.twig" with {
  props : {
    title: "Ne",
    state: "voted",
    count: "3"
  }
}
 %}

            <div class="feedback__wrapper">
  <a class="feedback --negative --voted" href='#'>
    <span class="feedback__title">Ne</span>
    <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="17.507" height="15.357" viewBox="0 0 17.507 15.357">
  <g id="Group_982" data-name="Group 982" transform="translate(0.759 0.75)">
    <path id="Path" d="M1.056,0H2.944A1.056,1.056,0,0,1,4,1.056V8.444A1.056,1.056,0,0,1,2.944,9.5H1.056A1.056,1.056,0,0,1,0,8.444V1.056A1.056,1.056,0,0,1,1.056,0Z" transform="translate(11.997)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
    <path  class="like" id="Path-2" data-name="Path" d="M12,8.428,8.348,13.179a1.734,1.734,0,0,1-2.714.046h0a1.792,1.792,0,0,1-.409-1.141V8.813h-3.1a1.8,1.8,0,0,1-1.5-.8L.3,7.523a1.8,1.8,0,0,1-.234-1.5L1.429,1.3A1.8,1.8,0,0,1,3.158,0H9.447a1.8,1.8,0,0,1,1.318.574L12,1.9" transform="translate(0 0)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"/>
  </g>
</svg>

  </span>
  </a>
  <span class="feedback__count">3</span>
</div>

Schema

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    },
    "variant": {
      "type": "string",
      "description": "potitive | negative(default)"
    },
    "state": {
      "type": "string",
      "description": "voted | undefined"
    },
    "count": {
      "type": "number",
      "description": "Count of feedbacks"
    }
  }
}