From f2c7a47aa52c91396e633e9cd4c2fd25f19639b2 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 14 Jun 2022 12:29:59 -0400
Subject: [PATCH] ISTWCMS-5596: Addition of base - aspect ratio, shadows,
sizes, borders, typography - for base elements display
---
src/patterns/02-base/aspects/aspects.twig | 13 ++
src/patterns/02-base/borders/borders.twig | 24 +++
src/patterns/02-base/colors/colors.js | 14 --
.../font-face => 02-base/fonts}/fonts.twig | 0
.../font-face => 02-base/fonts}/fonts.yml | 0
src/patterns/02-base/headings/headings.twig | 12 --
.../macros/{uw.macro.twig => _uw.macro.twig} | 0
src/patterns/02-base/media/media.twig | 14 ++
src/patterns/02-base/shadows/shadows.twig | 24 +++
src/patterns/02-base/sizes/sizes.twig | 22 +++
src/patterns/02-base/sizes/sizes.yml | 47 +++++
.../02-base/typography/typography.twig | 184 ++++++++++++++++++
.../02-base/typography/typography.yml | 10 +
.../04-components/details/details.twig | 10 +-
.../04-components/tag-list/tag-list.twig | 2 +-
15 files changed, 346 insertions(+), 30 deletions(-)
create mode 100644 src/patterns/02-base/aspects/aspects.twig
create mode 100644 src/patterns/02-base/borders/borders.twig
delete mode 100644 src/patterns/02-base/colors/colors.js
rename src/patterns/{01-core/font-face => 02-base/fonts}/fonts.twig (100%)
rename src/patterns/{01-core/font-face => 02-base/fonts}/fonts.yml (100%)
delete mode 100644 src/patterns/02-base/headings/headings.twig
rename src/patterns/02-base/macros/{uw.macro.twig => _uw.macro.twig} (100%)
create mode 100644 src/patterns/02-base/media/media.twig
create mode 100644 src/patterns/02-base/shadows/shadows.twig
create mode 100644 src/patterns/02-base/sizes/sizes.twig
create mode 100644 src/patterns/02-base/sizes/sizes.yml
create mode 100644 src/patterns/02-base/typography/typography.twig
create mode 100644 src/patterns/02-base/typography/typography.yml
diff --git a/src/patterns/02-base/aspects/aspects.twig b/src/patterns/02-base/aspects/aspects.twig
new file mode 100644
index 00000000..ee2c6d00
--- /dev/null
+++ b/src/patterns/02-base/aspects/aspects.twig
@@ -0,0 +1,13 @@
+<section class="pl-aspect-ratio">
+ <div class="just-for-gap">
+ <h3>Aspect Ratios</h3>
+ <article class="aspect-demo">
+ <div style="aspect-ratio: var(--ratio-square)">box</div>
+ <div style="aspect-ratio: var(--ratio-landscape)">landscape</div>
+ <div style="aspect-ratio: var(--ratio-portrait)">portrait</div>
+ <div style="aspect-ratio: var(--ratio-widescreen)">widescreen</div>
+ <div style="aspect-ratio: 1.6180/1">golden ratio</div>
+ <div style="aspect-ratio: 18/5">ultrawide</div>
+ </article>
+ </div>
+</section>
diff --git a/src/patterns/02-base/borders/borders.twig b/src/patterns/02-base/borders/borders.twig
new file mode 100644
index 00000000..2ceea208
--- /dev/null
+++ b/src/patterns/02-base/borders/borders.twig
@@ -0,0 +1,24 @@
+<section class="pl-borders">
+ <div class="just-for-gap">
+ <h3>Border Size</h3>
+ <article class="border-demo">
+ <div style="border-width: var(--border-size-1);">1</div>
+ <div style="border-width: var(--border-size-2);">2</div>
+ <div style="border-width: var(--border-size-3);">3</div>
+ <div style="border-width: var(--border-size-4);">4</div>
+ <div style="border-width: var(--border-size-5);">5</div>
+ </article>
+ </div>
+
+ <div class="just-for-gap">
+ <h3>Border Radius</h3>
+ <article class="border-demo">
+ <div style="border-radius: var(--radius-1);">1</div>
+ <div style="border-radius: var(--radius-2);">2</div>
+ <div style="border-radius: var(--radius-3);">3</div>
+ <div style="border-radius: var(--radius-4);">4</div>
+ <div style="border-radius: var(--radius-5);">5</div>
+ <div style="border-radius: var(--radius-round);">round</div>
+ </article>
+ </div>
+</section>
diff --git a/src/patterns/02-base/colors/colors.js b/src/patterns/02-base/colors/colors.js
deleted file mode 100644
index 0b2431b2..00000000
--- a/src/patterns/02-base/colors/colors.js
+++ /dev/null
@@ -1,14 +0,0 @@
-// var p = $("body");
-//
-// p.blinker();
-//
-// p.bind({
-// // pause blinking on mouseenter
-// mouseenter: function(){
-// $(this).data("blinker").pause();
-// },
-// // resume blinking on mouseleave
-// mouseleave: function(){
-// $(this).data("blinker").blinkagain();
-// }
-// });
diff --git a/src/patterns/01-core/font-face/fonts.twig b/src/patterns/02-base/fonts/fonts.twig
similarity index 100%
rename from src/patterns/01-core/font-face/fonts.twig
rename to src/patterns/02-base/fonts/fonts.twig
diff --git a/src/patterns/01-core/font-face/fonts.yml b/src/patterns/02-base/fonts/fonts.yml
similarity index 100%
rename from src/patterns/01-core/font-face/fonts.yml
rename to src/patterns/02-base/fonts/fonts.yml
diff --git a/src/patterns/02-base/headings/headings.twig b/src/patterns/02-base/headings/headings.twig
deleted file mode 100644
index 56e2b387..00000000
--- a/src/patterns/02-base/headings/headings.twig
+++ /dev/null
@@ -1,12 +0,0 @@
-<h1>h1. Heading Level 1</h1>
-<h2>h2. Heading Level 2</h2>
-<h3>h3. Heading Level 3</h3>
-<h4>h4. Heading Level 4</h4>
-<h5>h5. Heading Level 5</h5>
-<h6>h6. Heading Level 6</h6>
-<h1><a href="{{ url }}">h1. Heading Level 1 Link</a></h1>
-<h2><a href="{{ url }}">h2. Heading Level 2 Link</a></h2>
-<h3><a href="{{ url }}">h3. Heading Level 3 Link</a></h3>
-<h4><a href="{{ url }}">h4. Heading Level 4 Link</a></h4>
-<h5><a href="{{ url }}">h5. Heading Level 5 Link</a></h5>
-<h6><a href="{{ url }}">h6. Heading Level 6 Link</a></h6>
diff --git a/src/patterns/02-base/macros/uw.macro.twig b/src/patterns/02-base/macros/_uw.macro.twig
similarity index 100%
rename from src/patterns/02-base/macros/uw.macro.twig
rename to src/patterns/02-base/macros/_uw.macro.twig
diff --git a/src/patterns/02-base/media/media.twig b/src/patterns/02-base/media/media.twig
new file mode 100644
index 00000000..d7680962
--- /dev/null
+++ b/src/patterns/02-base/media/media.twig
@@ -0,0 +1,14 @@
+<section class="pl-media">
+ <div class="just-for-gap">
+ <h3>Audio</h3>
+ <article class="media-demo">
+ <audio controls="">audio</audio>
+ </article>
+ </div>
+ <div class="just-for-gap">
+ <h3>Video</h3>
+ <article class="media-demo">
+ <video controls="">video</video>
+ </article>
+ </div>
+</section>
diff --git a/src/patterns/02-base/shadows/shadows.twig b/src/patterns/02-base/shadows/shadows.twig
new file mode 100644
index 00000000..b02fecd0
--- /dev/null
+++ b/src/patterns/02-base/shadows/shadows.twig
@@ -0,0 +1,24 @@
+<section class="pl-shadows">
+ <div class="just-for-gap">
+ <h3>Box Shadow</h3>
+ <article class="shadow-demo">
+ <div style="box-shadow: var(--shadow-1);">Shadow 1</div>
+ <div style="box-shadow: var(--shadow-2);">Shadow 2</div>
+ <div style="box-shadow: var(--shadow-3);">Shadow 3</div>
+ <div style="box-shadow: var(--shadow-4);">Shadow 4</div>
+ <div style="box-shadow: var(--shadow-5);">Shadow 5</div>
+ <div style="box-shadow: var(--shadow-6);">Shadow 6</div>
+ </article>
+ </div>
+
+ <div class="just-for-gap">
+ <h3>Inner Shadow</h3>
+ <article class="shadow-demo">
+ <div style="box-shadow: var(--inner-shadow-0);">Inner Shadow 1</div>
+ <div style="box-shadow: var(--inner-shadow-1);">Inner Shadow 2</div>
+ <div style="box-shadow: var(--inner-shadow-2);">Inner Shadow 3</div>
+ <div style="box-shadow: var(--inner-shadow-3);">Inner Shadow 4</div>
+ <div style="box-shadow: var(--inner-shadow-4);">Inner Shadow 5</div>
+ </article>
+ </div>
+</section>
diff --git a/src/patterns/02-base/sizes/sizes.twig b/src/patterns/02-base/sizes/sizes.twig
new file mode 100644
index 00000000..902ae258
--- /dev/null
+++ b/src/patterns/02-base/sizes/sizes.twig
@@ -0,0 +1,22 @@
+<section class="pl-sizes">
+ <table class="sizes-demo">
+ <thead>
+ <tr>
+ <th>Size</th>
+ <th>REM</th>
+ <th>PX</th>
+ <th>Example</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for item in spacing %}
+ <tr>
+ <td>{{ item.size }}</td>
+ <td>{{ item.rem }}</td>
+ <td>{{ item.px }}</td>
+ <td><div style="block-size:{{ item.rem }}; background-color: gray;"></div></td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+</section>
diff --git a/src/patterns/02-base/sizes/sizes.yml b/src/patterns/02-base/sizes/sizes.yml
new file mode 100644
index 00000000..9f449f08
--- /dev/null
+++ b/src/patterns/02-base/sizes/sizes.yml
@@ -0,0 +1,47 @@
+---
+spacing:
+ - size: --size-xs
+ px: 1px
+ rem: 0.063rem
+ - size: --size-sm
+ px: 2px
+ rem: 0.125rem
+ - size: --size-05
+ px: 4px
+ rem: 0.25rem
+ - size: --size-1
+ px: 8px
+ rem: 0.5rem
+ - size: --size-105
+ px: 12px
+ rem: 0.75rem
+ - size: --size-2
+ px: 16px
+ rem: 1rem
+ - size: --size-205
+ px: 20px
+ rem: 1.25rem
+ - size: --size-3
+ px: 24px
+ rem: 1.5rem
+ - size: --size-4
+ px: 32px
+ rem: 2rem
+ - size: --size-5
+ px: 40px
+ rem: 2.5rem
+ - size: --size-6
+ px: 48px
+ rem: 3rem
+ - size: --size-7
+ px: 56px
+ rem: 3.5rem
+ - size: --size-8
+ px: 64px
+ rem: 4rem
+ - size: --size-9
+ px: 72px
+ rem: 4.5rem
+ - size: --size-10
+ px: 80px
+ rem: 5rem
diff --git a/src/patterns/02-base/typography/typography.twig b/src/patterns/02-base/typography/typography.twig
new file mode 100644
index 00000000..7a2472c0
--- /dev/null
+++ b/src/patterns/02-base/typography/typography.twig
@@ -0,0 +1,184 @@
+<section class="pl-typography">
+ <div class="gap">
+ <h3>Headings</h3>
+ <article class="typography-demo">
+ <h1>Heading Level 1</h1>
+ <h2>Heading Level 2</h2>
+ <h3>Heading Level 3</h3>
+ <h4>Heading Level 4</h4>
+ <h5>Heading Level 5</h5>
+ <h6>Heading Level 6</h6>
+ <h1><a href="{{ url }}">Heading Level 1 Link</a></h1>
+ <h2><a href="{{ url }}">Heading Level 2 Link</a></h2>
+ <h3><a href="{{ url }}">Heading Level 3 Link</a></h3>
+ <h4><a href="{{ url }}">Heading Level 4 Link</a></h4>
+ <h5><a href="{{ url }}">Heading Level 5 Link</a></h5>
+ <h6><a href="{{ url }}">Heading Level 6 Link</a></h6>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Paragraphs</h3>
+ <article class="typography-demo">
+ <p>A paragraph (from the Greek paragraphos, “to write beside†or “written besideâ€) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
+ <p>This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer sucessive paragraphs indented with no margins between them.</p>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Blockquotes</h3>
+ <article class="typography-demo">
+ {% block blockquote %}
+ {% include "@components/blockquote/blockquote.twig" with {
+ 'text': blockquote.text,
+ 'attribution': blockquote.attribution
+ }%}
+ {% endblock %}
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Lists</h3>
+ <article class="typography-demo">
+ <h4>Definition List</h4>
+ <dl>
+ <dt>Definition List Title</dt>
+ <dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
+ <dt>This is a term.</dt>
+ <dd>This is the definition of that term, which both live in a dl.</dd>
+ </dl>
+
+ <h4>Ordered List</h4>
+ <ol>
+ <li>This is a list item in an ordered list</li>
+ <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
+ <li>
+ Lists can be nested inside of each other
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list
+ <ol>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an ordered list</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ <li>This is the last list item</li>
+ </ol>
+ <ol>
+ <li>
+ <p>This is a paragraph within a list item in a different ordered list.</p>
+ <p>This is another paragraph in this list item.</p>
+ </li>
+ <li><p>This is a new paragraph within a different list item in the same ordered list.</p></li>
+ </ol>
+
+ <h4>Unordered List</h4>
+ <ul>
+ <li>This is a list item in an unordered list</li>
+ <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
+ <li>
+ Lists can be nested inside of each other
+ <ul>
+ <li>This is a nested list item</li>
+ <li>
+ This is another nested list item in an unordered list
+ <ul>
+ <li>This is a nested list item</li>
+ <li>
+ This is another nested list item in an unordered list
+ <ul>
+ <li>This is a nested list item</li>
+ <li>This is another nested list item in an unordered list</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li>This is the last list item</li>
+ </ul>
+ <ul>
+ <li>
+ <p>This is a paragraph within a list item in a different unordered list.</p>
+ <p>This is another paragraph in this list item.</p>
+ </li>
+ <li><p>This is a new paragraph within a different list item in the same unordered list.</p></li>
+ </ul>
+ </article>
+ </div>
+ <div class="gap">
+ <h3>Details</h3>
+ <article class="typography-demo">
+ {% block details%}
+ {% include "@components/details/details.twig" with {
+ 'is_open' : details.is_open,
+ 'details_classes': details.details.classes,
+ 'details_content': details.details_content,
+ 'details_description': details.details_description,
+ 'details_summary': details.details_summary,
+ }%}
+ {% endblock %}
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Horizontal rules</h3>
+ <article class="typography-demo">
+ <hr>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Code</h3>
+ <article class="typography-demo">
+ <p>Keybord input: <kbd>Cmd</kbd></p>
+ <p>Inline code:<code><div>code</div></code></p>
+ <p>Sample output: <samp>This is sample output from a computer program</samp></p>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Pre-formatted text</h3>
+ <article class="typography-demo">
+ <pre>
+ P R E F O R M A T T E D T E X T
+ ! " # $ % & ' ( ) * + , - . /
+ 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
+ @ A B C D E F G H I J K L M N O
+ P Q R S T U V W X Y Z [ \ ] ^ _
+ ` a b c d e f g h i j k l m n o
+ p q r s t u v w x y z { | } ~
+ </pre>
+ </article>
+ </div>
+
+ <div class="gap">
+ <h3>Inline elements</h3>
+ <article class="typography-demo">
+ <p><a href="{{ url }}">This is a text link</a></p>
+ <p><strong>Strong is used to indicate strong importance</strong></p>
+ <p><em>This text has added emphasis</em></p>
+ <p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
+ <p>The <i>i element</i> is text that is set off from the normal text</p>
+ <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
+ <p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
+ <p><s>This text has a strikethrough</s></p>
+ <p>Superscript<sup>®</sup></p>
+ <p>Subscript for things like H<sub>2</sub>O</p>
+ <p><small>This small text is small for for fine print, etc.</small></p>
+ <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
+ <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
+ <p><cite>This is a citation</cite></p>
+ <p>The <dfn>dfn element</dfn> indicates a definition.</p>
+ <p>The <mark>mark element</mark> indicates a highlight</p>
+ <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>
+ <p>The <time>time element</time>, such as <time>10:00pm</time></p>
+ </article>
+ </div>
diff --git a/src/patterns/02-base/typography/typography.yml b/src/patterns/02-base/typography/typography.yml
new file mode 100644
index 00000000..45287720
--- /dev/null
+++ b/src/patterns/02-base/typography/typography.yml
@@ -0,0 +1,10 @@
+blockquote:
+ text: '<p>This is some text from the yml file</p><p>This is some text from the yml file2. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file3</p><p>This is some text from the yml file4. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file5</p>'
+ attribution: 'This is the attribution'
+details:
+ is_open: true
+ details_classes: 'uw-pattern-lab'
+ details_summary: 'Details summary title here'
+ details_description: 'Details description'
+ details_content: |-
+ <p>Details content can be anything you want it to be</p>
diff --git a/src/patterns/04-components/details/details.twig b/src/patterns/04-components/details/details.twig
index cba4bcd7..5dabdab5 100644
--- a/src/patterns/04-components/details/details.twig
+++ b/src/patterns/04-components/details/details.twig
@@ -1,12 +1,16 @@
-<details class="uw-details" {% if is_open %} open{% endif %}>
+<details class="uw-details {{ details_classes }}" {% if details.is_open %} open{% endif %}>
<summary class="details__summary">
{% block details_summary %}
- Summary
+
+ {{ details_summary }}
+
{% endblock %}
</summary>
<div class="details__content">
{% block details_content %}
- Content
+
+ {{ details_content }}
+
{% endblock %}
</div>
</details>
diff --git a/src/patterns/04-components/tag-list/tag-list.twig b/src/patterns/04-components/tag-list/tag-list.twig
index 9c10d0e0..9f42d7bb 100644
--- a/src/patterns/04-components/tag-list/tag-list.twig
+++ b/src/patterns/04-components/tag-list/tag-list.twig
@@ -1,4 +1,4 @@
-{% import '@base/macros/uw.macro.twig' as macros %}
+{% import '@base/macros/_uw.macro.twig' as macros %}
<ul class="tag-list {{ modifier_classes }}">
{% for item in items %}
<li class="tag-list__item {% if item.faculty %}{{ item.faculty }}{% endif %}">
--
GitLab