England Football

Form Results 

<ul class="form-results">
    <li data-behaviour="tooltip">
        <p class="form form--win" tabindex="0" role="button" aria-label="win">w</p>
        <div class="form-results__tooltip" data-ref="tooltip">
            <div class="form-results__match-date">WED 16 DEC 2020</div>
            <div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
            <div class="match-result">
                <div class="match-result__team">
                    <img src="/assets/example-content/germany-flag.png" alt="" />
                    <span>GER</span>
                </div>
                <div>
                    <div class="match-result__score">2 - 3</div>
                    <span>HT: 8-8</span>
                </div>
                <div class="match-result__team">
                    <img src="/assets/example-content/england-flag.png" alt="" />
                    <span>ENG</span>
                </div>
            </div>
            <div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
            <a href="/" class="cta cta--primary ">
                <p>Post-match report</p>
            </a>

        </div>
    </li>
    <li data-behaviour="tooltip">
        <p class="form form--loss" tabindex="0" role="button" aria-label="loss">l</p>
        <div class="form-results__tooltip" data-ref="tooltip">
            <div class="form-results__match-date">WED 16 DEC 2020</div>
            <div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
            <div class="match-result">
                <div class="match-result__team">
                    <img src="/assets/example-content/germany-flag.png" alt="" />
                    <span>GER</span>
                </div>
                <div>
                    <div class="match-result__score">2 - 3</div>
                    <span>HT: 8-8</span>
                </div>
                <div class="match-result__team">
                    <img src="/assets/example-content/england-flag.png" alt="" />
                    <span>ENG</span>
                </div>
            </div>
            <div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
            <a href="/" class="cta cta--primary ">
                <p>Post-match report</p>
            </a>

        </div>
    </li>
    <li data-behaviour="tooltip">
        <p class="form form--win" tabindex="0" role="button" aria-label="win">w</p>
        <div class="form-results__tooltip" data-ref="tooltip">
            <div class="form-results__match-date">WED 16 DEC 2020</div>
            <div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
            <div class="match-result">
                <div class="match-result__team">
                    <img src="/assets/example-content/germany-flag.png" alt="" />
                    <span>GER</span>
                </div>
                <div>
                    <div class="match-result__score">2 - 3</div>
                    <span>HT: 8-8</span>
                </div>
                <div class="match-result__team">
                    <img src="/assets/example-content/england-flag.png" alt="" />
                    <span>ENG</span>
                </div>
            </div>
            <div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
            <a href="/" class="cta cta--primary ">
                <p>Post-match report</p>
            </a>

        </div>
    </li>
    <li data-behaviour="tooltip">
        <p class="form form--draw" tabindex="0" role="button" aria-label="draw">d</p>
        <div class="form-results__tooltip" data-ref="tooltip">
            <div class="form-results__match-date">WED 16 DEC 2020</div>
            <div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
            <div class="match-result">
                <div class="match-result__team">
                    <img src="/assets/example-content/germany-flag.png" alt="" />
                    <span>GER</span>
                </div>
                <div>
                    <div class="match-result__score">2 - 3</div>
                    <span>HT: 8-8</span>
                </div>
                <div class="match-result__team">
                    <img src="/assets/example-content/england-flag.png" alt="" />
                    <span>ENG</span>
                </div>
            </div>
            <div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
            <a href="/" class="cta cta--primary ">
                <p>Post-match report</p>
            </a>

        </div>
    </li>
    <li data-behaviour="tooltip">
        <p class="form form--draw" tabindex="0" role="button" aria-label="draw">d</p>
        <div class="form-results__tooltip" data-ref="tooltip">
            <div class="form-results__match-date">WED 16 DEC 2020</div>
            <div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
            <div class="match-result">
                <div class="match-result__team">
                    <img src="/assets/example-content/germany-flag.png" alt="" />
                    <span>GER</span>
                </div>
                <div>
                    <div class="match-result__score">2 - 3</div>
                    <span>HT: 8-8</span>
                </div>
                <div class="match-result__team">
                    <img src="/assets/example-content/england-flag.png" alt="" />
                    <span>ENG</span>
                </div>
            </div>
            <div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
            <a href="/" class="cta cta--primary ">
                <p>Post-match report</p>
            </a>

        </div>
    </li>
</ul>

No notes defined.

{
  "matchResults": [
    {
      "result": "win",
      "resultShort": "w",
      "date": "WED 16 DEC 2020",
      "leagueName": "NATIONS LEAGUE GROUP STAGE",
      "team1": "GER",
      "team2": "ENG",
      "teamGoal1": "2",
      "teamGoal2": "3",
      "teamLogo1": "/assets/example-content/germany-flag.png",
      "teamLogo2": "/assets/example-content/england-flag.png",
      "location": "WEMBLEY STADIUM, ENGLAND",
      "htText": "HT: 8-8",
      "cta": {
        "copy": "Post-match report"
      }
    },
    {
      "result": "loss",
      "resultShort": "l",
      "date": "WED 16 DEC 2020",
      "leagueName": "NATIONS LEAGUE GROUP STAGE",
      "team1": "GER",
      "team2": "ENG",
      "teamGoal1": "2",
      "teamGoal2": "3",
      "teamLogo1": "/assets/example-content/germany-flag.png",
      "teamLogo2": "/assets/example-content/england-flag.png",
      "location": "WEMBLEY STADIUM, ENGLAND",
      "htText": "HT: 8-8",
      "cta": {
        "copy": "Post-match report"
      }
    },
    {
      "result": "win",
      "resultShort": "w",
      "date": "WED 16 DEC 2020",
      "leagueName": "NATIONS LEAGUE GROUP STAGE",
      "team1": "GER",
      "team2": "ENG",
      "teamGoal1": "2",
      "teamGoal2": "3",
      "teamLogo1": "/assets/example-content/germany-flag.png",
      "teamLogo2": "/assets/example-content/england-flag.png",
      "location": "WEMBLEY STADIUM, ENGLAND",
      "htText": "HT: 8-8",
      "cta": {
        "copy": "Post-match report"
      }
    },
    {
      "result": "draw",
      "resultShort": "d",
      "date": "WED 16 DEC 2020",
      "leagueName": "NATIONS LEAGUE GROUP STAGE",
      "team1": "GER",
      "team2": "ENG",
      "teamGoal1": "2",
      "teamGoal2": "3",
      "teamLogo1": "/assets/example-content/germany-flag.png",
      "teamLogo2": "/assets/example-content/england-flag.png",
      "location": "WEMBLEY STADIUM, ENGLAND",
      "htText": "HT: 8-8",
      "cta": {
        "copy": "Post-match report"
      }
    },
    {
      "result": "draw",
      "resultShort": "d",
      "date": "WED 16 DEC 2020",
      "leagueName": "NATIONS LEAGUE GROUP STAGE",
      "team1": "GER",
      "team2": "ENG",
      "teamGoal1": "2",
      "teamGoal2": "3",
      "teamLogo1": "/assets/example-content/germany-flag.png",
      "teamLogo2": "/assets/example-content/england-flag.png",
      "location": "WEMBLEY STADIUM, ENGLAND",
      "htText": "HT: 8-8",
      "cta": {
        "copy": "Post-match report"
      }
    }
  ]
}
  • Content: 
    export default tooltipWrapper => {
  const tooltipContent = tooltipWrapper.querySelector('[data-ref="tooltip"]');
  let timer;

  if (!tooltipContent) {
    return;
  }
  tooltipContent.classList.add('visually-hidden');

  tooltipWrapper.addEventListener('mouseover', () => {
    document
      .querySelectorAll('[data-ref="tooltip"]')
      .forEach(tooltip => tooltip.classList.add('visually-hidden'));
    tooltipContent.classList.remove('visually-hidden');
    clearTimeout(timer);
  });

  tooltipWrapper.addEventListener('mouseout', () => {
    timer = setTimeout(() => {
      tooltipContent.classList.add('visually-hidden');
    }, 500);
  });

  tooltipWrapper.addEventListener('focusin', () => {
    tooltipContent.classList.remove('visually-hidden');
  });

  tooltipWrapper.addEventListener('focusout', () => {
    tooltipContent.classList.add('visually-hidden');
  });
};
  • URL: /components/raw/form-results/form-results.js
  • Filesystem Path: src/library/components/form-results/form-results.js
  • Size: 886 Bytes
  • Content: 
    .form-results {
  display: flex;
  justify-content: center;

  li {
    margin: 0 1.2rem;
    position: relative;
  }
  .form {
    height: 5.6rem;
    width: 5.6rem;
    color: $white;
    border-radius: 50%;
    font-family: $text-font;
    letter-spacing: 0.01em;
    font-size: 2rem;
    line-height: 2rem;
    padding: 1.9rem;
    text-align: center;
    cursor: pointer;

    &--win {
      background-color: $junglegreen;
    }
    &--loss {
      background-color: $red;
    }
    &--draw {
      background-color: $grey;
    }

    &:hover::after {
      content: '';
      border-width: 1rem;
      border-style: solid;
      border-color: transparent transparent white transparent;
      position: absolute;
      margin-left: -1.7rem;
      margin-top: 2.1rem;
      z-index: 1;
    }
  }

  @media (max-width: $mq-small) {
    position: relative;

    li {
      position: initial;
    }
    .form {
      height: 3.6rem;
      width: 3.6rem;
      padding: 1rem;
      font-size: 1.6rem;
    }
  }

  &__tooltip {
    width: 34.4rem;
    border: 0.1rem solid #eceef3;
    box-sizing: border-box;
    box-shadow: 0 0 1.6rem rgba(91, 104, 133, 0.36);
    border-radius: 0.4rem;
    background: $white;
    position: absolute;
    padding: 1.6rem 2rem;
    text-align: center;
    right: 0;
    top: 5rem;
    z-index: 1;
  }
  &__match-date {
    @include text-xs;

    color: $blue;
    margin-bottom: 0.4rem;
  }
  &__league {
    @include text-xs;

    color: rgba(59, 61, 65, 0.7);
    margin-bottom: 0.8rem;
  }

  &__match-location {
    @include text-xs;

    color: $blue;
    margin-top: 1rem;
    margin-bottom: 1.3rem;
  }

  @media (min-width: $mq-small) {
    .form {
      &:hover::after {
        display: none;
      }
    }
    &__tooltip {
      right: 8rem;
      top: -10.5rem;
      width: 34.4rem;

      &::after {
        content: '';
        border-width: 1rem;
        border-style: solid;
        border-color: transparent transparent transparent white;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateX(100%) translateY(-50%);
      }
    }
  }
}
  • URL: /components/raw/form-results/form-results.scss
  • Filesystem Path: src/library/components/form-results/form-results.scss
  • Size: 2.1 KB 
<ul class="form-results">
    {{#each matchResults}}
    <li data-behaviour="tooltip">
        <p class="form form--{{result}}" tabindex="0" role="button" aria-label="{{result}}">{{resultShort}}</p>
        <div class="form-results__tooltip" data-ref="tooltip">
            <div class="form-results__match-date">{{date}}</div>
            <div class="form-results__league">{{leagueName}}</div>
            {{render '@match-result' this merge="true"}}
            <div class="form-results__match-location">{{location}}</div>
            {{render '@cta' cta merge="true" }}
        </div>
    </li>
    {{/each}}
</ul>