Skip to content
Snippets Groups Projects
Commit d437c035 authored by Jennifer Dust's avatar Jennifer Dust
Browse files

Issue #3443332 by jldust: Update styleguide demo for new components

parent 62ca39cb
No related branches found
No related tags found
1 merge request!121Issue 3443332: Fixing teaser names and templates for styleguide
......@@ -5,7 +5,7 @@ description: A Teaser component
props:
type: object
required:
- title
- teaser_title
properties:
attributes:
type: Drupal\Core\Template\Attribute
......@@ -15,16 +15,16 @@ props:
enum:
- card
- panel
title:
teaser_title:
type: 'string'
title: 'Title'
examples:
- 'A new exhibit opens at the Student Visitor Center'
media:
teaser_media:
type: array
title: Media
description: 'The url for the image'
more:
teaser_link:
type: 'object'
title: 'More Link'
properties:
......@@ -32,7 +32,7 @@ props:
type: string
url:
type: string
body:
teaser_body:
title: Body
type: string
examples:
......
......@@ -7,17 +7,17 @@
{% endset %}
{% set props = {
title: 'Beware of backfeed',
media: image_content,
body: body_content,
more: {
teaser_title: 'Beware of backfeed',
teaser_media: image_content,
teaser_body: body_content,
teaser_link: {
text: 'Read More',
url: 'https://www.google.com',
},
} %}
{% stories teaser with {
title: 'Components/Teaser',
teaser_title: 'Components/Teaser',
} %}
{% story card with {
......@@ -36,7 +36,7 @@
<div style="max-width: 600px;">
{{ include('prototype:teaser', props|merge({
variant: 'card',
media: false,
teaser_media: false,
}), with_context = false) }}
</div>
{% endstory %}
......
{% set classes = [
{% set teaser_classes = [
'c-teaser',
'c-teaser--' ~ variant|default('card'),
] %}
<article {{ attributes.addClass(classes) }}>
{% if media %}
{% set teaser_classes = teaser_classes|merge(classes|default([])) %}
<article {{ attributes.addClass(teaser_classes) }}>
{% if teaser_media %}
<div class="c-teaser__media">
{{ media }}
{{ teaser_media }}
</div>
{% endif %}
<div class="c-teaser__content">
<h3 class="c-teaser__title">{{ title }}</h3>
<h3 class="c-teaser__title">{{ teaser_title }}</h3>
{% if body %}
<div class="c-teaser__body">{{ body }}</div>
{% if teaser_body %}
<div class="c-teaser__body">{{ teaser_body }}</div>
{% endif %}
{% if more.url is not empty %}
{% if teaser_link.url is not empty %}
<p class="c-teaser__actions">
<a class="c-teaser__more-link" href="{{ more.url }}">
<span class="text">{{ more.text }}</span>
<a class="c-teaser__more-link" href="{{ teaser_link.url }}">
<span class="text">{{ teaser_link.text }}</span>
</a>
</p>
{% endif %}
......
{{ include('prototype:teaser', {
teaser_body: content.body,
teaser_layout: 'list-stack',
teaser_title_link:{ url: url, title: label|render},
attr: attributes
}) }}
......@@ -4,7 +4,7 @@
{% endset %}
<a name='accordion-group'></a>
<a id='accordion-group'></a>
<h2 class='styleguide'>Accordion Group</h2>
<div class='styleguide'>
{% embed "prototype:accordion-group" with {
......@@ -28,7 +28,7 @@
{% endembed %}
</div>
<a name='accordion-group'></a>
<a id='accordion-group'></a>
<h2 class='styleguide'>Accordion
</h2>
<div class='styleguide'>
......@@ -40,7 +40,7 @@
})}}
</div>
<a name='button'></a>
<a id='button'></a>
<h2 class='styleguide'>Button</h2>
<div class='styleguide'>
{{ include('prototype:button', {
......@@ -49,7 +49,7 @@
}, with_context = false) }}
</div>
<a name='button_icon'></a>
<a id='button_icon'></a>
<h2 class='styleguide'>
Button with Icon</h2>
<div class='styleguide'>
......@@ -60,7 +60,7 @@
}, with_context = false) }}
</div>
<a name='cta'></a>
<a id='cta'></a>
<h2 class='styleguide'>CTA</h2>
<div class='styleguide'>
{{ include('prototype:cta', {
......@@ -72,7 +72,7 @@
}, with_context = false) }}
</div>
<a name='figure'></a>
<a id='figure'></a>
<h2 class='styleguide'>Figure</h2>
<div class='styleguide'>
{{ include('prototype:figure', {
......@@ -82,7 +82,7 @@
}, with_context = false) }}
</div>
<a name='link'></a>
<a id='link'></a>
<h2 class='styleguide'>Link</h2>
<div class='styleguide'>
{{ include('prototype:link', {
......@@ -91,7 +91,7 @@
}, with_context = false) }}
</div>
<a name='link_icon'></a>
<a id='link_icon'></a>
<h2 class='styleguide'>Link with icon</h2>
<div class='styleguide'>
{{ include('prototype:link', {
......@@ -101,7 +101,7 @@
}, with_context = false) }}
</div>
<a name='page_title'></a>
<a id='page_title'></a>
<h2 class='styleguide'>Page Title</h2>
<div class='styleguide'>
{{ include('prototype:page-title', {
......@@ -111,7 +111,7 @@
</div>
<a name='pullquote'></a>
<a id='pullquote'></a>
<h2 class='styleguide'>Pullquote</h2>
<div class='styleguide'>
{{ include('prototype:pullquote', {
......@@ -121,7 +121,7 @@
}, with_context = false) }}
</div>
<a name='sidebar'></a>
<a id='sidebar'></a>
<h2 class='styleguide'>Sidebar</h2>
<div class='styleguide'>
{{ include('prototype:sidebar', {
......@@ -130,22 +130,19 @@
}, with_context = false) }}
</div>
<a name='teaser'></a>
<a id='teaser'></a>
<h2 class='styleguide'>Teaser</h2>
<div class='styleguide'>
{{ include('prototype:teaser', {
teaser_layout: 'list-stack',
teaser_title: 'Example teaser title',
teaser_body: 'Interdum risus tortor turpis gravida sed. Risus sit et egestas tellus ac sed. Purus ut eu fermentum non. Arcu lectus sed in quisque vitae posuere. Adipiscing nullam mauris iaculis leo turpis leo, congue.',
teaser_title_link: {url: url, title: 'Example link'},
teaser_icon: 'icon-arrow-right',
teaser_category: 'Example category',
teaser_category_link: {url: url, title: 'Example category link'},
teaser_link: {url: url, text: 'Example link'},
teaser_media: content.40['#content'],
attr: attributes
}, with_context = false) }}
</div>
<a name='video'></a>
<a id='video'></a>
<h2 class='styleguide'>Video</h2>
<div class='styleguide'>
{{ include('prototype:video', {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment