sdga-ui 1.0.5 → 1.0.7

package/demo-angular/src/app/views/cards/cards.component.html

@@ -11,7 +11,7 @@
       <div class="card" tabindex="0">
         <div class="card-body">
           <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+            <i class="bi bi-check-circle card-title-icon"></i>
           </h5>
           <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
           <p class="card-text">{{ 'cards.card_text' | translate }}</p>
@@ -49,7 +49,7 @@
       <div class="card disabled" tabindex="0">
         <div class="card-body">
           <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+            <i class="bi bi-check-circle card-title-icon"></i>
             <input class="card-title-checked  form-check-input ripple" disabled type="checkbox" value="" id="check1" aria-label="{{ 'cards.select_card' | translate }}">
           </h5>
           <h6 class="card-subtitle mb-2">{{ 'cards.card_title' | translate }}</h6>
@@ -88,7 +88,7 @@
       <div class="card" tabindex="0" [class.expanded]="isExpanded(1)">
         <div class="card-body">
           <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+            <i class="bi bi-check-circle card-title-icon"></i>
             <input class="card-title-checked  form-check-input ripple" type="checkbox" value="" id="check3" aria-label="{{ 'cards.select_card' | translate }}">
           </h5>
           <h6 class="card-subtitle mb-2">{{ 'cards.expandable_title' | translate }}</h6>
@@ -106,7 +106,7 @@
           }
           
           <div class="card-footer">
-            <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" [class.hgi-arrow-up-01]="isExpanded(1)" [class.hgi-arrow-down-01]="!isExpanded(1)" (click)="toggleCard(1)"></i>
+            <i class="bi card-expanded-icon" [class.bi-chevron-up]="isExpanded(1)" [class.bi-chevron-down]="!isExpanded(1)" (click)="toggleCard(1)"></i>
           </div>
         </div>
       </div>
@@ -122,7 +122,7 @@
       <div class="card" tabindex="0" [class.expanded]="isExpanded(2)">
         <div class="card-body">
           <h5 class="card-title">
-            <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+            <i class="bi bi-check-circle card-title-icon"></i>
           </h5>
           <h6 class="card-subtitle mb-2">{{ 'cards.expandable_title' | translate }}</h6>
           <p class="card-text">{{ 'cards.expandable_text' | translate }}</p>
@@ -143,7 +143,7 @@
           }
           
           <div class="card-footer">
-            <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" [class.hgi-arrow-up-01]="isExpanded(2)" [class.hgi-arrow-down-01]="!isExpanded(2)" (click)="toggleCard(2)"></i>
+            <i class="bi card-expanded-icon" [class.bi-chevron-up]="isExpanded(2)" [class.bi-chevron-down]="!isExpanded(2)" (click)="toggleCard(2)"></i>
           </div>
         </div>
       </div>

package/demo-angular/src/app/views/cards/cards.component.ts

@@ -32,7 +32,7 @@ export class CardsComponent {
   cardWithIconCode = `<div class="card" tabindex="0">
   <div class="card-body">
     <h5 class="card-title">
-      <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+      <i class="bi bi-check-circle card-title-icon"></i>
     </h5>
     <h6 class="card-subtitle mb-2">Card Title</h6>
     <p class="card-text">This is a sample card text that describes the content.</p>
@@ -64,7 +64,7 @@ export class CardsComponent {
   disabledCardCode = `<div class="card disabled" tabindex="0">
   <div class="card-body">
     <h5 class="card-title">
-      <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+      <i class="bi bi-check-circle card-title-icon"></i>
       <input class="card-title-checked form-check-input ripple" 
              disabled 
              type="checkbox" 
@@ -102,7 +102,7 @@ export class CardsComponent {
   expandableCardHtmlCode = `<div class="card" tabindex="0" [class.expanded]="isExpanded(1)">
   <div class="card-body">
     <h5 class="card-title">
-      <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+      <i class="bi bi-check-circle card-title-icon"></i>
       <input class="card-title-checked form-check-input ripple" 
              type="checkbox" 
              value="" 
@@ -124,9 +124,9 @@ export class CardsComponent {
     }
     
     <div class="card-footer">
-      <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" 
-         [class.hgi-arrow-up-01]="isExpanded(1)" 
-         [class.hgi-arrow-down-01]="!isExpanded(1)" 
+      <i class="bi card-expanded-icon" 
+         [class.bi-chevron-up]="isExpanded(1)" 
+         [class.bi-chevron-down]="!isExpanded(1)" 
          (click)="toggleCard(1)"></i>
     </div>
   </div>
@@ -163,7 +163,7 @@ export class CardsComponent {
   expandableCardSimpleHtmlCode = `<div class="card" tabindex="0" [class.expanded]="isExpanded(2)">
   <div class="card-body">
     <h5 class="card-title">
-      <i class="hgi hgi-stroke hgi-checkmark-circle-02 card-title-icon"></i>
+      <i class="bi bi-check-circle card-title-icon"></i>
     </h5>
     <h6 class="card-subtitle mb-2">Expandable Card Title</h6>
     <p class="card-text">Click the arrow to see more details.</p>
@@ -184,9 +184,9 @@ export class CardsComponent {
     }
     
     <div class="card-footer">
-      <i class="hgi hgi-stroke hgi-arrow-up-01 card-expanded-icon" 
-         [class.hgi-arrow-up-01]="isExpanded(2)" 
-         [class.hgi-arrow-down-01]="!isExpanded(2)" 
+      <i class="bi card-expanded-icon" 
+         [class.bi-chevron-up]="isExpanded(2)" 
+         [class.bi-chevron-down]="!isExpanded(2)" 
          (click)="toggleCard(2)"></i>
     </div>
   </div>

package/demo-angular/src/app/views/contexts/contexts.component.html

@@ -0,0 +1,204 @@
+<!-- Context-Aware Theming Demo -->
+<div class="container py-5">
+  <h1 class="mb-5">Context-Aware Theming System</h1>
+  <p class="lead mb-5">
+    Components automatically adapt their colors based on the background context.
+    Simply wrap content in context classes like <code>.on-primary</code>, <code>.on-dark</code>, etc.
+  </p>
+
+  <!-- Default Context (Light Background) -->
+  <section class="mb-5">
+    <h2>Default Context</h2>
+    <div class="p-4 border rounded">
+      <p class="mb-3">This is the default light background context.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Primary Button</button>
+        <button class="btn btn-secondary">Secondary Button</button>
+        <button class="btn btn-outline-primary">Outline Button</button>
+      </div>
+      <p class="mb-2">
+        <a href="#" class="me-3">Regular Link</a>
+        <a href="#" class="link-primary">Primary Link</a>
+      </p>
+      <input type="text" class="form-control" placeholder="Input field">
+    </div>
+  </section>
+
+  <!-- On Primary Context -->
+  <section class="mb-5">
+    <h2>On Primary Context</h2>
+    <div class="on-primary p-4 rounded context-section">
+      <h3>Content on Primary Background</h3>
+      <p class="mb-3">All components automatically adapt to white/light colors for better contrast.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Primary Button</button>
+        <button class="btn btn-secondary">Secondary Button</button>
+        <button class="btn btn-outline-primary">Outline Button</button>
+      </div>
+      <p class="mb-3">
+        <a href="#" class="me-3">Regular Link</a>
+        <span class="text-muted">Muted text adapts too</span>
+      </p>
+      <input type="text" class="form-control" placeholder="Input field adapts">
+      
+      <div class="card mt-3 on-light">
+        <div class="card-body">
+          <h5 class="card-title">Card in Primary Context</h5>
+          <p class="card-text">Cards have subtle transparency to blend with the background.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- On Dark Context -->
+  <section class="mb-5">
+    <h2>On Dark Context</h2>
+    <div class="on-dark p-4 rounded context-section">
+      <h3>Content on Dark Background</h3>
+      <p class="mb-3">Perfect for dark mode or dark sections. All components adapt automatically.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Primary Button</button>
+        <button class="btn btn-secondary">Secondary Button</button>
+        <button class="btn btn-outline-primary">Outline Button</button>
+      </div>
+      <p class="mb-3">
+        <a href="#" class="me-3">Regular Link</a>
+        <span class="text-muted">Muted text is readable</span>
+      </p>
+      <input type="text" class="form-control mb-3" placeholder="Form fields work great">
+      <select class="form-select">
+        <option>Select options adapt too</option>
+        <option>Option 2</option>
+      </select>
+    </div>
+  </section>
+
+  <!-- On Danger Context -->
+  <section class="mb-5">
+    <h2>On Danger Context</h2>
+    <div class="on-danger p-4 rounded context-section">
+      <h3>Critical Alerts or Warnings</h3>
+      <p class="mb-3">Use for error states, critical warnings, or important notices.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Primary Action</button>
+        <button class="btn btn-secondary">Secondary Action</button>
+        <button class="btn btn-outline-primary">Outline Action</button>
+      </div>
+      <div class="alert alert-warning mb-0">
+        <strong>Warning!</strong> Even alerts adapt to the context.
+      </div>
+    </div>
+  </section>
+
+  <!-- On Success Context -->
+  <section class="mb-5">
+    <h2>On Success Context</h2>
+    <div class="on-success p-4 rounded context-section">
+      <h3>Success Messages or Confirmation</h3>
+      <p class="mb-3">Perfect for success states, completed actions, or positive feedback.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Continue</button>
+        <button class="btn btn-outline-primary">View Details</button>
+      </div>
+      <p class="mb-0">
+        <a href="#">Learn more about this success</a>
+      </p>
+    </div>
+  </section>
+
+  <!-- On Warning Context -->
+  <section class="mb-5">
+    <h2>On Warning Context</h2>
+    <div class="on-warning p-4 rounded context-section">
+      <h3>Warning or Attention Needed</h3>
+      <p class="mb-3">Note: Uses dark text for better contrast on yellow/warning background.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Take Action</button>
+        <button class="btn btn-secondary">Dismiss</button>
+      </div>
+      <input type="text" class="form-control" placeholder="Dark text on warning background">
+    </div>
+  </section>
+
+  <!-- On Light Context -->
+  <section class="mb-5">
+    <h2>On Light Context</h2>
+    <div class="on-light p-4 rounded context-section">
+      <h3>Subtle Light Background</h3>
+      <p class="mb-3">Slightly different from default - useful for sections, sidebars, or panels.</p>
+      <div class="d-flex gap-2 mb-3">
+        <button class="btn btn-primary">Primary Button</button>
+        <button class="btn btn-secondary">Secondary Button</button>
+        <button class="btn btn-outline-primary">Outline Button</button>
+      </div>
+      <p class="mb-3">
+        <a href="#">Links maintain primary color</a>
+        <span class="text-muted ms-3">Muted text for less emphasis</span>
+      </p>
+      <div class="row g-2">
+        <div class="col">
+          <input type="text" class="form-control" placeholder="First name">
+        </div>
+        <div class="col">
+          <input type="text" class="form-control" placeholder="Last name">
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Nested Contexts Example -->
+  <section class="mb-5">
+    <h2>Nested Contexts</h2>
+    <div class="on-primary p-4 rounded">
+      <h3>Primary Background</h3>
+      <p class="mb-3">You can nest different contexts for complex layouts.</p>
+      <button class="btn btn-primary me-2">Button on Primary</button>
+      
+      <div class="on-light p-3 rounded mt-3">
+        <h4>Light Context Inside Primary</h4>
+        <p class="mb-2">This light section is nested inside the primary background.</p>
+        <button class="btn btn-primary">Button on Light</button>
+      </div>
+    </div>
+  </section>
+
+  <!-- Usage Guide -->
+  <section class="mt-5 p-4 bg-light rounded">
+    <h2>How to Use</h2>
+    <div class="row">
+      <div class="col-md-6">
+        <h4>Available Context Classes:</h4>
+        <ul>
+          <li><code>.on-primary</code> - White text on primary color</li>
+          <li><code>.on-dark</code> - White text on dark background</li>
+          <li><code>.on-danger</code> - White text on danger/error color</li>
+          <li><code>.on-success</code> - White text on success color</li>
+          <li><code>.on-warning</code> - Dark text on warning color</li>
+          <li><code>.on-light</code> - Dark text on light background</li>
+        </ul>
+      </div>
+      <div class="col-md-6">
+        <h4>What Adapts Automatically:</h4>
+        <ul>
+          <li>✅ Buttons (all variants)</li>
+          <li>✅ Links</li>
+          <li>✅ Form inputs and selects</li>
+          <li>✅ Text colors</li>
+          <li>✅ Border colors</li>
+          <li>✅ Cards and alerts</li>
+          <li>✅ Tables and badges</li>
+        </ul>
+      </div>
+    </div>
+    
+    <div class="mt-4">
+      <h4>Example Code:</h4>
+      <pre class="bg-dark text-white p-3 rounded"><code>&lt;div class="on-primary p-4"&gt;
+  &lt;h3&gt;Content adapts automatically&lt;/h3&gt;
+  &lt;button class="btn btn-primary"&gt;Primary Button&lt;/button&gt;
+  &lt;a href="#"&gt;Link&lt;/a&gt;
+  &lt;input type="text" class="form-control" placeholder="Input"&gt;
+&lt;/div&gt;</code></pre>
+    </div>
+  </section>
+</div>

package/demo-angular/src/app/views/contexts/contexts.component.ts

@@ -0,0 +1,10 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-buttons',
+  imports: [TranslateModule],
+  templateUrl: './contexts.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ContextsComponent {}

package/demo-angular/src/app/views/footer/footer.html

@@ -0,0 +1,282 @@
+<footer class="dga-footer on-primary">
+  <div class="container-fluid">
+    <!-- Main Footer Content -->
+    <div class="row dga-list-group-container">
+      <!-- Footer Link Groups (5 columns) -->
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <!-- Social Media & Accessibility -->
+      <div class="col-12 col-lg-auto">
+        <div class="dga-social-container">
+        <!-- Social Media -->
+        <div>
+          <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Social Media</h6>
+          <div class="d-flex gap-2 flex-wrap">
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-twitter"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-facebook"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-instagram"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-linkedin"></i>
+            </button>
+          </div>
+        </div>
+
+        <!-- Accessibility Tools -->
+        <div>
+          <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Accessibility Tools</h6>
+          <div class="d-flex gap-2 flex-wrap">
+            <button class="btn btn-outline-secondary btn-icon">
+              <i class="bi bi-eye"></i>
+            </button>
+            <button class="btn btn-outline-secondary btn-icon">
+              <i class="bi bi-volume-up"></i>
+            </button>
+            <button class="btn btn-outline-secondary btn-icon">
+              <i class="bi bi-universal-access"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      </div>
+    </div>
+
+    <!-- Bottom Footer -->
+    <div class="dga-footer-bottom">
+      <div class="row g-4 align-items-center">
+        <div class="col-lg-8">
+          <!-- Footer Links Row -->
+          <div class="dga-footer-bottom-links">
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+          </div>
+
+          <!-- Copyright -->
+          <div class="dga-footer-copyright">
+            <p class="fw-semibold small mb-2">All Right Reserved For Digital Government Authority © 2024</p>
+            <div class="dga-footer-copyright-links">
+              <a href="#" class="link-neutral small">Terms and Conditions</a>
+              <a href="#" class="link-neutral small">Privacy Policy</a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Logos -->
+        <div class="col-lg-4">
+          <div class="dga-logo-container">
+            <img src="https://placehold.co/125x42" alt="logo">
+            <img src="https://placehold.co/125x42" alt="logo">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<app-code-example [htmlCode]="primaryFooterCode"></app-code-example>
+
+
+<footer class="dga-footer on-secondary">
+  <div class="container-fluid">
+    <!-- Main Footer Content -->
+    <div class="row dga-list-group-container">
+      <!-- Footer Link Groups (5 columns) -->
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <div class="col-6 col-md-4 col-lg dga-link-group">
+        <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+          <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
+        </ul>
+      </div>
+
+      <!-- Social Media & Accessibility -->
+      <div class="col-12 col-lg-auto">
+        <div class="dga-social-container">
+        <!-- Social Media -->
+        <div>
+          <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Social Media</h6>
+          <div class="d-flex gap-2 flex-wrap">
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-twitter"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-facebook"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-instagram"></i>
+            </button>
+            <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Download">
+              <i class="bi bi-linkedin"></i>
+            </button>
+          </div>
+        </div>
+
+        <!-- Accessibility Tools -->
+        <div>
+          <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Accessibility Tools</h6>
+          <div class="d-flex gap-2 flex-wrap">
+            <button class="btn btn-outline-secondary btn-icon">
+              <i class="bi bi-eye"></i>
+            </button>
+            <button class="btn btn-outline-secondary btn-icon">
+              <i class="bi bi-volume-up"></i>
+            </button>
+            <button class="btn btn-outline-secondary btn-icon">
+              <i class="bi bi-universal-access"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+      </div>
+    </div>
+
+    <!-- Bottom Footer -->
+    <div class="dga-footer-bottom">
+      <div class="row g-4 align-items-center">
+        <div class="col-lg-8">
+          <!-- Footer Links Row -->
+          <div class="dga-footer-bottom-links">
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+            <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
+          </div>
+
+          <!-- Copyright -->
+          <div class="dga-footer-copyright">
+            <p class="fw-semibold small mb-2">All Right Reserved For Digital Government Authority © 2024</p>
+            <div class="dga-footer-copyright-links">
+              <a href="#" class="link-neutral small">Terms and Conditions</a>
+              <a href="#" class="link-neutral small">Privacy Policy</a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Logos -->
+        <div class="col-lg-4">
+          <div class="dga-logo-container">
+            <img src="https://placehold.co/125x42" alt="logo">
+            <img src="https://placehold.co/125x42" alt="logo">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<app-code-example [htmlCode]="secondaryFooterCode"></app-code-example>

package/demo-angular/src/app/views/footer/footer.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Footer } from './footer';
+
+describe('Footer', () => {
+  let component: Footer;
+  let fixture: ComponentFixture<Footer>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Footer]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Footer);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});