refactor: display icons by categories and as a poster

.pa11yci

@@ -77,7 +77,7 @@
 		"http://127.0.0.1:8080/patterns/base-icons-icon-library-48-outline-av/base-icons-icon-library-48-outline-av.rendered.html",
 		"http://127.0.0.1:8080/patterns/base-icons-icon-library-64-filled-av/base-icons-icon-library-64-filled-av.rendered.html",
 		"http://127.0.0.1:8080/patterns/base-icons-icon-library-64-outline-av/base-icons-icon-library-64-outline-av.rendered.html",
-		"http://127.0.0.1:8080/patterns/base-icons-illustration-icons/base-icons-illustration-icons.rendered.html",
+		"http://127.0.0.1:8080/patterns/base-icons-illustrative-icons/base-icons-illustrative-icons.rendered.html",
 		"http://127.0.0.1:8080/patterns/base-type-fonts/base-type-fonts.rendered.html",
 		"http://127.0.0.1:8080/patterns/base-type-highlight-colors-1st-priority/base-type-highlight-colors-1st-priority.rendered.html",
 		"http://127.0.0.1:8080/patterns/base-type-highlight-colors-2nd-priority/base-type-highlight-colors-2nd-priority.rendered.html",

source/_patterns/00-base/icons/_icons.demonstration.scss

@@ -1,43 +1,103 @@
 .DO-NOT-COPY-THIS-CLASS-example-icon-list {
 	&,
-	ul {
+	ol {
 		list-style: none;
 
 		padding-left: 0;
 	}
 
+	&.functional {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+
+		.DO-NOT-COPY-THIS-CLASS-example-bg-variants-regular,
+		.DO-NOT-COPY-THIS-CLASS-example-bg-variants-dark {
+			min-width: 250px;
+		}
+
+		.DO-NOT-COPY-THIS-CLASS-example-bg-variants-regular {
+			ol {
+				justify-content: flex-end;
+			}
+		}
+
+		details {
+			summary {
+				cursor: pointer;
+
+				// Replace existing marker with an icon from the library
+				&::-webkit-details-marker {
+					display: none;
+				}
+				// … and using some other declaration for Mozilla Firefox
+				&:first-of-type {
+					list-style-type: none;
+				}
+			}
+
+			ul {
+				li {
+					display: list-item;
+				}
+			}
+		}
+	}
+
 	& > li {
 		display: flex;
 	}
 
-	&.icons-illustration {
-		ul {
+	&.icons {
+		ol {
 			color: $db-color-cool-gray-700;
+		}
 
-			li {
-				border-radius: 4px;
+		li {
+			border-radius: 4px;
 
-				color: $db-color-cool-gray-700;
-				display: inline-block;
+			color: $db-color-cool-gray-700;
+			display: inline-block;
 
-				margin: to-rem($pxValue: 4);
-				padding: to-rem($pxValue: 32);
+			margin: to-rem(4);
+			padding: 1rem 0.25rem;
 
-				&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-turquoise {
-					background-color: $db-color-turquoise-400;
-				}
+			&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-turquoise {
+				background-color: $db-color-turquoise-400;
+			}
 
-				&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-red {
-					--db-icon-color: #fff;
-					--db-icon-pulse-color: #fff;
-					background-color: $db-color-red-500;
-				}
+			&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-red {
+				--db-icon-color: #fff;
+				--db-icon-pulse-color: #fff;
+				background-color: $db-color-red-500;
+			}
+
+			&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-cyan {
+				--db-icon-pulse-color: currentColor;
+				background-color: $db-color-cyan-200;
+			}
+
+			&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-dark {
+				--db-icon-color: #fff;
+				background-color: #272d37; // TODO: richtige Farbvariable raus suchen
 
-				&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-cyan {
-					--db-icon-pulse-color: currentColor;
-					background-color: $db-color-cyan-200;
+				li {
+					color: #fff;
 				}
 			}
 		}
 	}
+
+	&.illustrative {
+		li {
+			padding: to-rem(32);
+		}
+	}
+
+	&.functional {
+		ol {
+			align-items: center;
+			display: flex;
+		}
+	}
 }

source/_patterns/00-base/icons/functional-icons.hbs

@@ -0,0 +1,27 @@
+{{#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>
+		<details>
+			<summary>
+				<ol>
+					{{#each @root.example-bgs }}
+						<li class="DO-NOT-COPY-THIS-CLASS-example-bg-variants-{{ variant }}">
+							<ol>
+								{{#each ../variants }}
+								<li data-icon="{{ ../../icon }}" data-icon-variant="{{ size }}-{{#if style }}{{ style }}{{else}}outline{{/if }}">
+
+								</li>
+								{{/each }}
+							</ol>
+						</li>
+					{{/each }}
+				</ol>
+			</summary>
+			<h4>{{ icon }}</h4>
+			<ul>
+				<li>SCSS: <code>@include icon(glyph({{ icon }}))</code></li>
+				<li>HTML: <code>data-icon="{{ icon }}"</code></li>
+			</ul>
+		</details>
+	</li>{{/each }}
+</ol>

source/_patterns/00-base/icons/functional-icons.json

@@ -0,0 +1,12 @@
+{
+	"example-bgs": [
+		{
+			"variant": "regular"
+		},
+		{
+			"variant": "dark"
+		}
+	],
+	"icon-size": "24",
+	"icon-style": "outline"
+}