Merge branch 'main' into dbux-3

.github/dependabot.yml

@@ -5,16 +5,24 @@ updates:
     directory: "/"
     schedule:
       interval: "daily"
+      time: "03:00"
+      timezone: "Europe/Berlin"
     pull-request-branch-name:
       separator: "-"
+    reviewers:
+      - "github-actions"
 
   # Daily: Check minor and patch updates
   - package-ecosystem: "npm"
     directory: "/"
     open-pull-requests-limit: 10
     schedule:
       interval: "daily"
+      time: "03:00"
+      timezone: "Europe/Berlin"
     pull-request-branch-name:
       separator: "-"
     # https://github.com/dependabot/dependabot-core/issues/5226#issuecomment-1179434437
     versioning-strategy: increase
+    reviewers:
+      - "github-actions"

.github/workflows/00-scan-secrets.yml

@@ -17,7 +17,7 @@ jobs:
         id: extract_branch
 
       - name: 🐷 TruffleHog OSS
-        uses: trufflesecurity/trufflehog@v3.16.4
+        uses: trufflesecurity/trufflehog@v3.17.0
         with:
           path: ./
           base: ${{ steps.extract_branch.outputs.branch-name }}

.github/workflows/01-lint.yml

@@ -14,7 +14,7 @@ jobs:
       - name: 🔄 Init Cache
         uses: ./.github/actions/npm-cache
 
-      - name: ⚡ Run Test
+      - name: ⚡ Run Lint
         run: npm run lint
 
       - name: 💀 Killing me softly

.stylelintrc.json

@@ -4,7 +4,16 @@
 		"stylelint-config-prettier"
 	],
 	"rules": {
+		"selector-no-qualifying-type": null,
+		"selector-class-pattern": null,
+		"scss/dollar-variable-pattern": null,
+		"scss/selector-no-redundant-nesting-selector": null,
 		"max-nesting-depth": null,
-		"order/order": null
+		"selector-max-compound-selectors": null,
+		"scss/at-extend-no-missing-placeholder": null,
+		"declaration-property-value-disallowed-list": null,
+		"scss/percent-placeholder-pattern": null,
+		"scss/at-mixin-pattern": null,
+		"order/properties-alphabetical-order": null
 	}
 }

package.json

@@ -60,7 +60,7 @@
     "pretty-quick": "3.1.3",
     "sass": "^1.56.1",
     "style-dictionary": "3.7.1",
-    "stylelint": "14.14.1",
+    "stylelint": "14.15.0",
     "stylelint-config-prettier": "9.0.4",
     "stylelint-config-sass-guidelines": "9.0.1",
     "validate-branch-name": "^1.3.0",

source/_patterns/icons/_icons.demonstration.scss

@@ -2,7 +2,7 @@
 
 .DO-NOT-COPY-THIS-CLASS-example-icon-list {
 	&,
-	ul {
+	ol {
 		list-style: none;
 
 		padding-left: 0;
@@ -18,18 +18,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-colors-secondary-enabled;
 		}
 
@@ -70,7 +126,7 @@
 		}
 	}
 	&.functional {
-		ul {
+		ol {
 			display: flex;
 			align-items: center;
 		}

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>

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

@@ -6,5 +6,7 @@
 		{
 			"variant": "dark"
 		}
-	]
+	],
+	"icon-size": "24",
+	"icon-style": "outline"
 }