govau/design-system-components

🏛️ Bộ thành phần giao diện Hệ thống thiết kế chính phủ Úc

Các thành phần UI được kiểm thử, tuân thủ chuẩn tiếp cận và hỗ trợ trình duyệt rộng cho dự án chính phủ Úc.

govau/design-system-components là kho chứa mã nguồn và bài kiểm thử các thành phần giao diện người dùng dùng cho Hệ thống thiết kế chính phủ Úc. Dự án phân phối qua npm dưới dạng các package con độc lập (ví dụ: @gov.au/body, @gov.au/header) và hỗ trợ nhiều định dạng sử dụng khác nhau: CSS đã nén, CSS modules, SASS modules, JavaScript đã nén, JavaScript modules và React modules.

Lưu ý: Hệ thống thiết kế chính phủ Úc đã ngừng hoạt động. Thông tin chi tiết trên trang cộng đồng.

✨ Điểm nổi bật

• Nhiều định dạng tải xuống: hỗ trợ CSS minified, CSS modules, SASS modules, JavaScript minified, JavaScript modules và React modules.
• Cài đặt qua npm: mỗi thành phần là một package độc lập, cài đặt dễ dàng bằng npm install @gov.au/<tên>.
• Công cụ hỗ trợ: tích hợp với Pancake và Syrup để quản lý tài nguyên tự động.
• Kiểm thử đầy đủ: bao gồm cả bài kiểm thử đơn vị bằng Jest và kiểm tra tiếp cận.
• Chuẩn tiếp cận: đảm bảo độ tương phản màu sắc, điều hướng bằng bàn phím và hỗ trợ độc giả màn hình.
• Hỗ trợ trình duyệt rộng: từ IE8 trở lên đến các trình duyệt hiện đại trên desktop và thiết bị di động.
• Kiểu dáng nhất quán: sử dụng hệ thống biến SASS ($AU-color-, $AU-colordark-) và hàm tiện ích (AU-space(), AU-fontgrid(), AU-focus()).
• Tài liệu chi tiết: cung cấp checklist chất lượng và hướng dẫn phát triển nghiêm ngặt.

💡 Vì sao đáng chú ý

Dự án không chỉ cung cấp giao diện mẫu mà còn thiết lập một quy trình phát triển nghiêm ngặt với checklist kiểm tra từ HTML ngữ nghĩa, khả năng tiếp cận, CSS/Sass đến JavaScript. Điều này giúp các nhà phát triển xây dựng giao diện đảm bảo chuẩn mực chính phủ, hoạt động ổn định trên cả trình duyệt cũ và mới.

Thích hợp cho các dự án web yêu cầu tuân thủ tiêu chuẩn tiếp cận và hỗ trợ độc giả rộng, đặc biệt trong lĩnh vực công.

---

#DesignSystem #Government #React #Sass #Accessibility #TiniX