Skip to content

Commit 5cbe9f4

Browse files
mfranzkemfranzke
authored
refactor: icons documentation display (#109)
* refactor: icons documentation display providing the icons names and hiding their details behind an interactivity * chore: added icon-style data/information * refactor: providing the icon details in an overlay * refactor: using figure instead of headline element here
1 parent 13557ea commit 5cbe9f4

File tree

4 files changed

+132
-40
lines changed

4 files changed

+132
-40
lines changed

Diff for: ‎source/_patterns/icons/_icons.demonstration.scss

+61-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.DO-NOT-COPY-THIS-CLASS-example-icon-list {
22
&,
3-
ul {
3+
ol {
44
list-style: none;
55

66
padding-left: 0;
@@ -16,18 +16,74 @@
1616
min-width: 250px;
1717
}
1818
.DO-NOT-COPY-THIS-CLASS-example-bg-variants-regular {
19-
ul {
19+
ol {
2020
justify-content: flex-end;
2121
}
2222
}
2323
}
2424

25+
details {
26+
summary {
27+
cursor: pointer;
28+
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
32+
33+
// Remove existing marker
34+
&::-webkit-details-marker {
35+
display: none;
36+
}
37+
// … and using some other declaration for Mozilla Firefox
38+
&:first-of-type {
39+
list-style-type: none;
40+
}
41+
42+
figure {
43+
text-align: center;
44+
}
45+
}
46+
47+
ul {
48+
li {
49+
display: list-item;
50+
padding: initial;
51+
}
52+
}
53+
54+
// Icon details
55+
aside {
56+
position: fixed;
57+
left: 50%;
58+
top: 50%;
59+
transform: translate(-50%, -50%);
60+
z-index: 10;
61+
62+
background-color: #fff;
63+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
64+
65+
padding: 1rem;
66+
}
67+
68+
// Achieving a full viewport clickarea for closing the overflow menu
69+
&[open] summary::after {
70+
content: "\00A0";
71+
display: inline-block;
72+
height: 100vh;
73+
left: 0;
74+
position: fixed;
75+
top: 0;
76+
width: 100vw;
77+
z-index: 5;
78+
}
79+
}
80+
2581
& > li {
2682
display: flex;
2783
}
2884

29-
&.icons {
30-
ul {
85+
&:where(.icons) {
86+
ol {
3187
color: $db-color-cool-gray-700;
3288
}
3389

@@ -74,7 +130,7 @@
74130
}
75131
}
76132
&.functional {
77-
ul {
133+
ol {
78134
display: flex;
79135
align-items: center;
80136
}

Diff for: ‎source/_patterns/icons/functional/functional-icons.hbs

+47-25
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,49 @@
1-
<ul class="DO-NOT-COPY-THIS-CLASS-example-icon-list icons functional">
1+
{{#unless icons}}<p>Please keep in mind that it's optional to set the variant combination of size ({{ icon-size }}) and style ({{ icon-style }}) as these are defined as default.<br>In case that you'll need another default in your project, you could overwrite the defaults by overwriting the <code>$icon-size</code> and <code>$icon-style</code> SCSS variables.</p>{{/unless }}
2+
<ol class="DO-NOT-COPY-THIS-CLASS-example-icon-list icons functional">
23
{{#each icons }}<li>
3-
<ul>
4-
{{#each @root.example-bgs }}
5-
<li class="DO-NOT-COPY-THIS-CLASS-example-bg-variants-{{ variant }}">
6-
<ul>
7-
{{#each ../variants }}
8-
{{#if_eq @root.category "transportation"}}
9-
<li>
10-
<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" aria-hidden="true">
11-
<use href="../../icons/functional/images/{{ @root.category }}/{{#if style}}{{style}}{{else}}regular{{/if }}/db_ic_{{ ../../icon }}{{#if style }}_{{ style }}{{/if }}_{{ size }}.svg#icon"></use>
12-
</svg>
13-
</li>
14-
{{else}}
15-
<li>
16-
<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" aria-hidden="true">
17-
<use href="../../icons/functional/images/{{ @root.category }}/db_ic_{{ ../../icon }}{{#if style }}_{{ style }}{{/if }}_{{ size }}.svg#icon"></use>
18-
</svg>
19-
</li>
20-
{{/if_eq}}
21-
{{/each }}
22-
</ul>
23-
</li>
24-
{{/each }}
25-
</ul>
4+
<details>
5+
<summary>
6+
<figure>
7+
{{#if_eq @root.category "transportation"}}
8+
<svg xmlns="http://www.w3.org/2000/svg" width="{{ @root.icon-size }}" height="{{ @root.icon-size }}" aria-hidden="true">
9+
<use href="../../icons/functional/images/{{ @root.category }}/{{#if style}}{{style}}{{else}}regular{{/if }}/db_ic_{{ icon }}{{#if style }}_{{ style }}{{/if }}_20.svg#icon"></use>
10+
</svg>
11+
{{else}}
12+
<svg xmlns="http://www.w3.org/2000/svg" width="{{ @root.icon-size }}" height="{{ @root.icon-size }}" aria-hidden="true">
13+
<use href="../../icons/functional/images/{{ @root.category }}/db_ic_{{ icon }}{{#if style }}_{{ style }}{{/if }}_20.svg#icon"></use>
14+
</svg>
15+
{{/if_eq}}
16+
<figcaption>{{ icon }}{{#if style }}_{{ style }}{{/if }}</figcaption>
17+
</figure>
18+
</summary>
19+
<aside>
20+
<ol>
21+
{{#each @root.example-bgs }}
22+
<li class="DO-NOT-COPY-THIS-CLASS-example-bg-variants-{{ variant }}">
23+
<ol>
24+
{{#each ../variants }}
25+
{{#if_eq @root.category "transportation"}}
26+
<li>
27+
<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" aria-hidden="true">
28+
<use href="../../icons/functional/images/{{ @root.category }}/{{#if style}}{{style}}{{else}}regular{{/if }}/db_ic_{{ ../../icon }}{{#if style }}_{{ style }}{{/if }}_{{ size }}.svg#icon"></use>
29+
</svg>
30+
</li>
31+
{{else}}
32+
<li>
33+
<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" aria-hidden="true">
34+
<use href="../../icons/functional/images/{{ @root.category }}/db_ic_{{ ../../icon }}{{#if style }}_{{ style }}{{/if }}_{{ size }}.svg#icon"></use>
35+
</svg>
36+
</li>
37+
{{/if_eq}}
38+
{{/each }}
39+
</ol>
40+
</li>
41+
{{/each }}
42+
</ol>
43+
<ul>
44+
<li>SCSS: <code>@include icon(glyph({{ icon }}))</code></li>
45+
<li>HTML: <code>data-icon="{{ icon }}"</code></li>
46+
</ul>
47+
</aside>
2648
</li>{{/each }}
27-
</ul>
49+
</ol>

Diff for: ‎source/_patterns/icons/functional/functional-icons.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,7 @@
66
{
77
"variant": "dark"
88
}
9-
]
9+
],
10+
"icon-size": "24",
11+
"icon-style": "outline"
1012
}

Diff for: ‎source/_patterns/icons/illustrative/illustrative-icons.hbs

+21-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
1-
<ul class="DO-NOT-COPY-THIS-CLASS-example-icon-list icons illustrative">
1+
<ol class="DO-NOT-COPY-THIS-CLASS-example-icon-list icons illustrative">
22
{{#each icons }}<li>
3-
<ul>
4-
{{#each @root.example-bgs }}
5-
<li class="DO-NOT-COPY-THIS-CLASS-example-bg-variants-{{ variant }}">
3+
<details>
4+
<summary>
5+
<figure>
66
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true">
7-
<use href="../../icons/illustrative/{{ @root.category }}/db_ic_il_{{ ../icon }}.svg#icon"></use>
7+
<use href="../../icons/illustrative/{{ @root.category }}/db_ic_il_{{ icon }}.svg#icon"></use>
88
</svg>
9-
</li>
10-
{{/each }}
11-
</ul>
9+
<figcaption>{{ icon }}{{#if style }}_{{ style }}{{/if }}</figcaption>
10+
</figure>
11+
</summary>
12+
<aside>
13+
<ol>
14+
{{#each @root.example-bgs }}
15+
<li class="DO-NOT-COPY-THIS-CLASS-example-bg-variants-{{ variant }}">
16+
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true">
17+
<use href="../../icons/illustrative/{{ @root.category }}/db_ic_il_{{ ../icon }}.svg#icon"></use>
18+
</svg>
19+
</li>
20+
{{/each }}
21+
</ol>
22+
</aside>
23+
</details>
1224
</li>{{/each }}
13-
</ul>
25+
</ol>

0 commit comments

Comments
 (0)