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
db-ui · Nov 16, 2022 · 5cbe9f4 · 5cbe9f4
1 parent 13557ea
commit 5cbe9f4
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 40 deletions.
diff --git a/source/_patterns/icons/_icons.demonstration.scss b/source/_patterns/icons/_icons.demonstration.scss
@@ -1,6 +1,6 @@
 .DO-NOT-COPY-THIS-CLASS-example-icon-list {
 	&,
-	ul {
+	ol {
 		list-style: none;
 
 		padding-left: 0;
@@ -16,18 +16,74 @@
 			min-width: 250px;
 		}
 		.DO-NOT-COPY-THIS-CLASS-example-bg-variants-regular {
-			ul {
+			ol {
 				justify-content: flex-end;
 			}
 		}
 	}
 
+	details {
+		summary {
+			cursor: pointer;
+
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			// Remove existing marker
+			&::-webkit-details-marker {
+				display: none;
+			}
+			// … and using some other declaration for Mozilla Firefox
+			&:first-of-type {
+				list-style-type: none;
+			}
+
+			figure {
+				text-align: center;
+			}
+		}
+
+		ul {
+			li {
+				display: list-item;
+				padding: initial;
+			}
+		}
+
+		// Icon details
+		aside {
+			position: fixed;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			z-index: 10;
+
+			background-color: #fff;
+			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+			padding: 1rem;
+		}
+
+		// Achieving a full viewport clickarea for closing the overflow menu
+		&[open] summary::after {
+			content: "\00A0";
+			display: inline-block;
+			height: 100vh;
+			left: 0;
+			position: fixed;
+			top: 0;
+			width: 100vw;
+			z-index: 5;
+		}
+	}
+
 	& > li {
 		display: flex;
 	}
 
-	&.icons {
-		ul {
+	&:where(.icons) {
+		ol {
 			color: $db-color-cool-gray-700;
 		}
 
@@ -74,7 +130,7 @@
 		}
 	}
 	&.functional {
-		ul {
+		ol {
 			display: flex;
 			align-items: center;
 		}

diff --git a/source/_patterns/icons/functional/functional-icons.hbs b/source/_patterns/icons/functional/functional-icons.hbs
@@ -1,27 +1,49 @@
-<ul class="DO-NOT-COPY-THIS-CLASS-example-icon-list icons functional">
+{{#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 }}
+<ol class="DO-NOT-COPY-THIS-CLASS-example-icon-list icons functional">
 	{{#each icons }}<li>
-		<ul>
-			{{#each @root.example-bgs }}
-				<li class="DO-NOT-COPY-THIS-CLASS-example-bg-variants-{{ variant }}">
-					<ul>
-						{{#each ../variants }}
-						{{#if_eq @root.category "transportation"}}
-							<li>
-								<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" aria-hidden="true">
-									<use href="../../icons/functional/images/{{ @root.category }}/{{#if style}}{{style}}{{else}}regular{{/if }}/db_ic_{{ ../../icon }}{{#if style }}_{{ style }}{{/if }}_{{ size }}.svg#icon"></use>
-								</svg>
-							</li>
-						{{else}}
-							<li>
-								<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" aria-hidden="true">
-									<use href="../../icons/functional/images/{{ @root.category }}/db_ic_{{ ../../icon }}{{#if style }}_{{ style }}{{/if }}_{{ size }}.svg#icon"></use>
-								</svg>
-							</li>
-						{{/if_eq}}
-						{{/each }}
-					</ul>
-				</li>
-			{{/each }}
-		</ul>
+		<details>
+			<summary>
+				<figure>
+					{{#if_eq @root.category "transportation"}}
+						<svg xmlns="http://www.w3.org/2000/svg" width="{{ @root.icon-size }}" height="{{ @root.icon-size }}" aria-hidden="true">
+							<use href="../../icons/functional/images/{{ @root.category }}/{{#if style}}{{style}}{{else}}regular{{/if }}/db_ic_{{ icon }}{{#if style }}_{{ style }}{{/if }}_20.svg#icon"></use>
+						</svg>
+					{{else}}
+						<svg xmlns="http://www.w3.org/2000/svg" width="{{ @root.icon-size }}" height="{{ @root.icon-size }}" aria-hidden="true">
+							<use href="../../icons/functional/images/{{ @root.category }}/db_ic_{{ icon }}{{#if style }}_{{ style }}{{/if }}_20.svg#icon"></use>
+						</svg>
+					{{/if_eq}}
+					<figcaption>{{ icon }}{{#if style }}_{{ style }}{{/if }}</figcaption>
+				</figure>
+			</summary>
+			<aside>
+				<ol>
+					{{#each @root.example-bgs }}
+						<li class="DO-NOT-COPY-THIS-CLASS-example-bg-variants-{{ variant }}">
+							<ol>
+								{{#each ../variants }}
+									{{#if_eq @root.category "transportation"}}
+										<li>
+											<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" aria-hidden="true">
+												<use href="../../icons/functional/images/{{ @root.category }}/{{#if style}}{{style}}{{else}}regular{{/if }}/db_ic_{{ ../../icon }}{{#if style }}_{{ style }}{{/if }}_{{ size }}.svg#icon"></use>
+											</svg>
+										</li>
+									{{else}}
+										<li>
+											<svg xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" aria-hidden="true">
+												<use href="../../icons/functional/images/{{ @root.category }}/db_ic_{{ ../../icon }}{{#if style }}_{{ style }}{{/if }}_{{ size }}.svg#icon"></use>
+											</svg>
+										</li>
+									{{/if_eq}}
+								{{/each }}
+							</ol>
+						</li>
+					{{/each }}
+				</ol>
+				<ul>
+					<li>SCSS: <code>@include icon(glyph({{ icon }}))</code></li>
+					<li>HTML: <code>data-icon="{{ icon }}"</code></li>
+				</ul>
+			</aside>
 	</li>{{/each }}
-</ul>
+</ol>
diff --git a/source/_patterns/icons/functional/functional-icons.json b/source/_patterns/icons/functional/functional-icons.json
@@ -6,5 +6,7 @@
 		{
 			"variant": "dark"
 		}
-	]
+	],
+	"icon-size": "24",
+	"icon-style": "outline"
 }
diff --git a/source/_patterns/icons/illustrative/illustrative-icons.hbs b/source/_patterns/icons/illustrative/illustrative-icons.hbs
@@ -1,13 +1,25 @@
-<ul class="DO-NOT-COPY-THIS-CLASS-example-icon-list icons illustrative">
+<ol class="DO-NOT-COPY-THIS-CLASS-example-icon-list icons illustrative">
 	{{#each icons }}<li>
-		<ul>
-			{{#each @root.example-bgs }}
-				<li class="DO-NOT-COPY-THIS-CLASS-example-bg-variants-{{ variant }}">
+		<details>
+			<summary>
+				<figure>
 					<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true">
-						<use href="../../icons/illustrative/{{ @root.category }}/db_ic_il_{{ ../icon }}.svg#icon"></use>
+						<use href="../../icons/illustrative/{{ @root.category }}/db_ic_il_{{ icon }}.svg#icon"></use>
 					</svg>
-				</li>
-			{{/each }}
-		</ul>
+					<figcaption>{{ icon }}{{#if style }}_{{ style }}{{/if }}</figcaption>
+				</figure>
+			</summary>
+			<aside>
+				<ol>
+					{{#each @root.example-bgs }}
+						<li class="DO-NOT-COPY-THIS-CLASS-example-bg-variants-{{ variant }}">
+							<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true">
+								<use href="../../icons/illustrative/{{ @root.category }}/db_ic_il_{{ ../icon }}.svg#icon"></use>
+							</svg>
+						</li>
+					{{/each }}
+				</ol>
+			</aside>
+		</details>
 	</li>{{/each }}
-</ul>
+</ol>