spaCy/website/_includes/_mixins/_components.jade

//- ----------------------------------
//- 💫 MIXINS > COMPONENTS
//- ----------------------------------

//- Aside

mixin aside(label)
    span.c-aside.u-text-small(role="complementary")&attributes(attributes)
        span.c-aside__label.u-text-label.u-text-strong.u-color-theme=label
        block


//- Button

mixin button(url, trusted, ...style)
    a.c-button.u-text-label(href=url class=prefixArgs(style, "c-button") role="button" target="_blank" rel=(!trusted) ? "noopener nofollow" : "")&attributes(attributes)
        block


//- Code

mixin code(language, label, small)
    pre.c-code-block(class="lang-#{(language || DEFAULT_SYNTAX)} #{small ? '' : 'o-block'}")&attributes(attributes)
        if label
            span.c-code-block__label.u-text-label.u-text-strong=label

        code.c-code-block__content(class=small ? "u-code-small" : "u-code-regular")
            block


//- Icon

mixin icon(name, size)
    - var size = size || 20

    svg.o-icon(aria-hidden="true" viewBox="0 0 #{size} #{size}" width=size height=size)&attributes(attributes)
        use(xlink:href="/assets/img/icons.svg#icon-#{name}")


//- Image for illustration purposes
    file    - [string] file name (in /assets/img)
    alt     - [string] descriptive alt text (optional)
    caption - [string] image caption (optional)

mixin image(file, alt, caption)
    figure.o-block&attributes(attributes)
        img(src="/assets/img/#{file}" alt=(alt || caption) width="800")

        if caption
            figcaption.u-text-small=caption

        block


//- Label

mixin label()
    .u-text-label.u-text-strong.u-color-theme&attributes(attributes)
        block


//- List

mixin list(type, start)
    if type
        ol.c-list.o-block(class="c-list--#{type}" style=(start === 0 || start) ? "counter-reset: li #{(start - 1)}" : "")&attributes(attributes)
            block

    else
        ul.c-list.c-list--bullets.o-block&attributes(attributes)
            block


//- List item

mixin item()
    li.c-list__item.u-text-regular&attributes(attributes)
        block


//- Table

mixin table(head)
    table.c-table.o-block.has-aside&attributes(attributes)

        if head
            +row
                each column in head
                    th.c-table__head-cell.u-text-label.u-text-strong=column

        block


//- Table row

mixin row(...style)
    tr.c-table__row(class=prefixArgs(style, "c-table__cell"))&attributes(attributes)
        block


//- Table cell

mixin cell(...style)
    td.c-table__cell.u-text-regular.has-aside(class=prefixArgs(style, "c-table__cell"))&attributes(attributes)
        block


//- Tag

mixin tag()
    span.u-text-tag.u-text-label.u-color-theme.u-text-strong.u-padding-small
        block