From 6ca29d99f25ab8f21800217997fdab955bed8ce0 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Wed, 6 Jul 2022 14:13:03 -0700 Subject: [PATCH] Add prototype for aricle series --- .../article-series/example/example.scss | 4 + .../article-series/example/example.twig | 325 ++++++++++++++++++ .../article-series/single-article.stories.js | 44 +++ 3 files changed, 373 insertions(+) create mode 100644 src/prototypes/article-series/example/example.scss create mode 100644 src/prototypes/article-series/example/example.twig create mode 100644 src/prototypes/article-series/single-article.stories.js diff --git a/src/prototypes/article-series/example/example.scss b/src/prototypes/article-series/example/example.scss new file mode 100644 index 000000000..f0883889d --- /dev/null +++ b/src/prototypes/article-series/example/example.scss @@ -0,0 +1,4 @@ +.article-nav { + display: flex; + justify-content: flex-end; +} diff --git a/src/prototypes/article-series/example/example.twig b/src/prototypes/article-series/example/example.twig new file mode 100644 index 000000000..e0260e5da --- /dev/null +++ b/src/prototypes/article-series/example/example.twig @@ -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 %} + + + {% 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 %} +
    +
  1. + {% include '@cloudfour/components/icon/icon.twig' with { + name: 'caret-right', + inline: true + } only %} + Title of Article 1 +
    2. +
  2. Title of Article 2
    3. +
  3. Title of Article 3
    4. +
  4. Coming Soon
    5. +
+ {% 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 %} + + {% endblock %} + {% endembed %} + +

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.

+ +

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.

+ +
+ {% embed '@cloudfour/objects/embed/embed.twig' with { + "class": "o-embed--wide" + } only %} + {% block content %} + + {% endblock %} + {% endembed %} +
A husky being a loud baby.
+
+ +

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.

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

+ 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 quietly hides itself under rocks, + 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 bug Pokémon prey to come to it. + Its favorite in Alola is Cutiefly.{% include '@cloudfour/components/footnote-link/footnote-link.twig' with { + count: 2 + } only %} + +

+ +
+

CSS Grid Layout 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.

+

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.

+ +
+ +

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.

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

There are some places where Slowpoke is worshiped because of a long-standing belief that whenever Slowpoke yawns, it rains. Carrying food through Fearow’s territory is dangerous. 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 Pokémon’s feet are thought to change shape and become similar to the roots of trees.

+ + 
{{code_sample|trim|escape}}
+ +

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.

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

+ 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. +

+ +
+ {% include '@cloudfour/components/button/button.twig' with { + "content_end_icon": "arrow-right", + "label": "Next Article" + } only %} +
+ + {% 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 %} +

Aileen Jeffries Magna ea anim duis fugiat sit labore labore sit nisi eiusmod in consectetur duis id. Aliqua commodo aliqua do fugiat labore consectetur cillum exercitation. Quis do magna and adipisicing.

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

+ 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 %} +

+

+ 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. +

+ + {% 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": "

Tipiqi preload audience givob sirabino readable testing agile. Dimo coca benulob.

Fallback. Animation multidisciplinary kimob. Zegidutace automate mapateroni. Case study fallback hih cukirip issue polyfill. Web standards picture element input testing sketching.

", + "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": "

Performance fodorebipi automate ceror sufficient contrast picture 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.

This article rubuhamot pe design token HTTP/2 tit. Baroga tubilimil. Web app cilodob prototype theming picture element ropup service worker mib mol HTML bu SVG issue..

", + "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": "

Audience TL;DR. Typography deploy da mockups transparency SVG raxakarod lil bo accessibility padulid multidisciplinary input rulop service worker sticky notes this article experience dukiborebo rubuni tamapiroru theming UX lobi TL;DR. Dependency hobino.

", + "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 %} + + + {% include '@cloudfour/components/ground-nav/ground-nav.twig' with { + menu: menu, + social: social, + action: action, + organization: organization + } only %} + + {% endblock %} +{% endembed %} diff --git a/src/prototypes/article-series/single-article.stories.js b/src/prototypes/article-series/single-article.stories.js new file mode 100644 index 000000000..6251a7073 --- /dev/null +++ b/src/prototypes/article-series/single-article.stories.js @@ -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:info@cloudfour.com', + 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, + }, + }); +};