Skip to content

Commit

Permalink
Full alpha implementation.
Browse files Browse the repository at this point in the history
  • Loading branch information
@marvel-uiuc
marvel-uiuc committed Sep 1, 2024
1 parent eddc68d commit b6c1fb7
Show file tree
Hide file tree
Showing 10 changed files with 425 additions and 108 deletions.
17 changes: 10 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ The following attributes can be used:

- `collapsed="true"` - make the menu always collapse regardless of viewport size.
- `collapsed="false"` - prevent the menu from collapsing.
- `open="true"` and `open="false"` are bound to the open/collapsed state of the menu.
- `open="true"` and `open="false"` are bound to the open/collapsed state of the menu. That
means this updates dynamically when the user opens or closes the menu, so it can be used to
target styling.
- `label` - the text shown when the menu is collapsed. The default value is
"Pages In This Section". This is also used as the accessible label of the navigation.

Expand Down Expand Up @@ -61,10 +63,11 @@ in the example below.
<a href="#">Animal Sciences Major</a>
<ilw-section-nav>
<a href="#" aria-current="page">Pre-Veterinary and Medical</a>
<a href="#">Food Animal</a>
<a href="#">Companion Animal Equine</a>
</ilw-section-nav>
<a href="#">Computer & Animal Science</a>
</ilw-section-nav>
<a href="#">Computer & Animal Science</a>
<ilw-section-nav>
<a href="#">Some Third Thing</a>
</ilw-section-nav>
</ilw-section-nav>
Expand All @@ -78,16 +81,16 @@ in the example below.
- If the links are based on very long page titles, consider using shortened versions in
the navigation. Several line breaks in one link can be confusing.
- Try and balance the length and depth of the navigation. A long list of links all on
the same level is hard to scan, but navigation deeper than 3 levels is also hard to
use.
the same level is hard to scan, but navigation deeper than 3 levels makes it difficult to
distinguish the hierarchy of the items.

## Upgrade Process

When upgrading from the v2 toolkit component, the following changes are needed:

- Rename all `il-section-nav` to `ilw-section-nav`.
- Remove heading tags (`h2`, `h3`, etc.). The first link will be emphasized as the root of
the navigation.
- Remove heading tags (`h2`, `h3`, etc.), and add `class="ilw-section-nav--root"` to the first
link instead.
- Remove the top-level `ul` or `ol` tag that's directly under `ilw-section-nav`.
- Replace all other `ul` or `ol` tags with `ilw-section-nav`.
- Remove all `li` tags.
Expand Down
2 changes: 1 addition & 1 deletion builder/ilw-section-nav.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"github": "https://github.com/web-illinois/ilw-section-nav/",
"type": "web component",
"element-name": "ilw-section-nav",
"description": "Description for builder.",
"description": "Secondary navigation for a section of a website.",
"toolkit-version": "",
"production-version": "",
"development-version": "1.0.0-alpha"
Expand Down
195 changes: 185 additions & 10 deletions builder/versions/ilw-section-nav.1.0.0-alpha.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,38 +4,213 @@
"github": "https://github.com/web-illinois/ilw-section-nav/",
"type": "web component",
"element-name": "ilw-section-nav",
"description": "Description for builder.",
"description": "Secondary navigation for a section of a website.",
"version": "1.0.0-alpha",
"date": "08/26/2024",
"date": "09/03/2024",
"css": "https://dev.toolkit.illinois.edu/ilw-section-nav/1.0.0-alpha/ilw-section-nav.css",
"js": "https://dev.toolkit.illinois.edu/ilw-section-nav/1.0.0-alpha/ilw-section-nav.js",
"production": false,
"notes": "",
"parent-style": "",
"parent-style": "margin: 0 auto; max-width: 400px;",
"samples": [
{
"name": "default",
"description": "Default information",
"text": "<p>Lorem ipsum</p>"
"text": "<a href=\"#\" class=\"ilw-section-nav--root\">Programs of Study</a>\n<a href=\"#\">Undergraduate Degrees</a>\n<ilw-section-nav>\n <a href=\"#\">Animal Sciences Major</a>\n <ilw-section-nav>\n <a href=\"#\" aria-current=\"page\">Pre-Veterinary and Medical</a>\n <a href=\"#\">Companion Animal Equine</a>\n </ilw-section-nav>\n</ilw-section-nav>\n<a href=\"#\">Computer & Animal Science</a>\n<ilw-section-nav>\n <a href=\"#\">Some Third Thing</a>\n</ilw-section-nav>"
}
],
"attributes-fixed": [],
"attributes-text": [],
"attributes-text": [
{
"name": "label",
"description": "Accessible label for the menu, and also the text of the toggle when collapsed",
"depreciated": false,
"values": [
"",
"true",
"false"
]
}
],
"attributes": [
{
"name": "theme",
"description": "Color theme used",
"name": "collapse",
"description": "Force to always collapse (true) or never collapse (false)",
"depreciated": false,
"values": [
"",
"blue",
"orange",
"white"
"true",
"false"
]
},
{
"name": "open",
"description": "Set the menu to be open by default when collapsed",
"depreciated": false,
"values": [
"",
"true",
"false"
]
}
],
"classes-fixed": [],
"classes": [],
"css-variables": [
{
"name": "--ilw-section-nav--margin-top",
"depreciated": false,
"description": "Margin above when not collapsed [default: 1.5em]"
},
{
"name": "--ilw-section-nav--collapsed--margin-bottom",
"depreciated": false,
"description": "Margin below when collapsed [default: 1.5em]"
},
{
"name": "--ilw-section-nav--collapsed--border",
"depreciated": false,
"description": "Bottom border when collapsed [default: 2px solid var(--il-blue)]"
},
{
"name": "--ilw-section-nav--line-height",
"depreciated": false,
"description": "Line height for links [default: 1.2rem]"
},
{
"name": "--ilw-section-nav--color",
"depreciated": false,
"description": "Normal link text color [default: var(--il-blue)]"
},
{
"name": "--ilw-section-nav--color--focus",
"depreciated": false,
"description": "Focused link text color [default: var(--il-blue)]"
},
{
"name": "--ilw-section-nav--color--hover",
"depreciated": false,
"description": "Hover link text color [default: var(--il-altgeld)]"
},
{
"name": "--ilw-section-nav--color--active",
"depreciated": false,
"description": "Active link text color [default: var(--il-altgeld)]"
},
{
"name": "--ilw-section-nav--level-padding",
"depreciated": false,
"description": "Left indentation for levels [default: 0.9375rem]"
},
{
"name": "--ilw-section-nav--level2-padding",
"depreciated": false,
"description": "Specific indentation for level 2 children [default: 1.5625rem]"
},
{
"name": "--ilw-section-nav--level0-font-size",
"depreciated": false,
"description": "First level children font size [default: 1.125rem]"
},
{
"name": "--ilw-section-nav--level1-font-size",
"depreciated": false,
"description": "Font size for all deeper children [default: 1rem]"
},
{
"name": "--ilw-section-nav--font-weight",
"depreciated": false,
"description": "Font weight for menu items [default: 600]"
},
{
"name": "--ilw-section-nav--item--height",
"depreciated": false,
"description": "Height of a nav element [default: 2.75rem]"
},
{
"name": "--ilw-section-nav--item--padding-top",
"depreciated": false,
"description": "Top padding for a nav item [default: 0.7rem]"
},
{
"name": "--ilw-section-nav--item--padding-right",
"depreciated": false,
"description": "Right padding for a nav item [default: 0.625rem]"
},
{
"name": "--ilw-section-nav--item--padding-bottom",
"depreciated": false,
"description": "Bottom padding for a nav item [default: 0.7rem]"
},
{
"name": "--ilw-section-nav--item--padding-left",
"depreciated": false,
"description": "Left padding for a nav item [default: 1.25rem]"
},
{
"name": "--ilw-section-nav--level1-border",
"depreciated": false,
"description": "Top border for first level items [default: 1px solid var(--il-storm-lighter-3)]"
},
{
"name": "--ilw-section-nav--root--font-size",
"depreciated": false,
"description": "Font size for the root link [default: 1.25rem]"
},
{
"name": "--ilw-section-nav--root--background",
"depreciated": false,
"description": "Background for the root link [default: var(--il-storm-lighter-4)]"
},
{
"name": "--ilw-section-nav--root--font-weight",
"depreciated": false,
"description": "Font weight for the root link [default: 700]"
},
{
"name": "--ilw-section-nav--toggle--font-size",
"depreciated": false,
"description": "Font size for the toggle when collapsed [default: 1rem]"
},
{
"name": "--ilw-section-nav--toggle--background",
"depreciated": false,
"description": "Background for the toggle [default: #E8E9EB]"
},
{
"name": "--ilw-section-nav--toggle--font",
"depreciated": false,
"description": "Font family for the toggle [default: var(--il-font-sans)]"
},
{
"name": "--ilw-section-nav--toggle--font-weight",
"depreciated": false,
"description": "Font weight for the toggle [default: 400]"
},
{
"name": "--ilw-section-nav--toggle--border",
"depreciated": false,
"description": "Bottom border for the toggle [default: 1px solid var(--il-storm-lighter-3)]"
},
{
"name": "--ilw-section-nav--toggle--background--active",
"depreciated": false,
"description": "Active background for the toggle [default: var(--il-arches-lighter-3)]"
},
{
"name": "--ilw-section-nav--current--symbol",
"depreciated": false,
"description": "Symbol shown in front of the current page in the nav [default: \"▸ \"]"
},
{
"name": "--ilw-section-nav--current--width",
"depreciated": false,
"description": "Width of the current page symbol [default: 0.6875rem]"
},
{
"name": "--ilw-section-nav--current--left",
"depreciated": false,
"description": "Left margin for the current page symbol [default: -0.6875rem]"
}
]
}
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"name": "@illinois-toolkit/ilw-section-nav",
"description": "One paragraph description of the component.",
"description": "Illinois Toolkit: Secondary navigation for a section of a website.",
"repository": "github:web-illinois/ilw-section-nav",
"private": false,
"license": "MIT",
"version": "0.0.1",
"version": "1.0.0-alpha",
"type": "module",
"files": [
"src/**",
Expand Down
6 changes: 3 additions & 3 deletions parse-vars.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import {readFileSync} from "fs";

const contents = readFileSync("src/ilw-section-nav.css", "utf-8");
const regex = /^\s*(--[\w-]+):[^;]+;\s*\/\*\s*(var|vardep):\s*(.+)\*\s*\/$/gm;
const regex = /^\s*(--[\w-]+):\s*([^;]+);\s*\/\*\s*(var|vardep):\s*(.+)\*\s*\/$/gm;

let output = [];
let m;
while (m = regex.exec(contents)) {
output.push({
name: m[1],
depreciated: m[2] === "vardep",
description: m[3]
depreciated: m[3] === "vardep",
description: m[4] + ` [default: ${m[2]}]`
})
}

Expand Down
34 changes: 8 additions & 26 deletions samples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,16 @@
</il-header-nav>
</il-header>

<ilw-page-title theme="blue" width="full">
<div style="background: url(./wide-ascend-orange-gradient.svg) repeat 200px 200px; height: 100%"

slot="background"></div>
<h1>Graduate Programs</h1>
</ilw-page-title>
<ilw-columns mode="1x3" gap="40px">
<aside>
<ilw-section-nav open="true">
<a href="#" class="ilw-section-nav--root" aria-current="page">Programs of Study</a>
<ilw-section-nav>
<a href="#" class="ilw-section-nav--root">Programs of Study</a>
<a href="#">Undergraduate Degrees</a>
<ilw-section-nav>
<a href="#">Animal Sciences Major</a>
Expand All @@ -81,33 +87,12 @@
</ilw-section-nav>
<a href="#">Undergraduate Degrees</a>
</ilw-section-nav>
<ilw-section-nav collapse="false">
<div><a href="#" class="ilw-section-nav--root">Programs of Study</a></div>
<div><a href="#" aria-current="page">Undergraduate Degrees</a></div>
<div><ilw-section-nav>
<div><a href="#">Animal Sciences Major</a></div>
<div><a href="#">Computer & Animal Science</a></div>
</ilw-section-nav></div>
</ilw-section-nav>
<ilw-section-nav collapse="true">
<div><a href="#" class="ilw-section-nav--root">Programs of Study</a></div>
<div><a href="#" aria-current="page">Undergraduate Degrees</a></div>
<div><ilw-section-nav>
<div><a href="#">Animal Sciences Major</a></div>
<div><a href="#">Computer & Animal Science</a></div>
</ilw-section-nav></div>
</ilw-section-nav>
</aside>
<main>
<p>
<ilw-breadcrumbs><a href="#">Home</a> <a href="#">Academics</a> <span>Graduate programs</span>
</ilw-breadcrumbs>
</p>
<ilw-page-title theme="white">
<img src="https://cdn.brand.illinois.edu/patterns/finial/orange.svg" alt="" role="presentation"
slot="background">
<h1>Graduate Programs</h1>
</ilw-page-title>
<ilw-content>
<p>Graduate Programs include:</p>
<ul>
Expand All @@ -127,9 +112,6 @@ <h1>Graduate Programs</h1>
<p>Each program at Whispering Pines is designed to integrate academic excellence with an appreciation
for the natural world, fostering a unique learning environment for students.</p>
</ilw-content>
<ilw-content>
<h2>Frequently Asked Questions</h2>
</ilw-content>
</main>
</ilw-columns>
<il-footer slot='footer'>
Expand Down
Loading

0 comments on commit b6c1fb7

Please sign in to comment.