sdga-ui 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdga-ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "DGA UI - Government-Style Bootstrap Theme",
   "keywords": [
     "sdga",
@@ -26,24 +26,40 @@
   "author": "Mahmoud Adel",
   "type": "module",
   "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./css/dga-ui.css": "./css/dga-ui.css",
+    "./css/*": "./css/*",
+    "./fonts/*": "./fonts/*",
+    "./theme/*": "./theme/*"
+  },
+  "files": [
+    "css",
+    "fonts",
+    "theme",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "test": "echo \"No tests yet\" && exit 0",
     "format": "prettier --write \"**/*.{js,json,md,css,scss}\"",
     "format:check": "prettier --check \"**/*.{js,json,md,css,scss}\"",
     "build-css": "sass --load-path=node_modules theme/dga-ui.scss css/dga-ui.css",
     "watch-css": "sass --load-path=node_modules --watch theme/dga-ui.scss css/dga-ui.css",
-    "update-demo-version": "node -e \"const fs=require('fs');const pkg=JSON.parse(fs.readFileSync('package.json'));const demoPkg=JSON.parse(fs.readFileSync('demo-angular/package.json'));demoPkg.version=pkg.version;demoPkg.dependencies['sdga-ui']='^'+pkg.version;fs.writeFileSync('demo-angular/package.json',JSON.stringify(demoPkg,null,2)+'\\n');console.log('Synced demo-angular version to',pkg.version);\"",
+    "update-docs-version": "node -e \"const fs=require('fs');const pkg=JSON.parse(fs.readFileSync('package.json'));const docsPkg=JSON.parse(fs.readFileSync('docs/package.json'));docsPkg.version=pkg.version;fs.writeFileSync('docs/package.json',JSON.stringify(docsPkg,null,2)+'\\n');console.log('Synced docs version to',pkg.version);\"",
     "prepublishOnly": "npm run build-css",
     "preversion": "npm run build-css",
-    "version": "npm run update-demo-version && git add .",
+    "version": "npm run update-docs-version && git add .",
     "postversion": "git push --follow-tags"
   },
   "peerDependencies": {
-    "bootstrap": "^5.3.8"
+    "bootstrap": "^5.3.8",
+    "bootstrap-icons": "^1.13.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.19",
     "bootstrap": "^5.3.8",
+    "bootstrap-icons": "^1.13.1",
     "postcss": "^8.4.38",
     "prettier": "^3.7.3",
     "sass": "^1.69.5"

package/theme/customizations/_links.scss

@@ -7,37 +7,33 @@
 
 // Define link color variants with their shades
 $link-variants: (
-  "primary": (
-    base: rgba($primary-600, var(--#{$prefix}link-opacity, 1)),
+  "primary": (base: rgba($primary-600, var(--#{$prefix}link-opacity, 1)),
     base-decoration: rgba($primary-600, var(--#{$prefix}link-decoration-opacity, 1)),
     hover: rgba($primary-400, var(--#{$prefix}link-opacity, 1)),
     hover-decoration: rgba($primary-400, var(--#{$prefix}link-decoration-opacity, 1)),
     active: rgba($primary-300, var(--#{$prefix}link-opacity, 1)),
-    active-decoration: rgba($primary-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
-  "neutral": (
-    base: rgba($neutral-700, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($primary-300, var(--#{$prefix}link-decoration-opacity, 1))),
+  "neutral": (base: rgba($neutral-700, var(--#{$prefix}link-opacity, 1)),
     base-decoration: rgba($neutral-700, var(--#{$prefix}link-decoration-opacity, 1)),
     hover: rgba($neutral-500, var(--#{$prefix}link-opacity, 1)),
     hover-decoration: rgba($neutral-500, var(--#{$prefix}link-decoration-opacity, 1)),
     active: rgba($neutral-400, var(--#{$prefix}link-opacity, 1)),
-    active-decoration: rgba($neutral-400, var(--#{$prefix}link-decoration-opacity, 1)) )
+    active-decoration: rgba($neutral-400, var(--#{$prefix}link-decoration-opacity, 1)))
 );
 
 $on-primary-link-variants: (
-  "primary": (
-    base: rgba($white, var(--#{$prefix}link-opacity, 1)),
+  "primary": (base: rgba($white, var(--#{$prefix}link-opacity, 1)),
     base-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 1)),
     hover: rgba($white, var(--#{$prefix}link-opacity, 0.8)),
     hover-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.8)),
     active: rgba($white, var(--#{$prefix}link-opacity, 0.6)),
-    active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6)) ),
-  "neutral": (
-    base: rgba($white, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6))),
+  "neutral": (base: rgba($white, var(--#{$prefix}link-opacity, 1)),
     base-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 1)),
     hover: rgba($white, var(--#{$prefix}link-opacity, 0.8)),
     hover-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.8)),
     active: rgba($white, var(--#{$prefix}link-opacity, 0.6)),
-    active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6)) )
+    active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6)))
 );
 
 // Generate link variant classes
@@ -63,10 +59,16 @@ $on-primary-link-variants: (
       color: map-get($colors, active) !important;
       text-decoration-color: map-get($colors, active-decoration) !important;
     }
+
+    &.disabled {
+      color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
+      text-decoration-color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
+      pointer-events: none;
+    }
   }
 }
 
-.on-primary  {
+.on-primary {
   @each $name, $colors in $on-primary-link-variants {
     .link-#{$name} {
       color: map-get($colors, base) !important;
@@ -88,13 +90,12 @@ $on-primary-link-variants: (
         color: map-get($colors, active) !important;
         text-decoration-color: map-get($colors, active-decoration) !important;
       }
+
+      &.disabled {
+        color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
+        text-decoration-color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
+        pointer-events: none;
+      }
     }
   }
-}
-
-a.disabled {
-  color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
-  text-decoration-color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
-  pointer-events: none;
-}
-
+}

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": ""
-          }
-        }
-      }
-    }
-  }
-}