Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add prototype for series of articles #1913

Closed
wants to merge 1 commit into from
Closed

Add prototype for series of articles #1913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/prototypes/article-series/example/example.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.article-nav {
display: flex;
justify-content: flex-end;
}
325 changes: 325 additions & 0 deletions src/prototypes/article-series/example/example.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,325 @@
{% set code_sample %}
.backButton {
display: none;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
.backButton {
display: block;
}
}
{% endset %}

{% embed '@cloudfour/objects/page/page.twig' %}
{% block header %}

<!-- standard Sky Nav component -->
{% include '@cloudfour/components/sky-nav/sky-nav.twig' with {
"class": "t-dark",
menu: skyNavMenu
} only %}

{% endblock %}

{% block content %}

{% embed '@cloudfour/objects/container/container.twig' with {
class: 'o-container--prose o-container--pad'} %}
{% block content %}
{% embed '@cloudfour/objects/rhythm/rhythm.twig' with {
class: 'o-rhythm--generous' } %}
{% block content %}
{% include '@cloudfour/components/heading/heading.twig' with {
level: -1,
content: 'A Cool Article Title for a Cool Article',
} only %}

{% include '@cloudfour/components/author/author.twig' with {
"authors": [
{
"name": "Aileen Jeffries",
"avatar": "media/team-avatars/aileen.png",
"link": "#"
}
],
"date": "2021-04-10T07:00:00.000Z"
} only %}

{% embed '@cloudfour/components/card/card.twig' with {
href: '#',
class: 'c-card--contained o-container__fill-pad'
} only %}
{% block content %}
{% include '@cloudfour/components/heading/heading.twig' with {
"level": 2,
"content": "Articles in Series"
} only %}
<ol class="o-list u-space-block-start-0">
<li class="u-pull-inline-start-1">
{% include '@cloudfour/components/icon/icon.twig' with {
name: 'caret-right',
inline: true
} only %}
<b>Title of Article 1</b>
</li>
<li><a href="#">Title of Article 2</a></li>
<li><a href="#">Title of Article 3</a></li>
<li>Coming Soon</li>
</ol>
{% endblock %}
{% endembed %}


{% embed '@cloudfour/objects/rhythm/rhythm.twig' with {
class: 'o-rhythm--default o-rhythm--generous-headings' } %}
{% block content %}

{% embed '@cloudfour/objects/embed/embed.twig' with {
"class": "o-embed--wide"
} only %}
{% block content %}
<img src="https://placeimg.com/640/480/nature"/>
{% endblock %}
{% endembed %}

<p>The color of its body changes with the water temperature. The coloration of Gorebyss in Alola is almost blindingly vivid. Numel stores magma of almost 2,200 degrees Fahrenheit within its body. If it gets wet, the magma cools and hardens. In that event, the Pokémon’s body grows heavy and its movements become sluggish. Recordings of Jigglypuff’s strange lullabies can be purchased from department stores. These CDs can be found near the bedding area.</p>

<p>Rapidash usually can be seen casually cantering in the fields and plains of Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch. However, when this Pokémon turns serious, its fiery manes flare and blaze as it gallops its way up to 150 mph. Individuals that have been set free by Trainers who could no longer raise them have become common, and they can now be found in Alola. When the bacteria living inside its antennae absorb Lanturn’s bodily fluids, a strong luminescent effect is produced.</p>

<figure>
{% embed '@cloudfour/objects/embed/embed.twig' with {
"class": "o-embed--wide"
} only %}
{% block content %}
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/m_CUrv0aezI"
allowfullscreen=""
></iframe>
{% endblock %}
{% endembed %}
<figcaption>A husky being a loud baby.</figcaption>
</figure>

<p>If Donphan were to tackle with its hard body, even a house could be destroyed. Using its massive strength, the Pokémon helps clear rock and mud slides that block mountain trails.Ralts has the ability to sense the emotions of people. If its Trainer is in a cheerful mood, this Pokémon grows cheerful and joyous in the same way.Rhyhorn’s brain is very small. It is so dense, while on a run it forgets why it started running in the first place. It apparently remembers sometimes if it demolishes something.</p>

{% include '@cloudfour/components/heading/heading.twig' with {
level: 2,
content: 'To Be or Not to Be?',
permalink: true
} only %}

<p>
Its two sharp scythes are more than just weapons.{% include '@cloudfour/components/footnote-link/footnote-link.twig' with {
count: 1
} only %}
It uses them with dexterity to dress its prey before eating.
Shuckle <a href="#">quietly hides itself under rocks</a>,
keeping its body concealed inside its hard shell while eating berries it has stored away.
The berries mix with its body fluids to become a juice.
Motionless, it hangs from trees, waiting for its <a href="#">bug Pokémon</a> prey to come to it.
Its favorite in Alola is Cutiefly.{% include '@cloudfour/components/footnote-link/footnote-link.twig' with {
count: 2
} only %}

</p>

<blockquote>
<p><b>CSS Grid Layout</b> excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.</p>
<p>Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.</p>
<footer>
<cite><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">MDN Web Docs</a></cite>
</footer>
</blockquote>

<p>The only thing unlucky about Absol is its appearance. It protects fields and warns people of disaster, so one ought to be grateful for it. It can be spotted near recreational facilities, intending to eat the pleasant dreams of children who enjoyed themselves there that day.</p>

{% include '@cloudfour/components/heading/heading.twig' with {
level: 2,
content: 'Yellow Submarine in Pepperland',
permalink: true
} only %}

<p>There are some places where Slowpoke is worshiped because of a long-standing belief that whenever Slowpoke yawns, it rains. Carrying food through <code>Fearow’s territory is dangerous</code>. It will snatch the food away from you in a flash! Oddish searches for fertile, nutrient-rich soil, then plants itself. During the daytime, while it is planted, this <code>Pokémon’s feet</code> are thought to change shape and become similar to the roots of trees.</p>

<pre class="wp-block-code"><code class="language-css">{{code_sample|trim|escape}}</code></pre>

<p>In the distant past, they were fairly strong, but they have become gradually weaker over time. Although known for their splendid tail fins, Goldeen apparently compete among themselves to see whose horn is thickest and sharpest. Beautifly has a long mouth like a coiled needle, which is very convenient for collecting pollen from flowers. This Pokémon rides the spring winds as it flits around gathering pollen.</p>

{% include '@cloudfour/objects/list/list.twig' with {
"items": [
"Design Tokens",
"Objects",
"Components",
"Scope",
"Utilities",
"Themes"
],
"tag_name": "ul"
} only %}

<p>
Its tail is large and covered with a rich, thick fur.
The tail becomes increasingly deeper in color as Wartortle ages.
The scratches on its shell are evidence of this Pokémon’s toughness as a battler.{% include '@cloudfour/components/footnote-link/footnote-link.twig' with {
count: 3
} only %}
Lombre’s entire body is covered by a slippery, slimy film.
</p>

<div class="article-nav">
{% include '@cloudfour/components/button/button.twig' with {
"content_end_icon": "arrow-right",
"label": "Next Article"
} only %}
</div>

{% include '@cloudfour/components/footnote-group/footnote-group.twig' with {
items: [
"They're great for dancing!",
"Not to be confused with a cutiepie.",
"Wartortle is not nearly as cute as Squirtle."
]
} only %}
{% endblock %}
{% endembed %}

{% embed '@cloudfour/components/card/card.twig' with {
href: '#',
class: 'c-card--contained o-container__fill-pad'
} only %}
{% block content %}

{% embed '@cloudfour/objects/media/media.twig' with {
reverse: true
} only %}
{% block object %}
{% include '@cloudfour/components/avatar/avatar.twig' with {
src: 'media/team-avatars/aileen.png'
} only %}
{% endblock %}
{% block content %}
<p><a href="#">Aileen Jeffries</a> Magna ea anim duis fugiat sit labore labore sit nisi eiusmod in consectetur duis id. Aliqua commodo aliqua do fugiat labore consectetur cillum exercitation. <a href="#">Quis do magna</a> and <a href="#">adipisicing</a>.</p>
{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}


{% include '@cloudfour/components/heading/heading.twig' with {
level: 2,
content: 'Comments'
} only %}

{% set footnote_comment_content %}
<p>
Design system talk repository UX sufficient contrast go input loxe.
Ri accessible UX theming web standards lepaxenuti yab mockups nikil
font-loading yitobubugo testing.{% include '@cloudfour/components/footnote-link/footnote-link.twig' with {
count: 1,
id: '1-comment-5000'
} only %}
</p>
<p>
Pacirec Progressive Web App (PWA) lapohoba Progressive Web App (PWA){% include '@cloudfour/components/footnote-link/footnote-link.twig' with {
count: 2,
id: '2-comment-5000'
} only %}
talk adaptive fa. Ru.
</p>

{% include '@cloudfour/components/footnote-group/footnote-group.twig' with {
compact: true,
id_suffix: '-comment-5000',
heading_tag: 'h4',
items: [
"SVG repository",
"Service worker accessibility prototype progressive enhancement responsive."
]
} only %}
{% endset %}

{% include '@cloudfour/components/comment/comment.twig' with {
"comment": {
"ID": "217",
"link": "#comment-217",
"date": "2021-08-05T21:48:51.435Z",
"avatar": "https://placeimg.com/92/92/people",
"author": {
"name": "Duruzit Lidofideh"
},
"comment_content": footnote_comment_content,
"is_child": false,
"children": [
{
"ID": "218",
"link": "#comment-218",
"date": "2021-08-05T21:48:51.436Z",
"avatar": "https://placeimg.com/92/92/animals",
"author": {
"name": "Rar Bopuma"
},
"comment_content": "<p>Tipiqi preload audience givob sirabino readable testing agile. Dimo coca benulob.</p><p>Fallback. Animation multidisciplinary kimob. Zegidutace automate mapateroni. Case study fallback hih cukirip issue polyfill. Web standards <code>picture</code> element input testing sketching.</p>",
"is_child": true,
"children": [],
"approved": true
},
{
"ID": "219",
"link": "#comment-219",
"date": "2021-08-05T21:48:51.436Z",
"avatar": "https://placeimg.com/92/92/nature",
"author": {
"name": "Hemam Lolub"
},
"comment_content": "<p>Performance fodorebipi automate ceror sufficient contrast <code>picture</code> element multidisciplinary mockups input JavaScript. Cross-disciplinary be agile readable usability hunu. Specification UX specification. Audience reri cul dutohey. Jicidurok hat accessibility thank you celinob.</p><p>This <a href=\"https://cloudfour.com/thinks/progressive-web-apps-simply-make-sense/\">article</a> rubuhamot pe design token HTTP/2 tit. Baroga tubilimil. Web app cilodob prototype theming <code>picture</code> element ropup service worker mib mol HTML bu SVG issue..</p>",
"is_child": true,
"children": [],
"approved": true
}
],
"approved": true
}
} only %}

{% include '@cloudfour/components/comment/comment.twig' with {
"comment": {
"ID": "213",
"link": "#comment-213",
"date": "2021-08-05T21:48:51.435Z",
"avatar": "https://placeimg.com/92/92/tech",
"author": {
"name": "Wuse Zelu"
},
"comment_content": "<p>Audience TL;DR. Typography deploy da mockups transparency SVG raxakarod lil bo accessibility padulid multidisciplinary input rulop service worker sticky notes this <a href=\"https://cloudfour.com/thinks/progressive-web-apps-simply-make-sense/\">article</a> experience dukiborebo rubuni tamapiroru theming UX lobi TL;DR. Dependency hobino.</p>",
"is_child": false,
"children": [],
"approved": true
}
} only %}

{% include '@cloudfour/components/comment-form/comment-form.twig' with {
"heading_id": "leave-a-comment",
"help_text_id": "leave-a-comment-help-text"
} only %}

{% endblock %}
{% endembed %}
{% endblock %}
{% endembed %}

{% endblock %}

{% block footer %}

<!-- standard Ground Nav component -->
{% include '@cloudfour/components/ground-nav/ground-nav.twig' with {
menu: menu,
social: social,
action: action,
organization: organization
} only %}

{% endblock %}
{% endembed %}
44 changes: 44 additions & 0 deletions src/prototypes/article-series/single-article.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import groundNavMenu from '../../components/ground-nav/demo/menu.json';
import organization from '../../components/ground-nav/demo/organization.json';
import social from '../../components/ground-nav/demo/social.json';
import skyNavMenu from '../../components/sky-nav/demo/menu.json';
import { useSkyNav } from '../use-sky-nav.ts';
import './example/example.scss';

import singleArticlePrototype from './example/example.twig';

export default {
title: 'Prototypes/Article Series',
parameters: {
layout: 'fullscreen',
},
};

export const Example = () => {
useSkyNav();
return singleArticlePrototype({
skyNavMenu,
menu: { items: [...skyNavMenu.items, ...groundNavMenu.items] },
social,
action: {
lead_in: 'Let’s discuss your project!',
title: 'Email us',
link: 'mailto:[email protected]',
icon: 'envelope',
},
organization: {
name: organization.name,
address: {
street_address: organization.address.street_address,
address_locality: organization.address.address_locality,
address_region: organization.address.address_region,
postal_code: organization.address.postal_code,
address_country: organization.address.address_country,
},
email: organization.email,
telephone: organization.telephone,
url: organization.url,
founding_date: organization.founding_date,
},
});
};