From 54c493502b4dda50e187d1e051581a50c86e9cb7 Mon Sep 17 00:00:00 2001 From: Caleb Eby Date: Thu, 7 Jul 2022 13:10:48 -0700 Subject: [PATCH 1/3] Fix useEffect() in sky nav --- src/components/sky-nav/sky-nav.stories.mdx | 48 ++++++++++++---------- 1 file changed, 27 insertions(+), 21 deletions(-) diff --git a/src/components/sky-nav/sky-nav.stories.mdx b/src/components/sky-nav/sky-nav.stories.mdx index a7bbdd6fe..4c722c676 100644 --- a/src/components/sky-nav/sky-nav.stories.mdx +++ b/src/components/sky-nav/sky-nav.stories.mdx @@ -35,6 +35,17 @@ The Sky Nav is intended for use with our [our dark theme](/docs/design-themes--d { + useEffect(() => { + const { destroy } = initSkyNav( + document.querySelector('.js-sky-nav-menu-toggle') + ); + return destroy; + }, []); + return story(); + }, + ]} parameters={{ layout: 'fullscreen', themes: { disable: true }, @@ -48,18 +59,10 @@ The Sky Nav is intended for use with our [our dark theme](/docs/design-themes--d }, }} > - {() => { - useEffect(() => { - const { destroy } = initSkyNav( - document.querySelector('.js-sky-nav-menu-toggle') - ); - return destroy; - }, []); - return template({ - class: 't-dark', - ...basicStoryArgs, - }); - }} + {template({ + class: 't-dark', + ...basicStoryArgs, + })} @@ -81,16 +84,19 @@ But it works without a theme, too, just in case: }, }, }} + decorators={[ + (story) => { + useEffect(() => { + const { destroy } = initSkyNav( + document.querySelector('.js-sky-nav-menu-toggle') + ); + return destroy; + }, []); + return story(); + }, + ]} > - {() => { - useEffect(() => { - const { destroy } = initSkyNav( - document.querySelector('.js-sky-nav-menu-toggle') - ); - return destroy; - }, []); - return template(basicStoryArgs); - }} + {template(basicStoryArgs)} From e7a34c693f5b88b922aa9259fdc9bbd2c76079c8 Mon Sep 17 00:00:00 2001 From: Caleb Eby Date: Thu, 7 Jul 2022 13:25:30 -0700 Subject: [PATCH 2/3] Move decorators to --- src/components/sky-nav/sky-nav.stories.mdx | 33 ++++++++-------------- 1 file changed, 11 insertions(+), 22 deletions(-) diff --git a/src/components/sky-nav/sky-nav.stories.mdx b/src/components/sky-nav/sky-nav.stories.mdx index 4c722c676..7dc51a77e 100644 --- a/src/components/sky-nav/sky-nav.stories.mdx +++ b/src/components/sky-nav/sky-nav.stories.mdx @@ -17,6 +17,17 @@ embedded examples. { + useEffect(() => { + const { destroy } = initSkyNav( + document.querySelector('.js-sky-nav-menu-toggle') + ); + return destroy; + }, []); + return story(); + }, + ]} /> # Sky Nav @@ -35,17 +46,6 @@ The Sky Nav is intended for use with our [our dark theme](/docs/design-themes--d { - useEffect(() => { - const { destroy } = initSkyNav( - document.querySelector('.js-sky-nav-menu-toggle') - ); - return destroy; - }, []); - return story(); - }, - ]} parameters={{ layout: 'fullscreen', themes: { disable: true }, @@ -84,17 +84,6 @@ But it works without a theme, too, just in case: }, }, }} - decorators={[ - (story) => { - useEffect(() => { - const { destroy } = initSkyNav( - document.querySelector('.js-sky-nav-menu-toggle') - ); - return destroy; - }, []); - return story(); - }, - ]} > {template(basicStoryArgs)} From 4288ba1bd97960baba418a52fe4078d6d6ca4460 Mon Sep 17 00:00:00 2001 From: Caleb Eby Date: Thu, 7 Jul 2022 13:42:14 -0700 Subject: [PATCH 3/3] Remove prototypes which use sky-nav --- .../single-article/example/example.twig | 293 -------------- .../single-article/single-article.stories.js | 43 -- src/prototypes/single-page/data/devices.json | 31 -- .../single-page/example/example.scss | 22 - .../single-page/example/example.twig | 203 ---------- .../single-page/single-page.stories.js | 20 - src/prototypes/team/data/avatars.json | 57 --- .../team/example/team-articles-page2.twig | 287 ------------- .../team/example/team-individual.scss | 82 ---- .../team/example/team-individual.twig | 379 ------------------ src/prototypes/team/example/team-list.twig | 172 -------- src/prototypes/team/team.stories.js | 35 -- src/prototypes/use-sky-nav.ts | 11 - 13 files changed, 1635 deletions(-) delete mode 100644 src/prototypes/single-article/example/example.twig delete mode 100644 src/prototypes/single-article/single-article.stories.js delete mode 100644 src/prototypes/single-page/data/devices.json delete mode 100644 src/prototypes/single-page/example/example.scss delete mode 100644 src/prototypes/single-page/example/example.twig delete mode 100644 src/prototypes/single-page/single-page.stories.js delete mode 100644 src/prototypes/team/data/avatars.json delete mode 100644 src/prototypes/team/example/team-articles-page2.twig delete mode 100644 src/prototypes/team/example/team-individual.scss delete mode 100644 src/prototypes/team/example/team-individual.twig delete mode 100644 src/prototypes/team/example/team-list.twig delete mode 100644 src/prototypes/team/team.stories.js delete mode 100644 src/prototypes/use-sky-nav.ts diff --git a/src/prototypes/single-article/example/example.twig b/src/prototypes/single-article/example/example.twig deleted file mode 100644 index d3a2c0fe4..000000000 --- a/src/prototypes/single-article/example/example.twig +++ /dev/null @@ -1,293 +0,0 @@ -{% 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/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/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/single-article/single-article.stories.js b/src/prototypes/single-article/single-article.stories.js deleted file mode 100644 index 4a8b1fd0b..000000000 --- a/src/prototypes/single-article/single-article.stories.js +++ /dev/null @@ -1,43 +0,0 @@ -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 singleArticlePrototype from './example/example.twig'; - -export default { - title: 'Prototypes/Single Article', - 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, - }, - }); -}; diff --git a/src/prototypes/single-page/data/devices.json b/src/prototypes/single-page/data/devices.json deleted file mode 100644 index 8afde775e..000000000 --- a/src/prototypes/single-page/data/devices.json +++ /dev/null @@ -1,31 +0,0 @@ -[ - { - "manufacturer": "Amazon", - "model": "Kindle Fire", - "os": "Android", - "version": "2.3" - }, - { - "manufacturer": "Amazon", - "model": "Kindle Fire HD", - "os": "Android", - "version": "4.0" - }, - { - "manufacturer": "Amazon", - "model": "Fire HD6", - "os": "Fire OS", - "version": "4.5.2" - }, - { - "manufacturer": "Amazon", - "model": "Fire TV", - "os": "Fire OS", - "version": "3.0" - }, - { - "manufacturer": "Apple", - "model": "iPhone (1st Gen)", - "os": "iOS" - } -] diff --git a/src/prototypes/single-page/example/example.scss b/src/prototypes/single-page/example/example.scss deleted file mode 100644 index 1f4b6fa7d..000000000 --- a/src/prototypes/single-page/example/example.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use "../../../mixins/ms"; -@use "../../../compiled/tokens/scss/size"; -@use "../../../compiled/tokens/scss/breakpoint"; - - -#single-page { - .main-container { - padding-top: ms.step(6); - padding-bottom: ms.step(6); - position: relative; - } - - .alert-container { - position: absolute; - top: -.5em; - left: 10%; - @media (min-width: breakpoint.$l) { - top: -1.5em; - left: 35%; - } - } -} diff --git a/src/prototypes/single-page/example/example.twig b/src/prototypes/single-page/example/example.twig deleted file mode 100644 index e0431c881..000000000 --- a/src/prototypes/single-page/example/example.twig +++ /dev/null @@ -1,203 +0,0 @@ -
- {% include '@cloudfour/components/sky-nav/sky-nav.twig' with { - "class": "t-dark", - "include_main_demo": false, - "menu": { - "items": [ - { - "link": "/does", - "title": "What We Do", - "current": true - }, - { - "link": "/believes", - "title": "Our Approach" - }, - { - "link": "/made", - "title": "Our Work" - }, - { - "link": "/thinks", - "title": "Articles" - }, - { - "link": "/presents", - "title": "Speaking" - }, - { - "link": "/contributes", - "title": "Labs" - }, - { - "link": "/is", - "title": "Team" - } - ] - } - } only %} - {% embed '@cloudfour/objects/container/container.twig' with { - class: 'o-container--prose o-container--pad main-container'} %} - {% block content %} - - - {% embed '@cloudfour/components/alert/alert.twig' with { - dismissable: true, - floating: true, - icon: 'cloud-slash', - class: 'alert-container' - } only %} - {% block content %} -

- You appear to be offline. Try again. -

- {% endblock %} - {% endembed %} - - {% embed '@cloudfour/objects/rhythm/rhythm.twig' with { - class: 'o-rhythm--generous-headings' } %} - {% block content %} - {% include '@cloudfour/components/heading/heading.twig' with { - level: -1, - content: 'Portland Open Device Lab', - } only %} - - {% embed '@cloudfour/objects/rhythm/rhythm.twig' with { - class: 'o-rhythm--default' } %} - {% block content %} - -

The Open Device Lab movement started in Portland. If you would like to use the lab, please schedule a visit.

- {% include '@cloudfour/components/heading/heading.twig' with { - level: 2, - content: 'Devices in the lab', - permalink: true - } only %} - {% embed '@cloudfour/components/table/table.twig' with { table_class: 'c-table--striped table' } %} - {% block header %} - Manufacturer - Model - OS - Version - {% endblock %} - {% block body %} - {% for device in devices %} - - {{device.manufacturer}} - {{device.model}} - {{device.os}} - {{device.version}} - - {% endfor %} - {% endblock %} - {% endembed %} - - {% include '@cloudfour/components/heading/heading.twig' with { - level: 2, - content: 'Another Heading' - } only %} - -

They live in groups in Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch. The one with the longest, thickest, and most-scarred horns is the boss of the herd.Swablu loves to make things clean. If it spots something dirty, it will wipe and polish it with its cottony wings. If its wings become dirty, this Pokémon finds a stream and showers itself.The hair on Zigzagoon’s back is bristly. It rubs the hard back hair against trees to leave its territorial markings. This Pokémon may play dead to fool foes in battle.

- -

Restored from DNA found in amber, this Pokémon exhibited ferocity that was greater than expected. Some casualties resulted.It’s not the strongest swimmer. It wags its tail to lure in its prey and then gulps them down as soon as they get close.Wynaut gather on moonlit nights to play by squeezing up against each other. By being squeezed, this Pokémon gains endurance and is trained to dole out powerful counterattacks.

- -

Shiftry’s large fans generate awesome gusts of wind at a speed close to 100 feet per second. The whipped-up wind blows anything away. This Pokémon chooses to live quietly deep in forests.The flame that burns at the tip of its tail is an indication of its emotions.

- -

Delicate equipment can malfunction in areas inhabited by Magneton, which send out mysterious electrical signals.It’s said that the patterns on its back are related to the stars in the night sky, but the details of that relationship remain unclear.The bug is mostly dead, with the mushroom on its back having become the main body. If the mushroom comes off, the bug stops moving.

- {% endblock %} - {% endembed %} - {% endblock %} - {% endembed %} - {% endblock %} - {% endembed %} - {% include '@cloudfour/components/ground-nav/ground-nav.twig' with { - "menu": { - "items": [ - { - "link": "/does", - "title": "What We Do", - "current": true - }, - { - "link": "/believes", - "title": "Our Approach" - }, - { - "link": "/made", - "title": "Our Work" - }, - { - "link": "/thinks", - "title": "Articles" - }, - { - "link": "/presents", - "title": "Speaking" - }, - { - "link": "/contributes", - "title": "Labs" - }, - { - "link": "/is", - "title": "Team" - }, - { - "link": "/portland-device-lab", - "title": "Device Lab" - }, - { - "link": "https://cloudfour-patterns.netlify.app/", - "title": "Patterns" - }, - { - "link": "https://www.responsivefieldday.com/", - "title": "Responsive Field Day" - } - ] - }, - "social": { - "items": [ - { - "link": "https://twitter.com/cloudfour", - "title": "Follow us on Twitter", - "icon": "brands/twitter" - }, - { - "link": "https://github.com/cloudfour", - "title": "Find us on GitHub", - "icon": "brands/github" - }, - { - "link": "https://www.instagram.com/cloudfourpdx/", - "title": "Follow us on Instagram", - "icon": "brands/instagram" - }, - { - "link": "https://www.linkedin.com/company/cloud-four", - "title": "Follow us on LinkedIn", - "icon": "brands/linkedin" - } - ] - }, - "action": { - "lead_in": "Let’s discuss your project!", - "title": "Email us", - "link": "mailto:info@cloudfour.com", - "icon": "envelope" - }, - "organization": { - "name": "Cloud Four, Inc.", - "address": { - "street_address": "510 SW 3rd Ave, Suite 420", - "address_locality": "Portland", - "address_region": "Oregon", - "postal_code": "97204", - "address_country": "USA" - }, - "email": "info@cloudfour.com", - "telephone": "+1 (503) 290-1090", - "url": "https://cloudfour.com/", - "founding_date": "2007-12-13" - } - } only %} -
diff --git a/src/prototypes/single-page/single-page.stories.js b/src/prototypes/single-page/single-page.stories.js deleted file mode 100644 index fa1f1ae72..000000000 --- a/src/prototypes/single-page/single-page.stories.js +++ /dev/null @@ -1,20 +0,0 @@ -import { useSkyNav } from '../use-sky-nav.ts'; - -import devices from './data/devices.json'; -import singlePagePrototype from './example/example.twig'; - -import './example/example.scss'; - -export default { - title: 'Prototypes/Single Page', - parameters: { - layout: 'fullscreen', - }, -}; - -export const Example = () => { - useSkyNav(); - return singlePagePrototype({ - devices, - }); -}; diff --git a/src/prototypes/team/data/avatars.json b/src/prototypes/team/data/avatars.json deleted file mode 100644 index b4183fe8f..000000000 --- a/src/prototypes/team/data/avatars.json +++ /dev/null @@ -1,57 +0,0 @@ -[ - { - "name": "Aileen Jeffries", - "role": "Co-founder", - "image": "media/team-avatars/aileen.png" - }, - { - "name": "Jason Grigsby", - "role": "Co-founder", - "image": "media/team-avatars/jason.png" - }, - { - "name": "Megan Notarte", - "role": "Partner, Vice President", - "image": "media/team-avatars/megan.png" - }, - { - "name": "Tyler Sticka", - "role": "Partner, Vice President", - "image": "media/team-avatars/tyler.png" - }, - { - "name": "Gerardo Rodriguez", - "role": "Senior Front-end Developer", - "image": "media/team-avatars/gerardo.png" - }, - { - "name": "Caleb Eby", - "role": "Junior Front-end Developer", - "image": "media/team-avatars/caleb.png" - }, - { - "name": "Arianna Chau", - "role": "Front-end Designer", - "image": "media/team-avatars/arianna.png" - }, - { - "name": "Scott Vandehey", - "role": "Senior Front-end Developer", - "image": "media/team-avatars/scott.png" - }, - { - "name": "Danielle Romo", - "role": "Front-end Designer", - "image": "media/team-avatars/danielle.png" - }, - { - "name": "Joey Hays", - "role": "Digital Project Manager", - "image": "media/team-avatars/joey.png" - }, - { - "name": "Paul Hebert", - "role": "Senior Designer-Developer", - "image": "media/team-avatars/paul.png" - } -] diff --git a/src/prototypes/team/example/team-articles-page2.twig b/src/prototypes/team/example/team-articles-page2.twig deleted file mode 100644 index d1e4741a8..000000000 --- a/src/prototypes/team/example/team-articles-page2.twig +++ /dev/null @@ -1,287 +0,0 @@ -
- {% include '@cloudfour/components/sky-nav/sky-nav.twig' with { - "class": "t-dark", - "include_main_demo": false, - "menu": { - "items": [ - { - "link": "/does", - "title": "What We Do", - "current": true - }, - { - "link": "/believes", - "title": "Our Approach" - }, - { - "link": "/made", - "title": "Our Work" - }, - { - "link": "/thinks", - "title": "Articles" - }, - { - "link": "/presents", - "title": "Speaking" - }, - { - "link": "/contributes", - "title": "Labs" - }, - { - "link": "/is", - "title": "Team" - } - ] - } - } only %} - - {% embed '@cloudfour/objects/container/container.twig' with { - label: avatar.name, - class: 'o-container--pad' - } %} - {% block content %} -
- {% include '@cloudfour/components/heading/heading.twig' with { - level: 0, - content: 'Articles by Jason, Page 2', - class: 'c-heading--light' - } only %} -
- {% include '@cloudfour/objects/deck/demo/articles.twig' with { - "items": [ - { - "title": "Building Flexible Components With Transparency", - "pubDate": "2020-11-19 17:28:54", - "link": "https://cloudfour.com/thinks/building-flexible-components-with-transparency/", - "guid": "https://cloudfour.com/?p=6017", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/11/transparent-flexible.png", - "description": "By adding a touch of transparency, we can design components that automatically adapt to their backgrounds." - }, - { - "title": "22 Panels That Always Work: Wally Wood’s Legendary Productivity Hack", - "pubDate": "2020-01-14 16:49:28", - "link": "https://cloudfour.com/thinks/22-panels-that-always-work-wally-woods-legendary-productivity-hack/", - "guid": "https://cloudfour.com/?p=5678", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/01/wallywood22panel1600.jpg", - "description": "Comic book artist Wally Wood’s “22 Panels That Always Work” is a legendary bit of productivity hacking. How can you reduce “noodling” in your work?" - }, - { - "title": "An HTML attribute potentially worth $4.4M to Chipotle", - "pubDate": "2019-09-19 16:57:12", - "link": "https://cloudfour.com/thinks/an-html-attribute-potentially-worth-4-4m-to-chipotle/", - "guid": "https://cloudfour.com/?p=5555", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2019/09/Screen-Shot-2019-09-19-at-9.52.57-AM.png", - "description": "My parents are retired in Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch. They continue to try to pay for meals. I don't want them to. So we often end up in a competition to see who can pay first. In this case, I knew I had an advantage. My card details were already stored in the browser. I just needed to use autofill..." - }, - { - "title": "Building Flexible Components With Transparency", - "pubDate": "2020-11-19 17:28:54", - "link": "https://cloudfour.com/thinks/building-flexible-components-with-transparency/", - "guid": "https://cloudfour.com/?p=6017", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/11/transparent-flexible.png", - "description": "By adding a touch of transparency, we can design components that automatically adapt to their backgrounds." - }, - { - "title": "22 Panels That Always Work: Wally Wood’s Legendary Productivity Hack", - "pubDate": "2020-01-14 16:49:28", - "link": "https://cloudfour.com/thinks/22-panels-that-always-work-wally-woods-legendary-productivity-hack/", - "guid": "https://cloudfour.com/?p=5678", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/01/wallywood22panel1600.jpg", - "description": "Comic book artist Wally Wood’s “22 Panels That Always Work” is a legendary bit of productivity hacking. How can you reduce “noodling” in your work?" - }, - { - "title": "An HTML attribute potentially worth $4.4M to Chipotle", - "pubDate": "2019-09-19 16:57:12", - "link": "https://cloudfour.com/thinks/an-html-attribute-potentially-worth-4-4m-to-chipotle/", - "guid": "https://cloudfour.com/?p=5555", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2019/09/Screen-Shot-2019-09-19-at-9.52.57-AM.png", - "description": "My parents are retired. They continue to try to pay for meals. I don't want them to. So we often end up in a competition to see who can pay first. In this case, I knew I had an advantage. My card details were already stored in the browser. I just needed to use autofill..." - }, - { - "title": "Building Flexible Components With Transparency", - "pubDate": "2020-11-19 17:28:54", - "link": "https://cloudfour.com/thinks/building-flexible-components-with-transparency/", - "guid": "https://cloudfour.com/?p=6017", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/11/transparent-flexible.png", - "description": "By adding a touch of transparency, we can design components that automatically adapt to their backgrounds." - }, - { - "title": "22 Panels That Always Work: Wally Wood’s Legendary Productivity Hack", - "pubDate": "2020-01-14 16:49:28", - "link": "https://cloudfour.com/thinks/22-panels-that-always-work-wally-woods-legendary-productivity-hack/", - "guid": "https://cloudfour.com/?p=5678", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/01/wallywood22panel1600.jpg", - "description": "Comic book artist Wally Wood’s “22 Panels That Always Work” is a legendary bit of productivity hacking. How can you reduce “noodling” in your work?" - }, - { - "title": "An HTML attribute potentially worth $4.4M to Chipotle", - "pubDate": "2019-09-19 16:57:12", - "link": "https://cloudfour.com/thinks/an-html-attribute-potentially-worth-4-4m-to-chipotle/", - "guid": "https://cloudfour.com/?p=5555", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2019/09/Screen-Shot-2019-09-19-at-9.52.57-AM.png", - "description": "My parents are retired. They continue to try to pay for meals. I don't want them to. So we often end up in a competition to see who can pay first. In this case, I knew I had an advantage. My card details were already stored in the browser. I just needed to use autofill..." - } - ], - "columns": 3, - "columnsBreakpoint": "none", - "horizontalItem": 1, - "horizontalBreakpoint": "none" - } only %} -
-
- {% include '@cloudfour/components/pagination/pagination.twig' with { - "pagination": { - "mid_size": 2, - "current": 2, - "total": 36, - "prev": { - "title": 1, - "text": 1, - "name": 1, - "current": false, - "link": "#page-1" - }, - "next": { - "title": 3, - "text": 3, - "name": 3, - "current": false, - "link": "#page-3" - }, - "pages": [ - { - "title": 1, - "text": 1, - "name": 1, - "current": false, - "link": "#page-1" - }, - { - "title": 2, - "text": 2, - "name": 2, - "current": true, - "link": false - }, - { - "title": 3, - "text": 3, - "name": 3, - "current": false, - "link": "#page-3" - }, - { - "title": 4, - "text": 4, - "name": 4, - "current": false, - "link": "#page-4" - }, - { - "title": 5, - "text": 5, - "name": 5, - "current": false, - "link": "#page-5" - } - ] - } - } only %} -
-
- {% endblock %} - {% endembed %} - {% include '@cloudfour/components/ground-nav/ground-nav.twig' with { - "menu": { - "items": [ - { - "link": "/does", - "title": "What We Do", - "current": true - }, - { - "link": "/believes", - "title": "Our Approach" - }, - { - "link": "/made", - "title": "Our Work" - }, - { - "link": "/thinks", - "title": "Articles" - }, - { - "link": "/presents", - "title": "Speaking" - }, - { - "link": "/contributes", - "title": "Labs" - }, - { - "link": "/is", - "title": "Team" - }, - { - "link": "/portland-device-lab", - "title": "Device Lab" - }, - { - "link": "https://cloudfour-patterns.netlify.app/", - "title": "Patterns" - }, - { - "link": "https://www.responsivefieldday.com/", - "title": "Responsive Field Day" - } - ] - }, - "social": { - "items": [ - { - "link": "https://twitter.com/cloudfour", - "title": "Follow us on Twitter", - "icon": "brands/twitter" - }, - { - "link": "https://github.com/cloudfour", - "title": "Find us on GitHub", - "icon": "brands/github" - }, - { - "link": "https://www.instagram.com/cloudfourpdx/", - "title": "Follow us on Instagram", - "icon": "brands/instagram" - }, - { - "link": "https://www.linkedin.com/company/cloud-four", - "title": "Follow us on LinkedIn", - "icon": "brands/linkedin" - } - ] - }, - "action": { - "lead_in": "Let’s discuss your project!", - "title": "Email us", - "link": "mailto:info@cloudfour.com", - "icon": "envelope" - }, - "organization": { - "name": "Cloud Four, Inc.", - "address": { - "street_address": "510 SW 3rd Ave, Suite 420", - "address_locality": "Portland", - "address_region": "Oregon", - "postal_code": "97204", - "address_country": "USA" - }, - "email": "info@cloudfour.com", - "telephone": "+1 (503) 290-1090", - "url": "https://cloudfour.com/", - "founding_date": "2007-12-13" - } - } only %} -
diff --git a/src/prototypes/team/example/team-individual.scss b/src/prototypes/team/example/team-individual.scss deleted file mode 100644 index a588358b0..000000000 --- a/src/prototypes/team/example/team-individual.scss +++ /dev/null @@ -1,82 +0,0 @@ -@use "../../../compiled/tokens/scss/breakpoint"; -@use "../../../compiled/tokens/scss/color"; -@use "../../../mixins/ms"; - -#team-member { - .avatar-image { - width: 12em; - margin: 0 auto; - @media (min-width: breakpoint.$l) { - margin: 0; - width: 14em; - } - } - - .heading { - .sub-heading { - font-size: ms.step(1); - padding-top: ms.step(-3); - - @media (min-width: breakpoint.$l) { - padding-top: ms.step(-1); - padding-bottom: ms.step(0); - } - } - } - - .left-column { - display: flex; - flex-direction: column; - align-items: center; - - .link-list__upper { - display: none; - padding-top: ms.step(0); - text-align: center; - list-style: none; - margin-left: - ms.step(1); - @media (min-width: breakpoint.$l) { - display: inline; - } - } - } - - .link-list__lower { - display: inline; - padding-top: ms.step(0); - list-style: none; - @media (min-width: breakpoint.$l) { - display: none; - } - } - - .heading-container { - padding-top: ms.step(6); - padding-bottom: ms.step(6); - } - - .article-container { - background-color: #{color.$base-gray-lighter}; - padding-top: ms.step(6); - padding-bottom: ms.step(6); - .article-heading { - padding-bottom: ms.step(1); - } - } - - .talk-container { - padding-top: ms.step(6); - padding-bottom: ms.step(6); - .talks-heading { - padding-bottom: ms.step(1); - } - } - - .c-pagination { - padding-top: ms.step(6); - } - - .right-column { - padding-left: 0; - } -} diff --git a/src/prototypes/team/example/team-individual.twig b/src/prototypes/team/example/team-individual.twig deleted file mode 100644 index b0456f579..000000000 --- a/src/prototypes/team/example/team-individual.twig +++ /dev/null @@ -1,379 +0,0 @@ -
- {% include '@cloudfour/components/sky-nav/sky-nav.twig' with { - "include_main_demo": false, - "class": "t-dark", - "menu": { - "items": [ - { - "link": "/does", - "title": "What We Do", - }, - { - "link": "/believes", - "title": "Our Approach" - }, - { - "link": "/made", - "title": "Our Work" - }, - { - "link": "/thinks", - "title": "Articles" - }, - { - "link": "/presents", - "title": "Speaking" - }, - { - "link": "/contributes", - "title": "Labs" - }, - { - "link": "/is", - "title": "Team" - } - ] - } - } only %} - - {% embed '@cloudfour/objects/container/container.twig' with { label: avatar.name, class: 'o-container--pad heading-container'} %} - {% block content %} - {% embed '@cloudfour/objects/feature-group/feature-group.twig' %} - {% block intro %} -
- {% for avatar in avatars if avatar.name == "Jason Grigsby" %} - {% include '@cloudfour/components/avatar/avatar.twig' with { - "size": "full", - "src": avatar.image, - "class": "avatar-image", - } only %} - {% endfor %} - -
- {% endblock %} - {% block content %} - {% embed '@cloudfour/objects/container/container.twig' with { - "prose": true, - "pad": [ - "block", - "inline" - ], - "class": "o-container--prose right-column" - } %} - {% block content %} - {% embed '@cloudfour/objects/rhythm/rhythm.twig' with { class: 'o-rhythm--generous-headings heading' } %} - {% block content %} -
- {% include '@cloudfour/components/heading/heading.twig' with { - level: 0, - content: 'Jason Grigsby', - } only %} -

Co-founder

-
-

In 2000, Jason Grigsby got his first mobile phone. He became obsessed with how Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch could be a better place if everyone had access to the world’s information in their pockets. When his soon-to-be-wife met him, he had covered the walls of his apartment with crazy mobile dreams. To this day, he remains baffled that - she married him.

-

Those mobile dreams hit the hard wall of reality: WAP was crap. So Jason went to work on the web until 2007, when the iPhone made it clear the time was right. He joined forces with the three smartest people he knew and started Cloud Four.

-

He is the author of Progressive Web Apps from A Book Apart and co-author of Head First Mobile Web from O'Reilly. His writing and work helped define the new web standards for responsive images.

-

He was the founder and president of Mobile Portland, a local nonprofit dedicated to promoting the mobile community where he started the first community device lab. There are now over 150 device labs in the world.

-

Since co-founding Cloud Four, he has had the good fortune to work on many fantastic projects, including the Obama iPhone App and Walmart's responsive design. Jason is a sought‐after speaker and consultant on web technology and mobile.

- - {% endblock %} - {% endembed %} - {% endblock %} - {% endembed %} - {% endblock %} - {% endembed %} - {% endblock %} - {% endembed %} - {% embed '@cloudfour/objects/container/container.twig' with { label: avatar.name, class: 'o-container--pad article-container'} %} - {% block content %} - {% include '@cloudfour/components/heading/heading.twig' with { - level: 0, - content: 'Articles', - class: 'c-heading--light article-heading' - } only %} - {% include '@cloudfour/objects/deck/demo/articles.twig' with { - "items": [ - { - "title": "Building Flexible Components With Transparency", - "pubDate": "2020-11-19 17:28:54", - "link": "https://cloudfour.com/thinks/building-flexible-components-with-transparency/", - "guid": "https://cloudfour.com/?p=6017", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/11/transparent-flexible.png", - "description": "By adding a touch of transparency, we can design components that automatically adapt to their backgrounds." - }, - { - "title": "22 Panels That Always Work: Wally Wood’s Legendary Productivity Hack", - "pubDate": "2020-01-14 16:49:28", - "link": "https://cloudfour.com/thinks/22-panels-that-always-work-wally-woods-legendary-productivity-hack/", - "guid": "https://cloudfour.com/?p=5678", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/01/wallywood22panel1600.jpg", - "description": "Comic book artist Wally Wood’s “22 Panels That Always Work” is a legendary bit of productivity hacking. How can you reduce “noodling” in your work?" - }, - { - "title": "An HTML attribute potentially worth $4.4M to Chipotle", - "pubDate": "2019-09-19 16:57:12", - "link": "https://cloudfour.com/thinks/an-html-attribute-potentially-worth-4-4m-to-chipotle/", - "guid": "https://cloudfour.com/?p=5555", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2019/09/Screen-Shot-2019-09-19-at-9.52.57-AM.png", - "description": "My parents are retired. They continue to try to pay for meals. I don't want them to. So we often end up in a competition to see who can pay first. In this case, I knew I had an advantage. My card details were already stored in the browser. I just needed to use autofill..." - }, - { - "title": "Building Flexible Components With Transparency", - "pubDate": "2020-11-19 17:28:54", - "link": "https://cloudfour.com/thinks/building-flexible-components-with-transparency/", - "guid": "https://cloudfour.com/?p=6017", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/11/transparent-flexible.png", - "description": "By adding a touch of transparency, we can design components that automatically adapt to their backgrounds." - }, - { - "title": "22 Panels That Always Work: Wally Wood’s Legendary Productivity Hack", - "pubDate": "2020-01-14 16:49:28", - "link": "https://cloudfour.com/thinks/22-panels-that-always-work-wally-woods-legendary-productivity-hack/", - "guid": "https://cloudfour.com/?p=5678", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/01/wallywood22panel1600.jpg", - "description": "Comic book artist Wally Wood’s “22 Panels That Always Work” is a legendary bit of productivity hacking. How can you reduce “noodling” in your work?" - }, - { - "title": "An HTML attribute potentially worth $4.4M to Chipotle", - "pubDate": "2019-09-19 16:57:12", - "link": "https://cloudfour.com/thinks/an-html-attribute-potentially-worth-4-4m-to-chipotle/", - "guid": "https://cloudfour.com/?p=5555", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2019/09/Screen-Shot-2019-09-19-at-9.52.57-AM.png", - "description": "My parents are retired. They continue to try to pay for meals. I don't want them to. So we often end up in a competition to see who can pay first. In this case, I knew I had an advantage. My card details were already stored in the browser. I just needed to use autofill..." - }, - { - "title": "Building Flexible Components With Transparency", - "pubDate": "2020-11-19 17:28:54", - "link": "https://cloudfour.com/thinks/building-flexible-components-with-transparency/", - "guid": "https://cloudfour.com/?p=6017", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/11/transparent-flexible.png", - "description": "By adding a touch of transparency, we can design components that automatically adapt to their backgrounds." - }, - { - "title": "22 Panels That Always Work: Wally Wood’s Legendary Productivity Hack", - "pubDate": "2020-01-14 16:49:28", - "link": "https://cloudfour.com/thinks/22-panels-that-always-work-wally-woods-legendary-productivity-hack/", - "guid": "https://cloudfour.com/?p=5678", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/01/wallywood22panel1600.jpg", - "description": "Comic book artist Wally Wood’s “22 Panels That Always Work” is a legendary bit of productivity hacking. How can you reduce “noodling” in your work?" - }, - { - "title": "An HTML attribute potentially worth $4.4M to Chipotle", - "pubDate": "2019-09-19 16:57:12", - "link": "https://cloudfour.com/thinks/an-html-attribute-potentially-worth-4-4m-to-chipotle/", - "guid": "https://cloudfour.com/?p=5555", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2019/09/Screen-Shot-2019-09-19-at-9.52.57-AM.png", - "description": "My parents are retired. They continue to try to pay for meals. I don't want them to. So we often end up in a competition to see who can pay first. In this case, I knew I had an advantage. My card details were already stored in the browser. I just needed to use autofill..." - } - ], - "columns": 3, - "columnsBreakpoint": "none", - "horizontalItem": 1, - "horizontalBreakpoint": "none" - } only %} - - {% include '@cloudfour/components/pagination/pagination.twig' with { - "pagination": { - "mid_size": 2, - "current": 2, - "total": 36, - "prev": { - "title": 1, - "text": 1, - "name": 1, - "current": false, - "link": "#page-1" - }, - "next": { - "title": 3, - "text": 3, - "name": 3, - "current": false, - "link": "#page-3" - }, - "pages": [ - { - "title": 1, - "text": 1, - "name": 1, - "current": false, - "link": "#page-1" - }, - { - "title": 2, - "text": 2, - "name": 2, - "current": true, - "link": false - }, - { - "title": 3, - "text": 3, - "name": 3, - "current": false, - "link": "#page-3" - }, - { - "title": 4, - "text": 4, - "name": 4, - "current": false, - "link": "#page-4" - }, - { - "title": 5, - "text": 5, - "name": 5, - "current": false, - "link": "#page-5" - } - ] - } - } only %} - - {% endblock %} - {% endembed %} - {% embed '@cloudfour/objects/container/container.twig' with { label: avatar.name, class: 'o-container--pad talk-container'} %} - {% block content %} - {% include '@cloudfour/components/heading/heading.twig' with { - level: 0, - content: 'Talks', - class: 'c-heading--light talks-heading' - } only %} - {% include '@cloudfour/objects/deck/demo/articles.twig' with { - "items": [ - { - "title": "Building Flexible Components With Transparency", - "pubDate": "2020-11-19 17:28:54", - "link": "https://cloudfour.com/thinks/building-flexible-components-with-transparency/", - "guid": "https://cloudfour.com/?p=6017", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/11/transparent-flexible.png", - "description": "By adding a touch of transparency, we can design components that automatically adapt to their backgrounds." - }, - { - "title": "22 Panels That Always Work: Wally Wood’s Legendary Productivity Hack", - "pubDate": "2020-01-14 16:49:28", - "link": "https://cloudfour.com/thinks/22-panels-that-always-work-wally-woods-legendary-productivity-hack/", - "guid": "https://cloudfour.com/?p=5678", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2020/01/wallywood22panel1600.jpg", - "description": "Comic book artist Wally Wood’s “22 Panels That Always Work” is a legendary bit of productivity hacking. How can you reduce “noodling” in your work?" - }, - { - "title": "An HTML attribute potentially worth $4.4M to Chipotle", - "pubDate": "2019-09-19 16:57:12", - "link": "https://cloudfour.com/thinks/an-html-attribute-potentially-worth-4-4m-to-chipotle/", - "guid": "https://cloudfour.com/?p=5555", - "thumbnail": "https://cloudfour.com/wp-content/uploads/2019/09/Screen-Shot-2019-09-19-at-9.52.57-AM.png", - "description": "My parents are retired. They continue to try to pay for meals. I don't want them to. So we often end up in a competition to see who can pay first. In this case, I knew I had an advantage. My card details were already stored in the browser. I just needed to use autofill..." - } - ], - "columns": 3, - "columnsBreakpoint": "none", - "horizontalItem": 1, - "horizontalBreakpoint": "none" - } only %} - {% endblock %} - {% endembed %} - {% include '@cloudfour/components/ground-nav/ground-nav.twig' with { - "menu": { - "items": [ - { - "link": "/does", - "title": "What We Do", - "current": true - }, - { - "link": "/believes", - "title": "Our Approach" - }, - { - "link": "/made", - "title": "Our Work" - }, - { - "link": "/thinks", - "title": "Articles" - }, - { - "link": "/presents", - "title": "Speaking" - }, - { - "link": "/contributes", - "title": "Labs" - }, - { - "link": "/is", - "title": "Team" - }, - { - "link": "/portland-device-lab", - "title": "Device Lab" - }, - { - "link": "https://cloudfour-patterns.netlify.app/", - "title": "Patterns" - }, - { - "link": "https://www.responsivefieldday.com/", - "title": "Responsive Field Day" - } - ] - }, - "social": { - "items": [ - { - "link": "https://twitter.com/cloudfour", - "title": "Follow us on Twitter", - "icon": "brands/twitter" - }, - { - "link": "https://github.com/cloudfour", - "title": "Find us on GitHub", - "icon": "brands/github" - }, - { - "link": "https://www.instagram.com/cloudfourpdx/", - "title": "Follow us on Instagram", - "icon": "brands/instagram" - }, - { - "link": "https://www.linkedin.com/company/cloud-four", - "title": "Follow us on LinkedIn", - "icon": "brands/linkedin" - } - ] - }, - "action": { - "lead_in": "Let’s discuss your project!", - "title": "Email us", - "link": "mailto:info@cloudfour.com", - "icon": "envelope" - }, - "organization": { - "name": "Cloud Four, Inc.", - "address": { - "street_address": "510 SW 3rd Ave, Suite 420", - "address_locality": "Portland", - "address_region": "Oregon", - "postal_code": "97204", - "address_country": "USA" - }, - "email": "info@cloudfour.com", - "telephone": "+1 (503) 290-1090", - "url": "https://cloudfour.com/", - "founding_date": "2007-12-13" - } - } only %} -
diff --git a/src/prototypes/team/example/team-list.twig b/src/prototypes/team/example/team-list.twig deleted file mode 100644 index 00a40e898..000000000 --- a/src/prototypes/team/example/team-list.twig +++ /dev/null @@ -1,172 +0,0 @@ -{% include '@cloudfour/components/sky-nav/sky-nav.twig' with { - "class": "t-dark", - "menu": { - "items": [ - { - "link": "/does", - "title": "What We Do", - "current": true - }, - { - "link": "/believes", - "title": "Our Approach" - }, - { - "link": "/made", - "title": "Our Work" - }, - { - "link": "/thinks", - "title": "Articles" - }, - { - "link": "/presents", - "title": "Speaking" - }, - { - "link": "/contributes", - "title": "Labs" - }, - { - "link": "/is", - "title": "Team" - } - ] - } -} only %} -{% embed '@cloudfour/components/cloud-cover/cloud-cover.twig' only %} - {% block content %} - {% embed '@cloudfour/objects/rhythm/rhythm.twig' with { - class: 'o-rhythm--condensed' - } only %} - {% block content %} - {% include '@cloudfour/components/heading/heading.twig' with { - level: -2, - content: 'Our Team' - } only %} -

- We are a small, versatile team who care passionately about the web. - We’re full of what our industry considers unicorns. Our designers - code. Our developers went to art school. -

- {% endblock %} - {% endembed %} - {% endblock %} -{% endembed %} - -{% embed '@cloudfour/objects/container/container.twig' with { -"class": "o-container--pad" } %} - {% block content %} - {% embed '@cloudfour/objects/deck/deck.twig' with { - class: 'o-deck--2-column@s o-deck--4-column@l', - avatars: avatars - } only %} - {% block content %} - {% for avatar in avatars %} - {% embed '@cloudfour/components/card/card.twig' with { href: '#', avatar: avatar, class: 'c-card--circle-cover' } only %} - {% block heading %} - {{avatar.name}} - {% endblock %} - {% block cover %} - - {% endblock %} - {% block content %} -

{{avatar.role}}

- {% endblock %} - {% endembed %} - {% endfor %} - {% endblock %} - {% endembed %} - {% endblock %} -{% endembed %} -{% include '@cloudfour/components/ground-nav/ground-nav.twig' with { - "menu": { - "items": [ - { - "link": "/does", - "title": "What We Do", - "current": true - }, - { - "link": "/believes", - "title": "Our Approach" - }, - { - "link": "/made", - "title": "Our Work" - }, - { - "link": "/thinks", - "title": "Articles" - }, - { - "link": "/presents", - "title": "Speaking" - }, - { - "link": "/contributes", - "title": "Labs" - }, - { - "link": "/is", - "title": "Team" - }, - { - "link": "/portland-device-lab", - "title": "Device Lab" - }, - { - "link": "https://cloudfour-patterns.netlify.app/", - "title": "Patterns" - }, - { - "link": "https://www.responsivefieldday.com/", - "title": "Responsive Field Day" - } - ] - }, - "social": { - "items": [ - { - "link": "https://twitter.com/cloudfour", - "title": "Follow us on Twitter", - "icon": "brands/twitter" - }, - { - "link": "https://github.com/cloudfour", - "title": "Find us on GitHub", - "icon": "brands/github" - }, - { - "link": "https://www.instagram.com/cloudfourpdx/", - "title": "Follow us on Instagram", - "icon": "brands/instagram" - }, - { - "link": "https://www.linkedin.com/company/cloud-four", - "title": "Follow us on LinkedIn", - "icon": "brands/linkedin" - } - ] - }, - "action": { - "lead_in": "Let’s discuss your project!", - "title": "Email us", - "link": "mailto:info@cloudfour.com", - "icon": "envelope" - }, - "organization": { - "name": "Cloud Four, Inc.", - "address": { - "street_address": "510 SW 3rd Ave, Suite 420", - "address_locality": "Portland", - "address_region": "Oregon", - "postal_code": "97204", - "address_country": "USA" - }, - "email": "info@cloudfour.com", - "telephone": "+1 (503) 290-1090", - "url": "https://cloudfour.com/", - "founding_date": "2007-12-13" - } -} only %} diff --git a/src/prototypes/team/team.stories.js b/src/prototypes/team/team.stories.js deleted file mode 100644 index 2b7eca826..000000000 --- a/src/prototypes/team/team.stories.js +++ /dev/null @@ -1,35 +0,0 @@ -import { useSkyNav } from '../use-sky-nav.ts'; - -import avatars from './data/avatars.json'; -import teamArticlePage2 from './example/team-articles-page2.twig'; -import teamIndividualPrototype from './example/team-individual.twig'; -import teamListPrototype from './example/team-list.twig'; - -import './example/team-individual.scss'; - -export default { - title: 'Prototypes/Team Page', - parameters: { - docs: { page: null }, - layout: 'fullscreen', - }, -}; - -export const List = () => { - useSkyNav(); - return teamListPrototype({ - avatars, - }); -}; - -export const IndividualBio = () => { - useSkyNav(); - return teamIndividualPrototype({ - avatars, - }); -}; - -export const ArticlesPage2 = () => { - useSkyNav(); - return teamArticlePage2({}); -}; diff --git a/src/prototypes/use-sky-nav.ts b/src/prototypes/use-sky-nav.ts deleted file mode 100644 index b8244613d..000000000 --- a/src/prototypes/use-sky-nav.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { useEffect } from '@storybook/client-api'; -import { initSkyNav } from '../components/sky-nav/sky-nav'; - -export const useSkyNav = () => { - useEffect(() => { - const { destroy } = initSkyNav( - document.querySelector('.js-sky-nav-menu-toggle') - ); - return destroy; - }, []); -}