Skip to content

Commit 409c892

Browse files
adamkudrnaadamkudrna
committed
Refactor(web): Reorganize CSS helpers and create a standalone preview for each #DS-821
1 parent 68b0a67 commit 409c892

37 files changed

+357
-276
lines changed

‎apps/web-twig-demo/templates/helpers.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
{% for helper in helpers %}
1111
<li>
12-
<a href="helpers/{{ helper | lower }}/" class="docs-TileLink">{{ helper | capitalize }}</a>
12+
<a href="helpers/{{ helper }}/" class="docs-TileLink">{{ helper | replace({'-': ' '}) | title }}</a>
1313
</li>
1414
{% endfor %}
1515

‎packages/web/index.html‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,16 @@
1-
{{#> layout/default }}
1+
{{#> layout/default page="components" }}
22

33
<section class="docs-Section">
44

55
<h2 class="typography-heading-medium-text text-secondary-disabled mb-700 mb-tablet-900">Components</h2>
66
<ul class="Grid Grid--cols-2 Grid--tablet--cols-3 list-unstyled">
77

88
{{#each @components as |component|}}
9-
<li>
10-
<a href="src/scss/components/{{component}}/" class="docs-TileLink">{{component}}</a>
11-
</li>
12-
{{/each}}
13-
14-
</ul>
15-
16-
</section>
17-
<section class="docs-Section">
18-
19-
<h2 class="typography-heading-medium-text text-secondary-disabled mb-700 mb-tablet-900">Helpers</h2>
20-
<ul class="Grid Grid--cols-2 Grid--tablet--cols-3 list-unstyled">
219
<li>
22-
<a href="src/scss/helpers/" class="docs-TileLink">Helpers</a>
10+
<a href="src/scss/components/{{component.name}}/" class="docs-TileLink">{{component.title}}</a>
2311
</li>
24-
</ul>
25-
26-
</section>
27-
<section class="docs-Section">
12+
{{/each}}
2813

29-
<h2 class="typography-heading-medium-text text-secondary-disabled mb-700 mb-tablet-900">Icons</h2>
30-
<ul class="Grid Grid--cols-2 Grid--tablet--cols-3 list-unstyled">
31-
<li>
32-
<a href="src/icons/" class="docs-TileLink">Icons</a>
33-
</li>
3414
</ul>
3515

3616
</section>

‎packages/web/partials/header.hbs‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@
22
<div class="Container">
33

44
<h1 class="typography-heading-xlarge-text">Spirit Design System</h1>
5-
<h2 class="typography-heading-medium-text text-secondary-inverted-disabled mb-900">Web — Development Preview</h2>
5+
<h2 class="typography-heading-medium-text text-primary-inverted-disabled mb-900">Web — Development Preview</h2>
66

7-
<a href="https://github.com/lmc-eu/spirit-design-system" class="Button Button--inverted Button--large mr-400">
8-
GitHub Project
9-
</a>
10-
<a href="https://spirit.supernova-docs.io/spirit/" class="Button Button--inverted Button--large">
11-
Spirit Docs →
12-
</a>
7+
<div class="d-grid d-tablet-block">
8+
<a href="https://github.com/lmc-eu/spirit-design-system" class="Button Button--inverted Button--large mb-400 mb-tablet-0 mr-tablet-400">
9+
GitHub Project
10+
</a>
11+
<a href="https://spirit.supernova-docs.io/spirit/" class="Button Button--inverted Button--large">
12+
Spirit Docs →
13+
</a>
14+
</div>
1315

1416
</div>
1517
</header>

‎packages/web/partials/layout/default.hbs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<main class="py-900 py-tablet-1200">
66
<div class="Container">
77

8+
{{> tabs }}
9+
810
{{> @partial-block }}
911

1012
</div>

‎packages/web/partials/tabs.hbs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<ul class="Tabs mb-1100" role="tablist">
2+
<li class="Tabs__item">
3+
<a href="/" class="Tabs__link{{#if (eq page 'components')}} is-selected" aria-selected="true{{/if}}">Components</a>
4+
</li>
5+
<li class="Tabs__item">
6+
<a href="/src/icons/" class="Tabs__link{{#if (eq page 'icons')}} is-selected" aria-selected="true{{/if}}">Icons</a>
7+
</li>
8+
<li class="Tabs__item">
9+
<a href="/src/scss/helpers/" class="Tabs__link {{#if (eq page 'helpers')}} is-selected" aria-selected="true{{/if}}">Helpers</a>
10+
</li>
11+
</ul>

‎packages/web/scripts/utils.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { readdirSync } from 'fs';
2+
3+
export const kebabToTitleCase = (string) =>
4+
string
5+
.split('-')
6+
.map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
7+
.join(' ');
8+
9+
export const getListOfNestedDirectories = (path) => [
10+
...readdirSync(path, { withFileTypes: true })
11+
.filter((item) => item.isDirectory())
12+
.map((item) => ({
13+
name: item.name,
14+
title: kebabToTitleCase(item.name),
15+
})),
16+
];
17+
18+
export const getListOfIcons = (path) => [
19+
...readdirSync(path, { withFileTypes: true }).map((item) => item.name.slice(0, -4)),
20+
];

‎packages/web/src/icons/index.html‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
1-
{{#> layout/plain }}
1+
{{#> layout/default page="icons" }}
22

3-
<section class="docs-Section">
3+
<section class="docs-Section">
44

5-
<div class="Grid Grid--cols-2 Grid--tablet--cols-4 Grid--desktop--cols-6 text-center my-1000">
5+
<h2 class="typography-heading-medium-text text-secondary-disabled mb-700 mb-tablet-900">Icons</h2>
6+
<ul class="Grid Grid--cols-2 Grid--tablet--cols-4 Grid--desktop--cols-6 list-unstyled text-center my-1000">
67

7-
{{#each @icons as |icon|}}
8+
{{#each @icons as |icon|}}
9+
<li class="mb-600">
10+
<svg width="24" height="24">
11+
<use xlink:href="/icons/svg/sprite.svg#{{icon}}"/>
12+
</svg>
13+
<h3 class="mt-500">{{icon}}</h3>
14+
</li>
15+
{{/each}}
816

9-
<div class="mb-600">
10-
<svg width="24" height="24">
11-
<use xlink:href="/icons/svg/sprite.svg#{{icon}}"/>
12-
</svg>
17+
</ul>
1318

14-
<h3 class="mt-500">{{icon}}</h3>
15-
</div>
19+
</section>
1620

17-
{{/each}}
18-
19-
</div>
20-
</section>
21-
22-
{{/layout/plain }}
21+
{{/layout/default }}

‎packages/web/src/scss/helpers/_accessibility.scss‎ renamed to ‎packages/web/src/scss/helpers/accessibility/_accessibility.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use '../tools/accessibility';
1+
@use '../../tools/accessibility';
22

33
.accessibility-hidden {
44
@include accessibility.hide-text();

‎packages/web/src/scss/helpers/accessibility/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{{#> layout/plain }}
2+
3+
<section class="docs-Section">
4+
5+
<h2 class="docs-Heading">Accessibility</h2>
6+
7+
<div class="mb-400">
8+
<p>
9+
The following element is visually hidden, but still accessible by AT (use dev tools to check it's really there!).
10+
</p>
11+
12+
<p class="accessibility-hidden">This text is visually hidden</p>
13+
</div>
14+
15+
<div class="mb-400">
16+
<p>Toggle display of an element inside the toggle button depending on <code>aria-expanded</code>.</p>
17+
18+
<button type="button" aria-expanded="true">
19+
<span class="accessibility-open">Show less</span>
20+
<span class="accessibility-closed">Show more</span>
21+
</button>
22+
23+
<button type="button" aria-expanded="false">
24+
<span class="accessibility-open">Show less</span>
25+
<span class="accessibility-closed">Show more</span>
26+
</button>
27+
</div>
28+
29+
</section>
30+
31+
{{/layout/plain}}

‎packages/web/src/scss/helpers/accessibility/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@forward 'accessibility';

0 commit comments

Comments
 (0)