sdga-ui 1.0.8 → 1.0.10

package/theme/customizations/_navbar.scss

@@ -0,0 +1,167 @@
+.navbar {
+    position: relative;
+
+    .nav-link {
+        display: flex;
+        height: 4.5rem;
+        min-width: 4.5rem;
+        font-size: 1rem;
+        padding: var(--spacing-md, $navbar-nav-link-padding-y) var(--spacing-xl, $navbar-nav-link-padding-x);
+        justify-content: center;
+        align-items: center;
+        border-radius: $radius-sm;
+        gap: 0.25rem;
+        position: relative;
+
+
+        &.icon-top {
+            flex-direction: column;
+        }
+
+        &::before {
+            content: '';
+            transition: transform 0.3s ease-in-out;
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: calc(100% - 1rem);
+            height: 0.375rem;
+            border-radius: $radius-full;
+        }
+
+        &:hover {
+            background-color: $neutral-100;
+
+            &::before {
+                background-color: $neutral-400;
+            }
+        }
+
+        &:active {
+            background-color: $neutral-200;
+
+            &::before {
+                background-color: $neutral-800;
+            }
+        }
+
+        &:disabled,
+        &.disabled {
+            pointer-events: none;
+            cursor: default;
+            background-color: transparent;
+            color: $neutral-400;
+
+            &::before {
+                background-color: transparent;
+            }
+        }
+
+        &.active {
+            background-color: $primary-600;
+            color: $white;
+
+            &::before {
+                background-color: $primary-400;
+            }
+
+            &:hover {
+                background-color: $primary-700;
+
+                &::before {
+                    background-color: $primary-400;
+                }
+            }
+
+            &:active {
+                background-color: $primary-900;
+
+                &::before {
+                    background-color: $primary-400;
+                }
+            }
+
+            &:disabled,
+            &.disabled {
+                pointer-events: none;
+                cursor: default;
+                color: $neutral-400;
+                background-color: transparent;
+
+                &::before {
+                    background-color: $neutral-200;
+                }
+            }
+        }
+    }
+
+    .dropdown {
+        position: unset;
+    }
+
+    .dropdown-menu {
+        height: max-content;
+        transition: transform 1s ease-in-out;
+        inset: auto 0 auto auto !important;
+        padding: 2rem 5rem;
+        width: 100%;
+        border: none;
+        margin: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+
+        .dropdown-header {
+            color: $primary;
+            font-size: $font-size-lg;
+            font-weight: $font-weight-bold;
+
+        }
+
+        .dropdown-item-group {
+            display: flex;
+            flex-direction: column;
+            gap: .25rem;
+        }
+
+        &.show {
+            display: flex;
+            align-items: flex-start;
+            align-content: flex-start;
+            gap: 1.5rem var(--spacing-3xl, 1.5rem);
+            align-self: stretch;
+            flex-wrap: wrap;
+        }
+
+    }
+}
+
+
+.on-primary {
+    .dropdown-menu,
+    &.dropdown-menu {
+
+        .dropdown-item,
+        .dropdown-header {
+            color: $white;
+        }
+
+        .dropdown-item:hover {
+            background-color: rgb($white, 0.2);
+            color: $white;
+        }
+
+        .dropdown-item:active {
+            background-color: rgb($white, 0.4);
+            color: $white;
+        }
+
+        .dropdown-item.disabled,
+        .dropdown-item.disabled:hover,
+        .dropdown-item.disabled:active {
+            background-color: transparent;
+            color: $neutral-400;
+        }
+
+    }
+}

package/theme/dga-ui.scss

@@ -16,6 +16,7 @@
 
 // Import all component customizations
 @import './customizations/global';
+@import './customizations/icon-featured';
 @import './customizations/links';
 @import './customizations/buttons';
 @import './customizations/cards';
@@ -26,3 +27,4 @@
 @import './customizations/forms-switch';
 @import './customizations/tables';
 @import './customizations/footer';
+@import './customizations/navbar';

package/.editorconfig

@@ -1,23 +0,0 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-# Unix-style newlines with a newline ending every file
-[*]
-end_of_line = lf
-insert_final_newline = true
-charset = utf-8
-trim_trailing_whitespace = true
-
-# Matches multiple files with brace expansion notation
-[*.{js,jsx,ts,tsx,json,css,scss,md,html,yml,yaml}]
-indent_style = space
-indent_size = 2
-
-[*.md]
-trim_trailing_whitespace = false
-max_line_length = off
-
-[Makefile]
-indent_style = tab

package/.github/workflows/deploy.yml

@@ -1,71 +0,0 @@
-name: Deploy to GitHub Pages
-
-on:
-  push:
-    tags:
-      - 'v*'
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-      
-      - name: Wait for npm publish
-        run: |
-          VERSION=$(node -p "require('./package.json').version")
-          echo "Waiting for sdga-ui@$VERSION to be available on npm..."
-          for i in {1..30}; do
-            if npm view sdga-ui@$VERSION version 2>/dev/null; then
-              echo "Package sdga-ui@$VERSION is now available!"
-              exit 0
-            fi
-            echo "Attempt $i/30: Package not yet available, waiting 10 seconds..."
-            sleep 10
-          done
-          echo "Warning: Package may not be available yet, proceeding anyway..."
-      
-      - name: Install dependencies
-        working-directory: ./demo-angular
-        run: npm run use:npm
-      
-      - name: Build Angular app
-        working-directory: ./demo-angular
-        run: npm run build:prod
-      
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-      
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: './demo-angular/dist/demo-angular/browser'
-  
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4

package/.github/workflows/publish.yml

@@ -1,36 +0,0 @@
-name: Publish to npm
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-jobs:
-  build-and-publish:
-    runs-on: ubuntu-latest
-    permissions:
-      id-token: write  # Required for OIDC
-      contents: read
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: 'https://registry.npmjs.org/'
-
-      - name: Update npm
-        run: npm install -g npm@latest
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build CSS
-        run: npm run build-css
-
-      # Trusted Publishing doesn't need NODE_AUTH_TOKEN
-      - name: Publish package to npm
-        run: npm publish --access public

package/.prettierignore

@@ -1,73 +0,0 @@
-# Dependencies
-node_modules
-bower_components
-
-# Production builds
-dist
-build
-out
-.next
-.nuxt
-.cache
-.parcel-cache
-
-# Package files
-*.min.js
-*.min.css
-package-lock.json
-yarn.lock
-pnpm-lock.yaml
-
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Coverage and test reports
-coverage
-.nyc_output
-*.lcov
-
-# Environment and config
-.env
-.env.local
-.env.*.local
-
-# Git
-.git
-.gitignore
-
-# IDE and editors
-.vscode
-.idea
-*.swp
-*.swo
-*~
-
-# OS files
-.DS_Store
-Thumbs.db
-
-# Documentation
-CHANGELOG.md
-LICENSE
-
-# Generated files
-*.generated.*
-*.bundle.*
-
-# Assets
-*.png
-*.jpg
-*.jpeg
-*.gif
-*.svg
-*.ico
-*.pdf
-*.woff
-*.woff2
-*.ttf
-*.eot
-*.otf

package/.prettierrc

@@ -1,17 +0,0 @@
-{
-  "semi": true,
-  "trailingComma": "es5",
-  "singleQuote": true,
-  "printWidth": 100,
-  "tabWidth": 2,
-  "useTabs": false,
-  "arrowParens": "avoid",
-  "bracketSpacing": true,
-  "endOfLine": "lf",
-  "quoteProps": "as-needed",
-  "jsxSingleQuote": false,
-  "bracketSameLine": false,
-  "proseWrap": "preserve",
-  "htmlWhitespaceSensitivity": "css",
-  "embeddedLanguageFormatting": "auto"
-}

package/demo-angular/.editorconfig

@@ -1,17 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-ij_typescript_use_double_quotes = false
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

package/demo-angular/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
-}

package/demo-angular/.vscode/launch.json

@@ -1,20 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "ng serve",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: start",
-      "url": "http://localhost:4200/"
-    },
-    {
-      "name": "ng test",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: test",
-      "url": "http://localhost:9876/debug.html"
-    }
-  ]
-}

package/demo-angular/.vscode/tasks.json

@@ -1,42 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    }
-  ]
-}

package/demo-angular/README.md

@@ -1,91 +0,0 @@
-# DGA UI - Angular Demo
-
-This is the demo application showcasing the DGA UI theme components and features.
-
-## Development vs Production Library Usage
-
-### Local Development
-During development, the demo uses the **local version** of `sdga-ui` from the parent directory:
-
-```bash
-npm start
-```
-
-This automatically runs `npm run use:local` which installs the library from `file:..`, allowing you to test changes immediately.
-
-### Production Build / Deployment
-For production builds and GitHub Pages deployment, the demo uses the **published npm package**:
-
-```bash
-npm run build:prod
-```
-
-This automatically runs `npm run use:npm` which installs the library from the npm registry.
-
-### Manual Switching
-
-You can manually switch between local and npm versions:
-
-```bash
-# Use local development version
-npm run use:local
-
-# Use published npm version  
-npm run use:npm
-```
-
-## Development server
-
-To start a local development server, run:
-
-```bash
-ng serve
-```
-
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
-
-```bash
-ng generate component component-name
-```
-
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
-
-## Building
-
-To build the project run:
-
-```bash
-ng build
-```
-
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/demo-angular/angular.json

@@ -1,96 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "cli": {
-    "packageManager": "npm"
-  },
-  "newProjectRoot": "projects",
-  "projects": {
-    "demo-angular": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular/build:application",
-          "options": {
-            "outputPath": "dist/demo-angular",
-            "browser": "src/main.ts",
-            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
-            ],
-            "preserveSymlinks": true,
-            "stylePreprocessorOptions": {
-              "includePaths": [
-                "../../node_modules"
-              ]
-            }
-          },
-          "configurations": {
-            "production": {
-              "baseHref": "/dga-ui/",
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular/build:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "demo-angular:build:production"
-            },
-            "development": {
-              "buildTarget": "demo-angular:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "test": {
-          "builder": "@angular/build:unit-test"
-        },
-        "deploy": {
-          "builder": "angular-cli-ghpages:deploy",
-          "options": {
-            "baseHref": "/dga-ui/",
-            "cname": ""
-          }
-        }
-      }
-    }
-  }
-}