Skip to content

Commit 1133b14

Browse files
shawnbotJackson Flint-Gonzalesdependabot[bot]
authored
Release 2.3.0 (#76)
* 2.3.0 * Fix nav (#67) * fix(nav): use details component for toggle nav * fix(icons): ignore decorative icons for assistive tech * fix(docs): move usage docs into subpage * default current parent to open * fix(nav): use pointer for action disclosure elements * fix(nav): wrap menu close icon with <button> * fix(nav): default aria-hidden to true on custom element * assign navigation role to details element * fix(nav): remove redundant mb-20 * fix(nav): add functionality to skip to content for sr * fiv(nav): restore ability to navigate to index pages (drafty) * fix(grid): who knows how rows work, but fix row spacing * fix(grid): rearrange elements for better alignment * fix(nav): add focus-within variant * fix(nav): make skip to content prettier * fix(nav): remove overview page links for now * fix(nav): rename file and change div to <main> * fix(docs): serve .js as text/javascript (#77) see also: heroku/heroku-buildpack-static#232 * Bump follow-redirects from 1.14.7 to 1.14.9 (#78) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.7 to 1.14.9. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](follow-redirects/follow-redirects@v1.14.7...v1.14.9) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jackson Flint-Gonzales <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
1 parent 8659cf2 commit 1133b14

File tree

11 files changed

+802
-985
lines changed

11 files changed

+802
-985
lines changed

‎docs/_includes/base.njk

+23-22
Original file line numberDiff line numberDiff line change
@@ -34,39 +34,40 @@ layout: skeleton
3434
</div>
3535
</div>
3636

37-
<div class="responsive-container flex lg:hidden mt-60 mb-28 items-center">
38-
<details class="details-reset">
39-
<summary role="navigation" aria-label="open navigation menu">
40-
<sfgov-icon class="pr-20" symbol="menu" role="img" aria-label="hamburger menu"></sfgov-icon>
41-
</summary>
42-
<details-dialog class="top-0 left-0 w-full h-full fixed p-20 bg-grey-1 z-50 max-w-sm">
43-
<sfgov-icon class="py-20 block mt-96 ml-8" symbol="close" role="img" aria-label="x" data-close-dialog></sfgov-icon>
44-
{{ nav | safe }}
45-
</details-dialog>
46-
</details>
47-
48-
<header>
49-
{% include 'header.njk' %}
50-
</header>
51-
</div>
5237

5338
{% block main %}
54-
<div class="responsive-grid responsive-container grid-rows-2">
55-
<div class="hidden lg:block lg:row-span-full lg:col-span-3">
56-
{% include 'header.njk' %}
57-
{{ nav | safe }}
39+
<div class="responsive-grid responsive-container gap-y-0">
40+
<div class="col-span-full lg:col-span-3 flex items-center mt-60 mb-28 lg:m-0">
41+
<details class="details-reset lg:hidden">
42+
<summary class="cursor-pointer">
43+
<sfgov-icon class="pr-20" symbol="menu"></sfgov-icon>
44+
</summary>
45+
<details-dialog class="top-0 left-0 w-full h-full fixed p-20 bg-grey-1 z-50 max-w-sm"
46+
role="navigation"
47+
aria-label="navigation menu"
48+
>
49+
<button class="block mt-96 py-20 border-0 bg-grey-1" aria-label="close navigation menu" data-close-dialog>
50+
<sfgov-icon symbol="close"></sfgov-icon>
51+
</button>
52+
{{ nav | safe }}
53+
</details-dialog>
54+
</details>
55+
<div>{% include 'header.njk' %}</div>
5856
</div>
59-
<div class="col-span-full lg:col-span-9 lg:mt-48">
57+
<div class="col-span-full lg:col-span-9 row-span-1 lg:mt-48">
6058
{% include 'title.njk' %}
6159
</div>
62-
<div class="col-span-full lg:col-span-9 {% if toc %} xl:col-span-6 {% endif %}">
60+
<div class="hidden lg:block lg:row-span-2 lg:col-span-3">
61+
{{ nav | safe }}
62+
</div>
63+
<div class="col-span-full lg:col-span-9 lg:row-span-2 {% if toc %} xl:col-span-6 {% endif %}">
6364
{% block content %}
6465
{% include 'main.njk' %}
6566
{% endblock %}
6667
{% include 'source-meta.njk' %}
6768
</div>
6869
{% if toc %}
69-
<div class="hidden xl:block xl:col-span-3">
70+
<div class="hidden xl:block xl:col-span-3 xl:row-span-2">
7071
{% include 'toc.njk' %}
7172
</div>
7273
{% endif %}

‎docs/_includes/macros.njk

+53-40
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,60 @@
11
{% macro nav_link(url, deep=true) %}
22
{% set node = url | node(collections.all) %}
33
{% set children = node.data.page | children(collections.all) %}
4-
<div class="mb-20">
5-
<a
6-
class="flex justify-center title-xs no-underline mb-20"
7-
href="{{ url }}"
8-
{% if node.data.page.url === page.url %}
9-
aria-current="page"
10-
{% endif %}
11-
>
12-
<div class="flex-auto">{{ node.data.title }}</div>
13-
<div>
14-
{% if deep and children.length %}
15-
<sfgov-icon symbol="chevron-down" role="img" aria-label="arrow pointing down"></sfgov-icon>
4+
{% set page_active = node.data.page.url === page.url %}
5+
{% if deep and children.length %}
6+
<details class="details-reset cursor-pointer" {% if page.url.startsWith(url) %} open {% endif %}>
7+
<summary class="title-xs text-slate-3 mb-20">
8+
<div class="flex">
9+
<span class="flex-auto">{{ node.data.title }}</span>
10+
<sfgov-icon class="open:hidden" symbol="chevron-down"></sfgov-icon>
11+
<sfgov-icon class="hidden open:inline-flex" symbol="chevron-up"></sfgov-icon>
12+
</div>
13+
</summary>
14+
<ul class="m-0 p-0 list-none">
15+
{# TODO: remove or reinstate once we decide whether overview pages will be a thing #}
16+
{#
17+
<li class="pl-16 m-0 mb-20 {{ 'bg-slate-2 rounded-4' if page_active }}">
18+
<a
19+
href="{{ url }}"
20+
{% if page_active %}
21+
aria-current="page"
22+
{% endif %}
23+
class="block no-underline {{ 'text-white' if page_active else 'text-slate-4' }}"
24+
>
25+
{{ node.data.title }} Overview
26+
</a>
27+
</li>
28+
#}
29+
{% for child in children %}
30+
{% set child_active = child.url === page.url %}
31+
<li class="pl-16 m-0 mb-20 {{ 'bg-slate-2 rounded-4' if child_active }}">
32+
<a
33+
href="{{ child.url }}"
34+
{% if child_active %}
35+
aria-current="page"
36+
{% endif %}
37+
class="block no-underline {{ 'text-white' if child_active else 'text-slate-4' }}"
38+
>
39+
{{ child.data.title }}
40+
</a>
41+
</li>
42+
{% endfor %}
43+
</ul>
44+
</details>
45+
{% else %}
46+
<div class="mb-20">
47+
<a
48+
class="flex justify-center title-xs no-underline mb-20"
49+
href="{{ url }}"
50+
{% if page_active %}
51+
aria-current="page"
1652
{% endif %}
17-
</div>
18-
</a>
19-
{% if deep %}
20-
{% if url === '/' %}
21-
{% set parent_active = page.url === url %}
22-
{% else %}
23-
{% set parent_active = page.url.startsWith(url) %}
24-
{% endif %}
25-
{% if parent_active %}
26-
<ul class="m-0 p-0 list-none">
27-
{% for child in children %}
28-
{% set child_active = child.url === page.url %}
29-
<li class="pl-16 m-0 mb-20 {{ 'bg-slate-2 rounded-4' if child_active }}">
30-
<a
31-
href="{{ child.url }}"
32-
{% if child_active %}
33-
aria-current="page"
34-
{% endif %}
35-
class="block no-underline {{ 'text-white' if child_active else 'text-slate-4' }}"
36-
>
37-
{{ child.data.title }}
38-
</a>
39-
</li>
40-
{% endfor %}
41-
</ul>
42-
{% endif %}
43-
{% endif %}
44-
</div>
53+
>
54+
<div class="flex-auto">{{ node.data.title }}</div>
55+
</a>
56+
</div>
57+
{% endif %}
4558
{% endmacro %}
4659

4760
{% macro swatch(color, width, height) %}

‎docs/_includes/main.njk

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div class="prose">
1+
<main id="main-content" class="prose">
22
{{ content | safe }}
3-
</div>
3+
</main>

‎docs/_includes/skeleton.njk

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
{% endblock %}
99
</head>
1010
<body>
11+
<div class="fixed top-0 left-0 focus-within:bg-action p-8">
12+
<a href="#main-content" class="sr-only focus:not-sr-only text-white">Skip to content</a>
13+
</div>
1114
{{ content | safe }}
1215
{% block scripts %}
1316
{% include 'scripts.njk' %}

‎docs/usage/index.md

+1-66
Original file line numberDiff line numberDiff line change
@@ -2,69 +2,4 @@
22
title: Usage
33
---
44

5-
## Installation
6-
7-
### npm
8-
The San Francisco Design System CSS is published as
9-
[{{ package.name }}](https://npmjs.com/package/{{ package.name }})
10-
on npm. You can install it in your project with:
11-
12-
```sh
13-
npm install {{ package.name }}
14-
```
15-
16-
The current version is `{{ package.version }}`. See the [release
17-
history] for other available versions and release notes.
18-
19-
### Versioning
20-
We use [semantic versioning][semver] conventions to number our release
21-
versions:
22-
23-
- Bug fixes, documentation updates, and development-related updates are
24-
**patch** versions, e.g. `1.0.0` → `1.0.1`.
25-
26-
- New features are **minor** versions, e.g. `1.0.0` → `1.1.0`.
27-
28-
- Breaking changes, or any other changes that **may** break any
29-
sites that upgrade from the previous version, are **major**
30-
versions, e.g. `1.0.0` → `2.0.0`.
31-
32-
### CDN
33-
There are many content delivery networks that mirror npm
34-
packages. For instance, to import all of the design system CSS
35-
from the latest version of the npm package from [unpkg], you
36-
could add the following to your `<head>`:
37-
38-
```html static="true"
39-
<link rel="stylesheet" href="{{ '/dist/sfds.css' | published_url(package.version) }}">
40-
```
41-
42-
See the [CSS guide](./css) for more detailed usage instructions.
43-
44-
## Browser support
45-
Generally speaking, our CSS supports the same browsers as
46-
[Tailwind](https://tailwindcss.com/docs/browser-support) (as of
47-
version 2.x, "the latest stable versions of Chrome, Firefox,
48-
Edge, and Safari"). Starting in version 2.0, Tailwind notably
49-
introduced the use of [CSS custom properties] (also known as "CSS
50-
variables"), which are [supported](https://caniuse.com/css-variables) by approximately
51-
95% of browsers relative to usage as of August, 2021.
52-
53-
### Internet Explorer
54-
**Internet Explorer is not supported**. Microsoft [announced][IE
55-
EOL] that it will no longer support the browser on June 15, 2022,
56-
and its usage has declined rapidly since. In July of 2021 there
57-
were **7 unique visitors** using Internet Explorer on
58-
[sf.gov](https://sf.gov).
59-
60-
Support for Internet Explorer is still available in [Tailwind
61-
version 1.9](https://v1.tailwindcss.com/). If your project
62-
requires IE support, please [contact us](/about/#contact) and we
63-
can offer suggestions for a custom CSS build.
64-
65-
[IE EOL]: https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge#:~:text=Yes%2C%20Internet%20Explorer%2011%20is,Internet%20Explorer%20(IE)%20mode.
66-
[css custom properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
67-
[release history]: https://github.com/{{ package.repository }}/releases
68-
[semver]: https://semver.org
69-
[tailwind]: https://tailwindcss.com/
70-
[unpkg]: https://unpkg.com
5+
Let's say something about usage here.

‎docs/usage/install.md

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: Install
3+
---
4+
5+
## Installation
6+
7+
### npm
8+
The San Francisco Design System CSS is published as
9+
[{{ package.name }}](https://npmjs.com/package/{{ package.name }})
10+
on npm. You can install it in your project with:
11+
12+
```sh
13+
npm install {{ package.name }}
14+
```
15+
16+
The current version is `{{ package.version }}`. See the [release
17+
history] for other available versions and release notes.
18+
19+
### Versioning
20+
We use [semantic versioning][semver] conventions to number our release
21+
versions:
22+
23+
- Bug fixes, documentation updates, and development-related updates are
24+
**patch** versions, e.g. `1.0.0` → `1.0.1`.
25+
26+
- New features are **minor** versions, e.g. `1.0.0` → `1.1.0`.
27+
28+
- Breaking changes, or any other changes that **may** break any
29+
sites that upgrade from the previous version, are **major**
30+
versions, e.g. `1.0.0` → `2.0.0`.
31+
32+
### CDN
33+
There are many content delivery networks that mirror npm
34+
packages. For instance, to import all of the design system CSS
35+
from the latest version of the npm package from [unpkg], you
36+
could add the following to your `<head>`:
37+
38+
```html static="true"
39+
<link rel="stylesheet" href="{{ '/dist/sfds.css' | published_url(package.version) }}">
40+
```
41+
42+
See the [CSS guide](./css) for more detailed usage instructions.
43+
44+
## Browser support
45+
Generally speaking, our CSS supports the same browsers as
46+
[Tailwind](https://tailwindcss.com/docs/browser-support) (as of
47+
version 2.x, "the latest stable versions of Chrome, Firefox,
48+
Edge, and Safari"). Starting in version 2.0, Tailwind notably
49+
introduced the use of [CSS custom properties] (also known as "CSS
50+
variables"), which are [supported](https://caniuse.com/css-variables) by approximately
51+
95% of browsers relative to usage as of August, 2021.
52+
53+
### Internet Explorer
54+
**Internet Explorer is not supported**. Microsoft [announced][IE
55+
EOL] that it will no longer support the browser on June 15, 2022,
56+
and its usage has declined rapidly since. In July of 2021 there
57+
were **7 unique visitors** using Internet Explorer on
58+
[sf.gov](https://sf.gov).
59+
60+
Support for Internet Explorer is still available in [Tailwind
61+
version 1.9](https://v1.tailwindcss.com/). If your project
62+
requires IE support, please [contact us](/about/#contact) and we
63+
can offer suggestions for a custom CSS build.
64+
65+
[IE EOL]: https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge#:~:text=Yes%2C%20Internet%20Explorer%2011%20is,Internet%20Explorer%20(IE)%20mode.
66+
[css custom properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
67+
[release history]: https://github.com/{{ package.repository }}/releases
68+
[semver]: https://semver.org
69+
[tailwind]: https://tailwindcss.com/
70+
[unpkg]: https://unpkg.com

0 commit comments

Comments
 (0)