BUX Component Development Platform

Quote 

<figure class="bux-quote">

    <img class="bux-image bux-quote__image bux-image--1x1" src="/images/placeholders/osu-bux-4.jpg" alt="" />

    <blockquote class="bux-quote__blockquote" cite="#">
        <p class="bux-quote__text">&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium pretium tempor ut eget loremquen ipsum imperdiet. Lorem ipsum dolar sit amet elit.&rdquo;</p>
    </blockquote>
    <figcaption class="bux-quote__figcaption">
        <div class="bux-quote__author">Source Name</div>
        <cite class="bux-quote__source">Attribution</cite>
    </figcaption>
</figure>
 
{# 

Quote

Available variables:

- items:            Array containing the quote items
- item.image_url:   URL for the quote's image. 
- item.image_alt:   Alt text for the quote's image.
- item.cite:        URL for source attribution.
- item.text:        Content of the quote.
- item.source:      String for the quote's source.
- item.attribution: String for the quote's attribution.

#}

{% for item in items %}
<figure class="bux-quote">
	{% if item.image_url %}
    {% set image_url = item.image_url %}
    {% set image_alt = item.image_alt %}
    {% set class = "bux-quote__image bux-image--1x1" %}
	{% include '@image' %}
	{% endif %}
	<blockquote class="bux-quote__blockquote" {% if item.cite %}cite="{{ item.cite }}"{% endif %}>
		<p class="bux-quote__text">&ldquo;{{ item.text }}&rdquo;</p>
	</blockquote>
	<figcaption class="bux-quote__figcaption">
		<div class="bux-quote__author">{{ item.source }}</div>
		<cite class="bux-quote__source">{{ item.attribution }}</cite>
	</figcaption>
</figure>
{% endfor %}
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
items:
  - image_url: /images/placeholders/osu-bux-4.jpg
    image_alt: Portrait of a woman.
    cite: '#'
    text: >-
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium
      pretium tempor ut eget loremquen ipsum imperdiet. Lorem ipsum dolar sit
      amet elit.
    source: Source Name
    attribution: Attribution
  • Content: 
    .bux-quote {
  border-left: 4px solid $scarlet;
  padding: 0 0 0 $sp-32;

  p {
    font-family: $serif;
    font-size: $ts-md;
    font-weight: 900;
    line-height: rem-calc(32);
    margin: 0 0 $sp-16;
    padding: 0;

    @include breakpoint(md) {
      font-size: $ts-md;
      line-height: 2.25rem;
    }
  }

  &__image {
    align-self: flex-start;
    margin: 0 0 $sp-24 0;
    max-width: 100px;
    position: relative;

    @include breakpoint(md) {
      margin: 0 $sp-24 0 0;
      position: absolute;
    }
  }

  &__author {
    font-family: $sans;
    font-size: $ts-18;
    font-weight: 700;
    line-height: 1.5rem;
  }

  &__source {
    font-family: $sans;
    font-size: $ts-18;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
  }
}
  • URL: /components/raw/quote/_quote.scss
  • Filesystem Path: src/components/quote/_quote.scss
  • Size: 776 Bytes
  • Content: 
    {
    function setFigcaptionMargin(quotes) {
        quotes.forEach((quote) => {
            const quoteFigcaption = quote.querySelector(
                ".bux-quote__figcaption"
            );
            const quoteBlockquote = quote.querySelector(
                ".bux-quote__blockquote"
            );
            const quoteImage = quote.querySelector(".bux-quote__image");
            let quoteImagePropMarginRight;
            const quoteImageRightMargin = 24;
            if (typeof quoteImage === "object" && quoteImage !== null) {
                quoteImagePropMarginRight = window
                    .getComputedStyle(quoteImage)
                    .getPropertyValue("margin-right");
            }
            if (
                quoteImagePropMarginRight ===
                "".concat(quoteImageRightMargin, "px")
            ) {
                quote.style.minHeight = quoteImage.offsetHeight + "px";
                quoteFigcaption.style.marginLeft =
                    quoteImage.offsetWidth + quoteImageRightMargin + "px";
                quoteBlockquote.style.marginLeft =
                    quoteImage.offsetWidth + quoteImageRightMargin + "px";
            } else {
                quote.style.minHeight = "none";
                quoteFigcaption.style.marginLeft = 0;
                quoteBlockquote.style.marginLeft = 0;
            }
        });
    }
    function setFontSize(quote) {
        const quoteText = quote.querySelector(".bux-quote__text");
        const quoteTextLength = quoteText.innerText.trim().length;

        if (quoteTextLength >= 150) {
            const quoteAuthor = quote.querySelector(".bux-quote__author");
            const quoteSource = quote.querySelector(".bux-quote__source");

            quoteText.style.fontSize = "1.125rem";
            quoteText.style.lineHeight = "1.75rem";
            if (quoteAuthor) {
                quoteAuthor.style.fontSize = "1rem";
            }
            if (quoteSource) {
                quoteSource.style.fontSize = "1rem";
            }
        }
    }

    function initializeQuotes() {
        const quotes = document.querySelectorAll(".bux-quote");

        quotes.forEach((quote) => {
            setFontSize(quote);
        });

        if (document.querySelector(`.bux-quote__image`)) {
            setFigcaptionMargin(quotes);
            window.onresize = function () {
                setFigcaptionMargin(quotes);
            };
        }
    }
    document.addEventListener("DOMContentLoaded", initializeQuotes());
}
  • URL: /components/raw/quote/quote.js
  • Filesystem Path: src/components/quote/quote.js
  • Size: 2.5 KB

No notes defined.