diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 000000000..3b67e0c47 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,37 @@ +# Project Overview +This project contains the public documentation for the Government of Alberta's Design System. + +## Libraries and Frameworks +- The site is built with React components from the Government of Alberta's UI Components library. + +## Folder Structure +- `src/routes/home.tsx`: The home page. +- `src/routes/get-started`: The pages for starting with the design system. +- `src/routes/examples/ExamplesOverview.tsx`: The page listing all examples. +- `src/examples`: Examples of patterns, pages, tasks, component configurations, flows, and more. +- `src/routes/components/AllComponents.tsx`: The page listing all components. +- `src/routes/components`: The pages for each UI component. +- `src/routes/design-tokens`: The pages for design tokens. +- `src/routes/foundations`: The pages for design foundations. + +## Component versions +- Documentation for the most recent version of components are shown with `version === "new"`. +- Documentation for old Long-Term Support (LTS) components are shown with `version === "old"`. + +## Commits & Pull Requests +- Use Conventional Commits format for commit messages. +- Use the present tense. +- Use the imperative mood. +- Limit the first line to 72 characters or less. +- Start the commit message with a reference to the GitHub Issue number, such as `feat(#1234):` +- If the commit relates to an issue, include "Closes #ISSUE_NUMBER" in the commit message. +- If the commit relates to a breaking change, include "BREAKING CHANGE:" in the commit message. + +## Pull Requests +- Only add a single commit to a Pull Request. +- Start the Pull Request title with a reference to the GitHub Issue number, such as `feat(#1234):` + +## CSS and Design Tokens +- Use CSS custom properties that are defined by our design tokens. +- Name custom properties for global styles in this format: `--goa-[category]-[name]`, such as `--goa-color-primary`. +- Name custom properties for component-specific styles in this format: `--goa-[component]-[category]-[name]`. diff --git a/AI_INSTRUCTIONS.md b/AI_INSTRUCTIONS.md new file mode 100644 index 000000000..b847800e4 --- /dev/null +++ b/AI_INSTRUCTIONS.md @@ -0,0 +1,511 @@ +# AI Instructions for GoA Design System Website Updates + +This document provides comprehensive instructions for AI assistants working on the GoA Design System documentation website (`ui-components-docs`). Understanding this architecture is critical for making safe, effective changes. + +## Table of Contents +1. [Project Overview](#project-overview) +2. [GoabText Spacing System](#goabtext-spacing-system) +3. [Website Architecture](#website-architecture) +4. [Version & Framework System](#version--framework-system) +5. [Component Property Documentation](#component-property-documentation) +6. [Spacing Patterns by Page Type](#spacing-patterns-by-page-type) +7. [Development Workflow](#development-workflow) +8. [Areas Requiring Special Care](#areas-requiring-special-care) +9. [Common Tasks & Guidelines](#common-tasks--guidelines) +10. [Quality Assurance](#quality-assurance) + +## Project Overview + +### Technology Stack +- **Framework**: React 18.2.0 + TypeScript + Vite +- **Design System**: `@abgov/react-components` v6.6.1, `@abgov/web-components` v1.36.1 +- **Routing**: React Router v6.13.0 +- **Styling**: CSS Modules + Design System components + +### Key Architecture Principles +- **Dynamic Content**: Much content is GitHub-sourced and version-dependent +- **Multi-Version Support**: 4 versions (LTS/Latest × React/Angular) +- **Component Reuse**: Examples shared between individual pages and component documentation +- **Semantic HTML**: Always use proper heading hierarchy with `tag` prop +- **Default-First Design**: GoabText has intelligent defaults, override only when needed + +## GoabText Spacing System (CURRENT) + +### Understanding the Philosophy +GoabText now has **built-in default margins** that provide good starting values for most scenarios. The defaults ensure text never gets cramped and creates proper visual hierarchy automatically. + +### Default Spacing Values + +**Default Top Margins by Size:** +- `heading-xl`: `2XL` +- `heading-l`: `2XL` +- `heading-m`: `2XL` +- `heading-s`: `XL` +- `heading-xs`: `XL` +- `body-l`: `2XL` +- `body-m`: `L` +- `body-s`: `L` +- `body-xs`: `S` + +**Default Bottom Margins by Size:** +- `heading-xl`: `L` +- `heading-l`: `L` +- `heading-m`: `M` +- `heading-s`: `S` +- `heading-xs`: `XS` +- `body-l`: `L` +- `body-m`: `L` +- `body-s`: `L` +- `body-xs`: `L` + +### When to Override Defaults +- **Connected Content**: Use `mt="none"` when content should flow directly from previous element +- **Container Boundaries**: Use `mt="none"` or `mb="none"` at container edges for alignment +- **Custom Relationships**: Override with specific values when design requires different spacing +- **Legacy Cleanup**: Remove explicit margins that now duplicate the new defaults + +### Semantic HTML Requirements +**Always use proper semantic tags with the `tag` prop:** +```tsx +// ✅ CORRECT: Semantic h1 with visual flexibility +Page Title + +// ❌ WRONG: Missing semantic meaning +Page Title + +// ❌ WRONG: Raw HTML instead of GoabText +

Page Title

+``` + +## Website Architecture + +### Main Route Structure +``` +src/routes/ +├── home.tsx # Landing page +├── get-started/ # Onboarding content +│ ├── GetStartedOverview.tsx +│ ├── developers/ # Developer guides +│ ├── designers/ # Designer resources +│ └── qa-testing/ # QA testing guides +├── foundations/ # Design principles (safe for systematic changes) +│ ├── Accessibility.tsx +│ ├── Color.tsx +│ ├── Typography.tsx +│ └── [other foundation pages] +├── components/ # Component documentation (REQUIRES MANUAL REVIEW) +├── examples/ # Usage patterns (REQUIRES MANUAL REVIEW) +└── design-tokens/ # Design token documentation (safe for systematic changes) + ├── color/ + ├── spacing/ + └── [other token pages] +``` + +### Key Shared Components +- **ComponentContent**: Wrapper for consistent page structure with table of contents +- **CardLite**: Reusable navigation cards used throughout the site +- **AccessibilityEmpty**: Shared accessibility guidance component +- **Sandbox**: Interactive component playground (components section only) +- **ExamplePageTemplate**: Dynamic template for individual example pages + +### Content Sources +- **Static Content**: Foundations, Get Started, Design Tokens (manually maintained) +- **GitHub-Sourced Metadata**: Component and example descriptions, status, links +- **Dynamic Templates**: Examples and component pages use template systems +- **Shared Examples**: Individual example components reused across contexts + +## Version & Framework System + +### Four-Version Architecture +The website supports **4 distinct versions** of code examples: +1. **LTS/React** (`version === "old"`, `tags="react"`) +2. **Latest/React** (`version === "new"`, `tags="react"`) +3. **LTS/Angular** (`version === "old"`, `tags="angular"`) +4. **Latest/Angular** (`version === "new"`, `tags="angular"`) + +### Version Context Usage +```tsx +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; + +const {version, language} = useContext(LanguageVersionContext); + +// Conditional rendering based on version +{version === "new" && } +{version === "old" && } + +// Framework-specific content +tags="react" +tags="angular" +tags={["angular", "reactive"]} // Angular reactive forms +tags={["angular", "template-driven"]} // Angular template-driven forms +``` + +### Component Naming Differences +- **LTS**: `GoA` prefix, `goa-` HTML tags, `(_click)` events +- **Latest**: `Goab` prefix, `goab-` HTML tags, `(onClick)` events + +### Example Structure Requirements +Examples must support all 4 versions: +```tsx +export const ExampleComponent = () => { + const {version} = useContext(LanguageVersionContext); + + return ( + + {/* Visual demo that works across all versions */} + Demo Button + + {/* Version-specific React code */} + {version === "old" && `} />} + {version === "new" && `} />} + + {/* Version-specific Angular code */} + {version === "old" && `} />} + {version === "new" && `} />} + + ); +}; +``` + +## Component Property Documentation + +### Documentation Flow +1. **Type Definitions** → `ui-components/libs/common/src/lib/common.ts` +2. **React Interface** → `ui-components/libs/react-components/src/lib/[component]/[component].tsx` +3. **Documentation Props** → `ui-components-docs/src/routes/components/[Component].tsx` + +### ComponentProperty Structure +```tsx +export type ComponentProperty = { + name: string; // Property name + type?: string | string[]; // TypeScript type + inline union values + lang?: "react" | "angular"; // Framework-specific props + required?: boolean; // Required property flag + description?: string; // Human-readable description + defaultValue?: string; // Default value if any + badge?: { content: string; type: GoabBadgeType }; // Special badges +}; +``` + +### Property Documentation Patterns +```tsx +// Component-specific properties +const componentProperties: ComponentProperty[] = [ + { + name: "type", + type: "GoabButtonType (primary | submit | secondary | tertiary | start)", + description: "Sets the type of button.", + defaultValue: "primary", + }, + // Framework-specific variations + { + name: "leadingIcon", + type: "GoabIconType", + lang: "react", + description: "Shows an icon to the left of the text.", + }, + { + name: "leadingicon", // lowercase for Angular + type: "GoabIconType", + lang: "angular", + description: "Shows an icon to the left of the text.", + }, + // Shared properties (reuse these) + TestIdProperty, // From common-properties.ts + MarginProperty, // From common-properties.ts +]; + +// Legacy version properties +const oldComponentProperties: ComponentProperty[] = [ + // Properties for LTS version +]; +``` + +### Version & Framework Filtering +The `ComponentProperties` component automatically: +- Filters properties by framework (React vs Angular) +- Filters properties by version (LTS vs Latest) +- Displays context-appropriate properties + +### Updating Component Properties +When updating component documentation: +1. **Check type definitions** in `common.ts` first +2. **Update React interface** if needed +3. **Update documentation arrays** to match +4. **Use shared properties** from `common-properties.ts` when possible +5. **Maintain version differences** between old/new property arrays + +## Spacing Patterns by Page Type + +### Standard Page Pattern (Foundations, Get Started, Design Tokens) +```tsx +Page Title +Introduction paragraph explaining the page content. +``` +- **Title**: Uses default `2XL` top + `L` bottom margins +- **Introduction**: Uses `mt="none"` to connect to title, default bottom margin + +### Subsection Pages with Category Labels +**Get Started Developer/Designer/QA pages:** +```tsx +Developers +Specific Page Title +Introduction paragraph +``` + +**Foundation Pages with Content Guidelines/Style Guide:** +```tsx +Content guidelines {/* or "Style guide" */} +Page Title +Introduction paragraph +``` + +**Foundation Category Assignment:** +- **Content Guidelines**: ErrorMessages, HelperText, DateFormat, Capitalization +- **Style Guide**: Color, Iconography, Photography, Logo, Typography, Layout + +### Design Token Pages +```tsx +Token Name +``` +- **Critical**: Never use `

` tags - always use `GoabText` with `tag="h1"` +- Let defaults handle all spacing + +### Container Spacing Rules +When GoabText is inside GoabContainer: +- **First element**: Consider `mt="none"` for edge alignment +- **Last element**: Consider `mb="none"` for edge alignment +- **Important**: Only override when visual alignment requires it + +## Development Workflow + +### Before Making Changes +1. **Always read files first** before editing to understand current structure +2. **Check for double spacing** caused by explicit margins + new defaults +3. **Test with defaults first** - only override when content relationships require it +4. **Understand page context** - different sections have different patterns + +### Development Commands +```bash +npm run dev # Start development server +npm run build # Build for production +npm run lint # Run ESLint +npm run prettier # Format code +npm run make:route # Create new route (script available) +``` + +### File Reading Requirements +- **Always read existing files** before making changes +- **Check imports and dependencies** to understand component usage +- **Verify spacing patterns** match established hierarchy +- **Look for `

` tags** that should be converted to `GoabText` with `tag="h1"` + +## Areas Requiring Special Care + +### Safe for Systematic Changes +- **Foundations section** (`src/routes/foundations/`) - Static content pages +- **Get Started section** (`src/routes/get-started/`) - Onboarding content +- **Design Tokens section** (`src/routes/design-tokens/`) - Token documentation +- **Home page** (`src/routes/home.tsx`) - Landing page content + +### Requires Manual Review (DO NOT APPLY SYSTEMATIC CHANGES) +- **Examples section** (`src/routes/examples/`, `src/examples/`) + - Dynamic template system + - GitHub integration + - 4-version code snippet requirements + - Shared components with specific layout needs +- **Components section** (`src/routes/components/`) + - Interactive sandboxes + - Property documentation tables + - Version-specific functionality + - Technical content with different hierarchy needs + +### Example Section Complexity +- **ExamplePageTemplate** dynamically imports examples based on URL slug +- **Individual examples** reused across multiple component documentation pages +- **Sandbox components** have specific spacing needs for interactive functionality +- **Version switching** affects code snippet display throughout examples +- **GitHub metadata** drives descriptions, tags, and status - don't edit manually + +## Common Tasks & Guidelines + +### Converting HTML Tags to GoabText +```tsx +// ❌ BEFORE: Raw HTML +

Page Title

+ +// ✅ AFTER: Semantic GoabText +Page Title +``` + +### Fixing Double Spacing Issues +```tsx +// ❌ BEFORE: Double spacing (explicit + defaults) +Title + +// ✅ AFTER: Trust defaults, override relationships +Title +Connected introduction +``` + +### Adding New Component Properties +1. **Define types** in `ui-components/libs/common/src/lib/common.ts` +2. **Add to React interface** in component file +3. **Update documentation** in component page: +```tsx +const componentProperties: ComponentProperty[] = [ + { + name: "newProp", + type: "NewPropType (value1 | value2)", + description: "Description of the new property.", + defaultValue: "value1", + }, + // ... existing props +]; +``` + +### Creating New Examples +Examples must support 4 versions and be reusable: +```tsx +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; + +export const NewExample = () => { + const {version} = useContext(LanguageVersionContext); + + return ( + + {/* Interactive demo */} + + + {/* 4 version-specific code snippets */} + {version === "old" && } + {version === "new" && } + {version === "old" && } + {version === "new" && } + + ); +}; +``` + +### Updating Foundation Pages +Most foundation pages need subtitle categorization: +```tsx +// Add appropriate subtitle +Content guidelines // or "Style guide" +Page Title +Introduction paragraph +``` + +### Working with Shared Components +- **CardLite**: Used for navigation cards throughout site +- **AccessibilityEmpty**: Common accessibility guidance (has specific spacing requirements) +- **ComponentContent**: Page wrapper with TOC support +- Changes to shared components affect multiple pages + +## Quality Assurance + +### Visual Hierarchy Checklist +- [ ] Page titles use `tag="h1"` with `size="heading-xl"` +- [ ] Introduction text uses `size="body-l"` with `mt="none"` when following titles +- [ ] Section headings follow proper hierarchy (h2, h3, etc.) +- [ ] Spacing creates clear content flow without excessive gaps +- [ ] Container boundaries align properly + +### Technical Checklist +- [ ] No raw `

` tags (use `GoabText` with `tag="h1"`) +- [ ] Proper subtitle patterns on Foundation and Get Started pages +- [ ] Container spacing rules applied correctly when needed +- [ ] Component imports are correct +- [ ] No double spacing from explicit margins + defaults + +### Content Relationship Checklist +- [ ] Connected content uses `mt="none"` appropriately +- [ ] Section breaks have adequate separation (defaults usually sufficient) +- [ ] Related content appears visually connected +- [ ] Unrelated content has clear separation + +### Version System Checklist (Examples/Components) +- [ ] 4 code versions supported (LTS/Latest × React/Angular) +- [ ] Proper version context usage (`version === "new"` vs `version === "old"`) +- [ ] Correct component prefixes (`GoA` vs `Goab`) +- [ ] Appropriate framework tags on code snippets +- [ ] Interactive demos work across all versions + +### Component Property Checklist +- [ ] Type definitions exist in `common.ts` +- [ ] React interface matches documentation +- [ ] Property arrays include all interface properties +- [ ] Shared properties reused from `common-properties.ts` +- [ ] Version differences properly documented +- [ ] Framework-specific properties handled correctly + +## Error Prevention + +### Common Mistakes to Avoid +1. **Don't add explicit margins** unless overriding defaults for content relationships +2. **Don't ignore semantic HTML** - always use `tag` prop for proper heading hierarchy +3. **Don't edit GitHub-sourced metadata** manually +4. **Don't apply systematic changes** to examples/components sections without understanding their complexity +5. **Don't batch update** spacing without testing visual results +6. **Don't assume examples are simple** - they support 4 versions and are reused across contexts + +### Validation Steps +1. **Read and understand existing file structure** before making changes +2. **Test with default spacing first** before adding overrides +3. **Override only for content relationships** that require tighter spacing +4. **Verify semantic heading hierarchy** is maintained +5. **Check spacing on both desktop and mobile** if possible +6. **Ensure changes align with design system principles** + +### When to Stop and Ask +- **Examples section changes** beyond simple content updates +- **Component property changes** that affect TypeScript interfaces +- **New component creation** or major architectural changes +- **Version system modifications** +- **Uncertain about spacing patterns** for specific page types + +## Migration from Legacy Patterns + +### Identifying Legacy Issues +Look for these patterns that may now create excessive spacing: +```tsx +// LEGACY: May create double spacing +Title + +// CURRENT: Trust defaults, override relationships +Title +Connected content +``` + +### Systematic Review Priorities +1. **Page titles and introductions** - Most likely to have excessive spacing +2. **Foundation pages** - Need subtitle categorization and spacing cleanup +3. **Design token pages** - Convert `

` tags to `GoabText` +4. **Container boundaries** - Check for proper edge alignment +5. **Content hierarchies** - Verify proper flow relationships + +## Support & Resources + +### Key Reference Files +- **Current instructions**: `/CLAUDE.md` - Historical context and spacing evolution +- **GoabText implementation**: `ui-components/libs/web-components/src/components/text/Text.svelte` +- **Common properties**: `src/components/component-properties/common-properties.ts` +- **Version constants**: `src/components/version-language-switcher/version-language-constants.ts` + +### Testing Your Changes +1. **Start development server**: `npm run dev` +2. **Navigate to affected pages** and verify spacing +3. **Test version switching** if working with examples/components +4. **Check both desktop and mobile** views when possible +5. **Compare with similar pages** for consistency +6. **Verify semantic HTML** in browser dev tools + +### Getting Help +- **Review existing similar pages** for established patterns +- **Check design system component documentation** for proper usage +- **Test changes in development environment** before assuming they're correct +- **Refer to this document** for spacing standards and architectural understanding + +--- + +**Remember**: This website is a sophisticated, multi-version, GitHub-integrated documentation platform. The GoabText defaults provide excellent starting points - your job is to override intelligently for content relationships and maintain the semantic HTML structure that makes the site accessible and SEO-friendly. Always prioritize user experience and design system principles in your updates. \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 000000000..b43bc7116 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,177 @@ +# GoA Design System Website - Development Notes + +This document captures development workflow, historical context, and lessons learned while working on the GoA Design System website. For comprehensive AI guidance, see [AI_INSTRUCTIONS.md](./AI_INSTRUCTIONS.md). + +## Website Structure + +### Main Sections +- **Home**: Landing page with key resources and navigation +- **Get Started**: Onboarding for designers, developers, QA testers +- **Foundations**: Design principles, accessibility, branding, content guidelines +- **Examples**: Common patterns and implementations (requires manual review for changes) +- **Components**: Interactive component documentation (requires manual review for changes) +- **Design Tokens**: Color, spacing, typography tokens + +### Key Architecture Patterns +- Built with React + Vite +- Uses `@abgov/react-components` v6.6.1 and `@abgov/web-components` v1.36.1 +- React Router for navigation with nested routes +- ComponentContent wrapper for consistent page structure + +## GoabText Spacing System Evolution + +### Historical Timeline +1. **Original System**: GoabText had some default margins +2. **v6 Migration Period**: Temporarily changed to `mt="none"` and `mb="none"` defaults, requiring explicit margins +3. **Current System**: GoabText now has intelligent **size-based default margins** that provide good starting values + +### Current Philosophy (2024+) +- **Defaults-first approach**: GoabText has built-in margins based on text size +- **Override when needed**: Use `mt="none"` or `mb="none"` to connect related content +- **Semantic HTML required**: Always use `tag` prop for proper heading hierarchy + +### Design System v4/v6 Changes +- Component prefixes changed: `GoA` → `Goab` (React), `goa-` → `goab-` (Angular) +- Margin properties changed from `string` type to `Spacing` type +- Evolution from explicit margins to intelligent defaults + +## Current Spacing Approach + +### Quick Reference Patterns +```tsx +// Standard page pattern - trust defaults, override relationships +Page Title +Introduction text + +// Pages with category labels +Content guidelines +Page Title +Introduction text + +// Always use semantic tags for accessibility +Section Heading +``` + +### Key Principles +- **Trust the defaults** - GoabText provides good spacing automatically +- **Override for relationships** - Use `mt="none"` to connect related content +- **Semantic HTML always** - Use `tag="h1"`, `tag="h2"`, etc. for accessibility +- **Container boundaries** - Consider edge alignment with `mt="none"` or `mb="none"` + +## Component Usage Insights + +### GoabText Sizing Hierarchy +- `heading-xl`: Main page titles +- `body-l`: Page introductions and important paragraphs +- `heading-m`: Section headings +- `body-m`: Regular content + +### Common Components +- `ComponentContent`: Wrapper with table of contents support +- `GoabDivider`: Section separators with consistent margins +- `CardLite`: Reusable cards for navigation (Foundations, Examples, Components, Design tokens) +- `AccessibilityEmpty`: Common accessibility guidance component used on component pages + - Located at: `src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx` + - Contains two GoabText elements with specific spacing requirements + +## File Organization + +### Route Structure +``` +src/routes/ +├── home.tsx +├── get-started/ +│ ├── GetStartedLayout.tsx +│ ├── GetStartedOverview.tsx +│ ├── designers/ +│ ├── developers/ +│ └── [other pages] +├── foundations/ +├── examples/ (excluded from systematic changes) +├── components/ (excluded from systematic changes) +└── design-tokens/ +``` + +### Key Files Modified +- Home page: Fixed "Start by using the design system" spacing +- CardLite component: Consistent card heading patterns +- All Get Started pages: Subtitle/title/introduction spacing +- Foundation pages: Introduction text consistency + added subtitles +- Design token pages: Replaced h1 tags with GoabText for consistent spacing +- AccessibilityEmpty component: Adjusted margins for tighter text spacing + +## Development Best Practices + +### Human Developer Workflow +1. **Start development server**: `npm run dev` +2. **Read files first** before making changes to understand structure +3. **Test spacing visually** - the defaults should look good, override only for content relationships +4. **Check semantic HTML** in browser dev tools to verify heading hierarchy +5. **Test responsive behavior** when possible + +### Common Migration Tasks +- **Convert `

` tags**: Replace with `` +- **Remove excessive explicit margins**: Trust defaults, add `mt="none"` for content relationships +- **Add semantic tags**: Ensure proper `tag="h1"`, `tag="h2"` hierarchy +- **Foundation page categorization**: Add "Content guidelines" or "Style guide" subtitles + +### Legacy Pattern Cleanup +Look for these outdated patterns: +```tsx +// ❌ OLD: Explicit margins that now create double spacing +Title + +// ✅ NEW: Trust defaults, override relationships +Title +Connected content +``` + +### Areas Requiring Manual Review +- **Components section**: Interactive sandboxes and version switching +- **Examples section**: 4-version support and GitHub integration + +## Key Learnings from Past Migrations + +1. **Spacing System Evolution**: The progression from explicit margins → no defaults → intelligent defaults taught us the importance of design system consistency +2. **Manual Review Essential**: Automated changes can miss important context about content relationships +3. **Component Interconnections**: Changes to shared components (CardLite, AccessibilityEmpty) affect multiple pages +4. **Version Complexity**: The 4-version system (LTS/Latest × React/Angular) adds significant complexity to examples and components +5. **GitHub Integration**: Dynamic content sourcing means some information should never be manually edited + +## Historical Context + +### Major Migration Periods +- **v4 → v6**: Component prefix changes (`GoA` → `Goab`), margin type system updates +- **Spacing System Updates**: Multiple iterations to find the right balance between automatic spacing and manual control +- **Version System Implementation**: Addition of LTS/Latest support with framework switching +- **GitHub Integration**: Move to dynamic metadata sourcing for examples and components + +### Lessons for Future Changes +- **Test across all page types** before rolling out systematic changes +- **Understand content relationships** before adjusting spacing +- **Preserve semantic HTML** structure for accessibility +- **Document architectural decisions** to prevent future confusion + +## Quick Reference for Developers + +### Development Commands +```bash +npm run dev # Start development server +npm run build # Build for production +npm run lint # Run ESLint +npm run prettier # Format code +``` + +### Safe Areas for Changes +- Foundations section (static content) +- Get Started section (static content) +- Design Tokens section (static content) +- Home page content + +### Areas Requiring Extra Care +- Examples section (dynamic templates, GitHub integration) +- Components section (interactive sandboxes, property tables) + +--- + +**For comprehensive guidance on making changes, see [AI_INSTRUCTIONS.md](./AI_INSTRUCTIONS.md)** \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6586cdaa1..f4f5aa7d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,9 @@ "name": "code-sandbox", "version": "0.0.0", "dependencies": { - "@abgov/react-components": "6.7.0", + "@abgov/react-components": "6.7.1-alpha.1", "@abgov/ui-components-common": "1.7.0", - "@abgov/web-components": "1.37.0", + "@abgov/web-components": "1.37.1-alpha.2", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", @@ -68,9 +68,9 @@ } }, "node_modules/@abgov/react-components": { - "version": "6.7.0", - "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.7.0.tgz", - "integrity": "sha512-/d1pZqnw9PRApQIj6RGeens9pq2XYJVx3b9cwBy5IVKvs9eLyjBsXGsXRJK2Vnl8wjp+CUKIyzFvweYoT0atFQ==", + "version": "6.7.1-alpha.1", + "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.7.1-alpha.1.tgz", + "integrity": "sha512-s5+tGLY2DOeMV3BjiIz0c71hESIF/kcWA3PrFxvPCoCuPWiilLL0ktmd9sCRPp5qhcbWtW6M8vuLatwIiD28qQ==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", @@ -83,9 +83,9 @@ "integrity": "sha512-dnqLxTJdBxNZFKPDyckaHHrkipjFIwXyU63rlEkcHgKhn4d+KrwlbMuxtsS73FvH4bozyQm2OM+sPu32wyWgNA==" }, "node_modules/@abgov/web-components": { - "version": "1.37.0", - "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.37.0.tgz", - "integrity": "sha512-GjKoy1G3JlHBc6a4fxS5luYmxCchAXmIrBYecnkq6q3IhdkY1r1McDO8/AB0P2E0gcT1IlOtpGcKKdjDHuxCEw==", + "version": "1.37.1-alpha.2", + "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.37.1-alpha.2.tgz", + "integrity": "sha512-WoQZAwccxRPQHWHBS/7gDISCFbEnWrsRZvS8U9iK0N3jr00YTtlvxdwEDywZAcgrXitxa8qlIVbpylZVLzDdmQ==", "peerDependencies": { "@sveltejs/vite-plugin-svelte": "3.x", "glob": "10.x", diff --git a/package.json b/package.json index 9dad8b44f..1660d33b7 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ "prettier": "npx prettier . --write" }, "dependencies": { - "@abgov/react-components": "6.7.0", + "@abgov/react-components": "6.7.1-alpha.1", "@abgov/ui-components-common": "1.7.0", - "@abgov/web-components": "1.37.0", + "@abgov/web-components": "1.37.1-alpha.2", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", diff --git a/public/images/example-thumbnails/communicate-a-future-service-outage.png b/public/images/example-thumbnails/communicate-a-future-service-outage.png new file mode 100644 index 000000000..77d2ef927 Binary files /dev/null and b/public/images/example-thumbnails/communicate-a-future-service-outage.png differ diff --git a/public/images/example-thumbnails/filter-data-in-a-table.png b/public/images/example-thumbnails/filter-data-in-a-table.png new file mode 100644 index 000000000..9e24c6743 Binary files /dev/null and b/public/images/example-thumbnails/filter-data-in-a-table.png differ diff --git a/public/images/example-thumbnails/reveal-input-based-on-a-selection.png b/public/images/example-thumbnails/reveal-input-based-on-a-selection.png new file mode 100644 index 000000000..e868f267e Binary files /dev/null and b/public/images/example-thumbnails/reveal-input-based-on-a-selection.png differ diff --git a/public/images/example-thumbnails/show-a-user-progress.png b/public/images/example-thumbnails/show-a-user-progress.png index 58aa23b17..3c7acb69d 100644 Binary files a/public/images/example-thumbnails/show-a-user-progress.png and b/public/images/example-thumbnails/show-a-user-progress.png differ diff --git a/public/images/example-thumbnails/reveal-more-information-to-help-answer-a-question.png b/public/images/example-thumbnails/show-more-information-to-help-answer-a-question.png similarity index 100% rename from public/images/example-thumbnails/reveal-more-information-to-help-answer-a-question.png rename to public/images/example-thumbnails/show-more-information-to-help-answer-a-question.png diff --git a/src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx b/src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx index 73d3af5a0..d3b2061c9 100644 --- a/src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx +++ b/src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx @@ -13,7 +13,7 @@ export function AccessibilityEmpty(props: Props) { component page in Figma. {" "} - + More accessibility guidance for design and development is coming soon. diff --git a/src/components/sandbox/Sandbox.tsx b/src/components/sandbox/Sandbox.tsx index afe38e897..f7a89edda 100644 --- a/src/components/sandbox/Sandbox.tsx +++ b/src/components/sandbox/Sandbox.tsx @@ -134,7 +134,7 @@ export const Sandbox = (props: SandboxProps) => { properties={props.formItemProperties} /> )} - +
{version === "old" ? ( <> - Support for the Long Term Support (LTS) version of the Design system will be available until September - 2025.{" "} + Long-term support (LTS) for v3 (Angular) and v5 (React) has ended. Read the{" "} - View the upgrade guide + upgrade guide ) : ( diff --git a/src/examples/ask-a-user-for-a-birthday.tsx b/src/examples/ask-a-user-for-a-birthday.tsx deleted file mode 100644 index cd47bcec0..000000000 --- a/src/examples/ask-a-user-for-a-birthday.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import { Sandbox } from "@components/sandbox"; -import { GoabBlock, GoabDropdown, GoabDropdownItem, GoabFormItem, GoabInput } from "@abgov/react-components"; -import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; -import { useContext } from "react"; -import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; - - -export const AskAUserForABirthday = () => { - const {version} = useContext(LanguageVersionContext); - - const noop = () => {} - return ( - - {/*React code*/} - {version === "new" && (''); - const [month, setMonth] = useState(''); - const [year, setYear] = useState(''); - `} - />} - - {version === "new" && - - - setMonth(event.value)} name="month" value={month}> - - - - - - - - - - - - - - - - - setDay(event.value)} value={day} name="day" width="2ch"> - - - setYear(event.value)} value={year} name="year" width="4ch"> - - - - `} - />} - - {/*Angular code*/} - {version === "new" && } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default AskAUserForABirthday; diff --git a/src/examples/ask-a-user-for-bank-details.tsx b/src/examples/ask-a-user-for-bank-details.tsx new file mode 100644 index 000000000..59719ffbc --- /dev/null +++ b/src/examples/ask-a-user-for-bank-details.tsx @@ -0,0 +1,197 @@ +import { Sandbox } from "@components/sandbox"; +import { GoabBlock, GoabFormItem, GoabInput } from "@abgov/react-components"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; + +export const AskAUserForBankDetails = () => { + const {version} = useContext(LanguageVersionContext); + const noop = () => {} + + return ( + + {/*React code*/} + + {version === "old" && (''); + const [account, setAccount] = useState(''); + const [bank, setBank] = useState(''); + function onChangeName(event: GoabInputOnChangeDetail) { + setName(event.value); + } + function onChangeAccount(event: GoabInputOnChangeDetail) { + setAccount(event.value); + } + function onChangeBank(event: GoabInputOnChangeDetail) { + setBank(event.value); + } + `} + />} + + {version === "old" && + + + + + + + + + + + + + `} + />} + + {version === "new" && (''); + const [account, setAccount] = useState(''); + const [bank, setBank] = useState(''); + function onChangeName(event: GoabInputOnChangeDetail) { + setName(event.value); + } + function onChangeAccount(event: GoabInputOnChangeDetail) { + setAccount(event.value); + } + function onChangeBank(event: GoabInputOnChangeDetail) { + setBank(event.value); + } + `} + />} + {version === "new" && + + + + + + + + + + + + + `} + />} + + {/*Angular code*/} + + {version === "old" && } + + {version === "new" && } + + + + + + + + + + + + + + + + + ) +} + +export default AskAUserForBankDetails; diff --git a/src/examples/ask-a-user-for-direct-deposit-information.tsx b/src/examples/ask-a-user-for-direct-deposit-information.tsx index 0faf09f91..f10e0701f 100644 --- a/src/examples/ask-a-user-for-direct-deposit-information.tsx +++ b/src/examples/ask-a-user-for-direct-deposit-information.tsx @@ -139,7 +139,7 @@ export const AskAUserForDirectDepositInformation = () => { - +

Below is an example of where you can find the required bank information on a personal cheque. diff --git a/src/examples/basic-question-page-with-a-dropdown.tsx b/src/examples/basic-question-page-with-a-dropdown.tsx new file mode 100644 index 000000000..b68f6894a --- /dev/null +++ b/src/examples/basic-question-page-with-a-dropdown.tsx @@ -0,0 +1,178 @@ +import { Sandbox } from "@components/sandbox"; +import "./question-page/question-page-examples.css"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { + GoabButton, + GoabFormItem, + GoabDropdown, + GoabDropdownItem, + GoabLink +} from "@abgov/react-components"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { useContext } from "react"; + +export default function BasicPageWithDropdown() { + const { version } = useContext(LanguageVersionContext); + return ( +

+ + + {/*Angular Code Snippet - need for leadingContent slot*/} + + {version === "old" && + Back + + + + {}} name="province-territory" ariaLabelledBy="provinceLabel"> + + + + + + + + + + + + + + + + + Continue + + `} + />} + + {version === "new" && + Back + + + + {}} name="province-territory" ariaLabelledBy="provinceLabel"> + + + + + + + + + + + + + + + + + Continue + + `} + />} + + {/*React Code Snippet - need for leadingContent slot*/} + {version === "old" && + Back + + + + {}} name="province-territory" ariaLabelledBy="provinceLabel"> + + + + + + + + + + + + + + + + + Continue + + `} + />} + + {version === "new" && + Back + + + + {}} name="province-territory" ariaLabelledBy="provinceLabel"> + + + + + + + + + + + + + + + + + Continue + + `} + />} + + + Back + + + + {}} name="province-territory" ariaLabelledBy="provinceLabel"> + + + + + + + + + + + + + + + + + Continue + + +
+ ); +} diff --git a/src/examples/button-group/ButtonGroupExamples.tsx b/src/examples/button-group/ButtonGroupExamples.tsx new file mode 100644 index 000000000..0c2e6d905 --- /dev/null +++ b/src/examples/button-group/ButtonGroupExamples.tsx @@ -0,0 +1,28 @@ +import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; +import MultipleActionsinATable from "@examples/multiple-actions-in-a-table.tsx"; +import RemoveAFilter from "@examples/require-user-action-before-continuing.tsx"; +import CompactButtonGroup from "@examples/compact-button-group.tsx"; + +export const ButtonGroupExamples = () => { + + return <> + {/*Button Group Example 1*/} + + + + + {/*Button Group example 2*/} + + + + + {/*Button Group example 3*/} + + + + + ; +}; diff --git a/src/examples/button/ButtonExamples.tsx b/src/examples/button/ButtonExamples.tsx index 484468bc7..7b94722e0 100644 --- a/src/examples/button/ButtonExamples.tsx +++ b/src/examples/button/ButtonExamples.tsx @@ -1,6 +1,7 @@ import { AskAUserForAnAddress } from "@examples/ask-a-user-for-an-address.tsx"; import { ConfirmADestructiveAction } from "@examples/confirm-a-destructive-action.tsx"; import { DisabledButtonWithARequiredField } from "@examples/disabled-button-with-a-required-field.tsx"; +import { CompactButtonsInATable } from "@examples/compact-buttons-in-a-table.tsx"; import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; export const ButtonExamples = () => { @@ -20,11 +21,18 @@ export const ButtonExamples = () => { - {/*Button example */} + {/*Button example 3*/} + + {/*Button example 4*/} + + + ; }; diff --git a/src/examples/choose-one-option-from-a-list.tsx b/src/examples/choose-one-option-from-a-list.tsx new file mode 100644 index 000000000..04b21143b --- /dev/null +++ b/src/examples/choose-one-option-from-a-list.tsx @@ -0,0 +1,120 @@ +import { GoabDropdown, GoabDropdownItem, GoabFormItem } from "@abgov/react-components"; +import { useContext } from "react"; +import { Sandbox } from "@components/sandbox"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; + +export const ChooseOneOptionFromList = () => { + const {version} = useContext(LanguageVersionContext); + const noop = () => {} + return ( + + + + {version === "old" && } + + {version === "old" && + + + + + + + `} + />} + + {version === "new" && + + + + + + + `} + />} + + {version === "old" && } + + {version === "old" && + + + + + + + `} + />} + + {version === "new" && } + + {version === "new" && + + + + + + + `} + />} + + + + + + + + + + ); +} + +export default ChooseOneOptionFromList; diff --git a/src/examples/compact-button-group.tsx b/src/examples/compact-button-group.tsx new file mode 100644 index 000000000..166e2f971 --- /dev/null +++ b/src/examples/compact-button-group.tsx @@ -0,0 +1,172 @@ +import { useContext } from "react"; +import { Sandbox } from "@components/sandbox"; +import { GoabButtonGroup, GoabButton } from "@abgov/react-components"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; + +function onClick() { + console.log('clicked'); +} + +export const CompactButtonGroup = () => { + const { version } = useContext(LanguageVersionContext); + + return ( + + + {version === "old" && ( + + )} + + {version === "old" && ( + + + Button + + + Button + + + Button + + + `} + /> + )} + + {version === "new" && ( + + )} + + {version === "new" && ( + + + Button + + + Button + + + Button + + + `} + /> + )} + + {version === "old" && ( + + )} + + {version === "old" && ( + + + Button + + + Button + + + Button + + + `} + /> + )} + + {version === "new" && ( + + )} + + {version === "new" && ( + + + Button + + + Button + + + Button + + + `} + /> + )} + + + + Button + + + Button + + + Button + + + + ) +} + +export default CompactButtonGroup; diff --git a/src/examples/compact-buttons-in-a-table.tsx b/src/examples/compact-buttons-in-a-table.tsx new file mode 100644 index 000000000..606f73411 --- /dev/null +++ b/src/examples/compact-buttons-in-a-table.tsx @@ -0,0 +1,466 @@ +import { Sandbox } from "@components/sandbox"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { + GoabButton, + GoabButtonGroup, + GoabPagination, + GoabTable +} from "@abgov/react-components"; +import { useContext, useEffect, useState } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { faker } from "@faker-js/faker"; + +interface User { + id: string; + firstName: string; + lastName: string; +} +export const CompactButtonsInATable = () => { + const { version } = useContext(LanguageVersionContext); + const [users, setUsers] = useState([]); + const [pageUsers, setPageUsers] = useState([]); + const [page, setPage] = useState(1); + const [perPage] = useState(10); + const noop = () => {}; + + useEffect(() => { + const _users = []; + for (let i = 1; i <= 100; i++) { + _users.push({ + id: faker.string.uuid(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName() + }); + } + setUsers(_users); + setPageUsers(_users.slice(0, perPage)); + }, [perPage]); + + function changePage(newPage: number) { + const offset = (newPage - 1) * perPage; + const _users = users.slice(offset, offset + perPage); + setPage(newPage); + setPageUsers(_users); + } + + return ( + <> + + + {/*============= React code ==============*/} + {version === "old" && ( + ([]); + const [pageUsers, setPageUsers] = useState([]); + const [page, setPage] = useState(1); + const [perPage] = useState(10); + + useEffect(() => { + const _users = []; + for (let i = 1; i <= 100; i++) { + _users.push({ + id: faker.datatype.uuid(), + firstName: faker.name.firstName(), + lastName: faker.name.lastName() + }); + } + setUsers(_users); + setPageUsers(_users.slice(0, perPage)); + }, [perPage]); + + function changePage(newPage: number) { + const offset = (newPage - 1) * 10; + const _users = users.slice(offset, offset + perPage); + setPage(newPage); + setPageUsers(_users); + } + `} + /> + )} + + {version === "new" && ( + ([]); + const [pageUsers, setPageUsers] = useState([]); + const [page, setPage] = useState(1); + const [perPage] = useState(10); + + useEffect(() => { + const _users = []; + for (let i = 1; i <= 100; i++) { + _users.push({ + id: faker.string.uuid(), + firstName: faker.person.firstName(), + lastName: faker.person.lastName() + }); + } + setUsers(_users); + setPageUsers(_users.slice(0, perPage)); + }, [perPage]); + + function changePage(newPage: number) { + const offset = (newPage - 1) * 10; + const _users = users.slice(offset, offset + perPage); + setPage(newPage); + setPageUsers(_users); + } + + `} + /> + )} + + {version === "old" && ( + + + + First name + Last name + Number + + + + + {pageUsers.map(u => ( + + {u.firstName} + {u.lastName} + 12345667 + + + + View + + + + + ))} + + + + changePage(event.page)} + /> + `} + /> + )} + + {version === "new" && ( + + + + First name + Last name + Number + + + + + {pageUsers.map(u => ( + + {u.firstName} + {u.lastName} + 12345667 + + + + View + + + + + ))} + + + + changePage(event.page)} + /> + `} + /> + )} + + {/*================ Angular code ==================*/} + {version === "old" && ( + + )} + + {version === "new" && ( + + )} + + {version === "old" && ( + + + + First name + Last name + Number + + + + + + {{ user.firstName }} + {{ user.lastName }} + 12345667 + + + + View + + + + + + + + + `} + /> + )} + + {version === "new" && ( + + + + First name + Last name + Number + + + + + + {{ user.firstName }} + {{ user.lastName }} + 12345667 + + + + View + + + + + + + + + `} + /> + )} + + + + + First name + Last name + Number + + + + + {pageUsers.map(u => ( + + {u.firstName} + {u.lastName} + 12345667 + + + + View + + + + + ))} + + + + changePage(event.page)} + /> + + + ); +} + +export default CompactButtonsInATable; \ No newline at end of file diff --git a/src/examples/date-of-birth.tsx b/src/examples/date-of-birth.tsx new file mode 100644 index 000000000..0a683df2f --- /dev/null +++ b/src/examples/date-of-birth.tsx @@ -0,0 +1,39 @@ +import { Sandbox } from "@components/sandbox"; +import { GoabFormItem, GoabDatePicker } from "@abgov/react-components"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; + +export const DateOfBirth = () => { + return ( + + + + + + + + + `} + /> + + + + + `} + /> + + ) +} + +export default DateOfBirth; \ No newline at end of file diff --git a/src/examples/date-picker/DatePickerExamples.tsx b/src/examples/date-picker/DatePickerExamples.tsx index 3829fdfbe..c6ac76f32 100644 --- a/src/examples/date-picker/DatePickerExamples.tsx +++ b/src/examples/date-picker/DatePickerExamples.tsx @@ -1,8 +1,13 @@ import { TodayDatePickerField } from "@examples/choose-a-date.tsx"; import { ResetDatePickerField } from "@examples/reset-date-picker-field.tsx"; +import { DateOfBirth } from "@examples/date-of-birth.tsx"; import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { useContext } from "react"; export const DatePickerExamples = () => { + const { version } = useContext(LanguageVersionContext); + return ( <> { figmaExample=""> + + {version === "new" && ( + <> + + + < DateOfBirth /> + + )} ) } diff --git a/src/examples/details/DetailsExamples.tsx b/src/examples/details/DetailsExamples.tsx index ed1a125dd..e8e270c43 100644 --- a/src/examples/details/DetailsExamples.tsx +++ b/src/examples/details/DetailsExamples.tsx @@ -5,8 +5,8 @@ import { AskAUserForDirectDepositInformation } from "@examples/ask-a-user-for-direct-deposit-information.tsx"; import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; -import RevealMoreInformationToHelpAnswerAQuestion - from "@examples/reveal-more-information-to-help-answer-a-question.tsx"; +import ShowMoreInformationToHelpAnswerAQuestion + from "@examples/show-more-information-to-help-answer-a-question.tsx"; export const DetailsExamples = () => { return ( @@ -15,7 +15,7 @@ export const DetailsExamples = () => { exampleTitle="Show more information to help answer a question" figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=6307-197360&t=X0IQW5flDDaj8Vyg-4"> - + { return ( <> + + + + + + + + @@ -18,6 +34,14 @@ export const DropdownExamples = () => { figmaExample=""> + + + + + + ); } diff --git a/src/examples/enter-a-phone-number.tsx b/src/examples/enter-a-phone-number.tsx new file mode 100644 index 000000000..b5216d7fe --- /dev/null +++ b/src/examples/enter-a-phone-number.tsx @@ -0,0 +1,113 @@ +import { GoabFormItem, GoabInput } from "@abgov/react-components"; +import { Sandbox } from "@components/sandbox"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; + +export const EnterAPhoneNumber = () => { + const {version} = useContext(LanguageVersionContext); + const noop = () => {} + return ( + + + {/*Angular code*/} + + {version === "old" && ( + + )} + + {version === "new" && ( + + )} + + {/*React code*/} + + {version === "old" && ( + (""); + function onChangePhoneNumber(event: GoabInputOnChangeDetail) { + setPhoneNumber(event.value); + } + `} + /> + )} + + {version === "old" && ( + + + + `} + /> + )} + + {version === "new" && ( + (""); + function onChangePhoneNumber(event: GoabInputOnChangeDetail) { + setPhoneNumber(event.value); + } + `} + /> + )} + + {version === "new" && ( + + + + `} + /> + )} + +
+ + + +
+ + ); +} + +export default EnterAPhoneNumber; diff --git a/src/examples/filter-through-long-list-to-choose-an-option.tsx b/src/examples/filter-through-long-list-to-choose-an-option.tsx new file mode 100644 index 000000000..b6800e4a3 --- /dev/null +++ b/src/examples/filter-through-long-list-to-choose-an-option.tsx @@ -0,0 +1,150 @@ +import { GoabDropdown, GoabDropdownItem, GoabFormItem } from "@abgov/react-components"; +import { useContext } from "react"; +import { Sandbox } from "@components/sandbox"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; + +export const FilterItemsInADropdownList = () => { + const {version} = useContext(LanguageVersionContext); + + return ( + + + + {version === "old" && } + + {version === "old" && + + + + + + + + + + + + + `} + />} + + {version === "new" && + + + + + + + + + + + + + `} + />} + + {version === "old" && } + + {version === "old" && + + + + + + + + + + + + + `} + />} + + {version === "new" && } + + {version === "new" && + + + + + + + + + + + + + `} + />} + + + + + + + + + + + + + + + + ); +} + +export default FilterItemsInADropdownList; diff --git a/src/examples/link-the-user-to-give-feedback-to-the-service.tsx b/src/examples/link-the-user-to-give-feedback-to-the-service.tsx index 5684c2e74..cf4682fdf 100644 --- a/src/examples/link-the-user-to-give-feedback-to-the-service.tsx +++ b/src/examples/link-the-user-to-give-feedback-to-the-service.tsx @@ -1,15 +1,137 @@ import { GoabMicrositeHeader } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; export default function GiveFeedbackLinkExample() { + const {version} = useContext(LanguageVersionContext); const onClick = () => { console.log("Feedback clicked"); alert("Thank you for your feedback!"); }; + return ( <> - + + + {/*Angular code*/} + {version === "old" && } + + {/*Angular code*/} + {version === "old" && + `} + />} + + {/*Angular code*/} + {version === "new" && } + + {/*Angular code*/} + {version === "new" && + `} + />} + + {/*React code*/} + {version === "old" && { + console.log("Feedback clicked"); + alert("Thank you for your feedback!"); + }; + `} + />} + + {/*React code*/} + {version === "old" && + `} + />} + + {/*React code*/} + {version === "new" && { + console.log("Feedback clicked"); + alert("Thank you for your feedback!"); + }; + `} + />} + + {/*React code*/} + {version === "new" && + `} + />} + {/* ...React + Angular code snippets here (same as original)... */} diff --git a/src/examples/multiple-actions-in-a-table.tsx b/src/examples/multiple-actions-in-a-table.tsx new file mode 100644 index 000000000..161deea0b --- /dev/null +++ b/src/examples/multiple-actions-in-a-table.tsx @@ -0,0 +1,1193 @@ +import { + GoabBadge, + GoabBlock, + GoabButton, + GoabButtonGroup, + GoabDropdown, + GoabDropdownItem, + GoabPagination, + GoabTable, + GoabSpacer, +} from "@abgov/react-components"; +import { Sandbox } from "@components/sandbox"; +import { GoabBadgeType } from "@abgov/ui-components-common"; +import { useContext, useEffect, useState } from "react"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { GoabDropdownOnChangeDetail } from "@abgov/ui-components-common"; + +interface User { + badgeType: string; + status: string; + name: string; + text: string; + number: number; +} + +export default function MultipleActionsinATable() { + const { version } = useContext(LanguageVersionContext); + const [users, setUsers] = useState([]); + const [pageUsers, setPageUsers] = useState([]); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(5); + + useEffect(() => { + const _users: User[] = [ + { + badgeType: "success", + status: "Approved", + name:"1", + text: "Ralph Edwards", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"2", + text: "Devon Lane", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"3", + text: "Marvin McKinney", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"4", + text: "Albert Flores", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"5", + text: "Ronald Richards", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"6", + text: "Diane Russell", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"7", + text: "Raoul Emmerich", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"8", + text: "Delilah Farrell", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"9", + text: "Brock Sipes", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"10", + text: "Aylin Hansen", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"11", + text: "Eldora Waters", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"12", + text: "Guillermo Kohler", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"13", + text: "Ryley Medhurst", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"14", + text: "Craig Russel", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"15", + text: "Scot Hayes", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"16", + text: "Albert Flores", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"17", + text: "Amiya Langosh", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"18", + text: "Demetrius Cormier", + number: 1234567890, + }, + ]; + setUsers(_users); + setPageUsers(_users.slice(0, perPage)); + }, [perPage]); + + function changePage(newPage: number) { + const offset = (newPage - 1) * (perPage); + const _users = users.slice(offset, offset + perPage); + setPage(newPage); + setPageUsers(_users); + } + + function handlePerPageCountChangeEvent(event: GoabDropdownOnChangeDetail) { + const perPageValue = parseInt(event.value || '1'); + setPage(1); + setPerPage(perPageValue); + const _users = users.slice(0, perPageValue); + setPageUsers(_users); + } + + return ( + <> + + + {version === "old" && ( + ([]); + const [pageUsers, setPageUsers] = useState([]); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(5); + + useEffect(() => { + const _users: User[] = [ + { + badgeType: "success", + status: "Approved", + name:"1", + text: "Ralph Edwards", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"2", + text: "Devon Lane", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"3", + text: "Marvin McKinney", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"4", + text: "Albert Flores", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"5", + text: "Ronald Richards", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"6", + text: "Diane Russell", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"7", + text: "Raoul Emmerich", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"8", + text: "Delilah Farrell", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"9", + text: "Brock Sipes", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"10", + text: "Aylin Hansen", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"11", + text: "Eldora Waters", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"12", + text: "Guillermo Kohler", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"13", + text: "Ryley Medhurst", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"14", + text: "Craig Russel", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"15", + text: "Scot Hayes", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"16", + text: "Albert Flores", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"17", + text: "Amiya Langosh", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"18", + text: "Demetrius Cormier", + number: 1234567890, + }, + ]; + setUsers(_users); + setPageUsers(_users.slice(0, perPage)); + }, [perPage]); + + function changePage(newPage: number) { + const offset = (newPage - 1) * (perPage); + const _users = users.slice(offset, offset + perPage); + setPage(newPage); + setPageUsers(_users); + } + + function handlePerPageCountChangeEvent(name: string, value: string | string[]) { + const perPageValue = Array.isArray(value) ? parseInt(value[0]) : parseInt(value); + setPage(1); + setPerPage(perPageValue); + const _users = users.slice(0, perPageValue); + setPageUsers(_users); + } + `} + /> + )} + + {version === "old" && ( + + + + Status + Name + File number + + + + + {pageUsers.map(user => ( + + + {user.text} + {user.number} + + + + Edit + + + Test + + + View + + + + + ))} + + + + + + Show + + + + + + of {users.length} + + + + changePage(event.page)} + variant="links-only" + /> + + `} + /> + )} + + {version === "new" && ( + ([]); + const [pageUsers, setPageUsers] = useState([]); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(5); + + useEffect(() => { + const _users: User[] = [ + { + badgeType: "success", + status: "Approved", + name:"1", + text: "Ralph Edwards", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"2", + text: "Devon Lane", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"3", + text: "Marvin McKinney", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"4", + text: "Albert Flores", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"5", + text: "Ronald Richards", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"6", + text: "Diane Russell", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"7", + text: "Raoul Emmerich", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"8", + text: "Delilah Farrell", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"9", + text: "Brock Sipes", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"10", + text: "Aylin Hansen", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"11", + text: "Eldora Waters", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"12", + text: "Guillermo Kohler", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"13", + text: "Ryley Medhurst", + number: 1234567890, + }, + { + badgeType: "emergency", + status: "Denied", + name:"14", + text: "Craig Russel", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"15", + text: "Scot Hayes", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"16", + text: "Albert Flores", + number: 1234567890, + }, + { + badgeType: "success", + status: "Approved", + name:"17", + text: "Amiya Langosh", + number: 1234567890, + }, + { + badgeType: "midtone", + status: "In progress", + name:"18", + text: "Demetrius Cormier", + number: 1234567890, + }, + ]; + setUsers(_users); + setPageUsers(_users.slice(0, perPage)); + }, [perPage]); + + function changePage(newPage: number) { + const offset = (newPage - 1) * (perPage); + const _users = users.slice(offset, offset + perPage); + setPage(newPage); + setPageUsers(_users); + } + + function handlePerPageCountChangeEvent(event: GoabDropdownOnChangeDetail) { + const perPageValue = parseInt(event.value || '1'); + setPage(1); + setPerPage(perPageValue); + const _users = users.slice(0, perPageValue); + setPageUsers(_users); + } + `} + /> + )} + + {version === "new" && ( + + + + Status + Name + File number + + + + + {pageUsers.map(user => ( + + + {user.text} + {user.number} + + + + Edit + + + Test + + + View + + + + + ))} + + + + + + Show + + + + + + of {users.length} + + + + changePage(event.page)} + variant="links-only" + /> + + `} + /> + )} + + {version === "old" && ( + + )} + + {version === "old" && ( + + + + Status + Name + File number + + + + + {pageUsers.map(user => ( + + + {{ user.text }} + {{ user.number }} + + + + Edit + + + Test + + + View + + + + + ))} + + + + + + Show + + + + + + of {{ this.users.length }} + + + + + + `} + /> + )} + + {version === "new" && ( + + )} + + {version === "new" && ( + + + + Status + Name + File number + + + + + {pageUsers.map(user => ( + + + {{ user.text }} + {{ user.number }} + + + + Edit + + + Test + + + View + + + + + ))} + + + + + + Show + + + + + + of {{ this.users.length }} + + + + + + `} + /> + )} + + + + + + + Status + Name + File number + + + + + {pageUsers.map(user => ( + + + {user.text} + {user.number} + + + + Edit + + + Test + + + View + + + + + ))} + + + + + + Show + + + + + + of {users.length} + + + + changePage(event.page)} + variant="links-only" + /> + + + + ); +} + \ No newline at end of file diff --git a/src/examples/popover/PopoverExamples.tsx b/src/examples/popover/PopoverExamples.tsx index 719e77319..fd4f6eb8d 100644 --- a/src/examples/popover/PopoverExamples.tsx +++ b/src/examples/popover/PopoverExamples.tsx @@ -1,8 +1,9 @@ +import { GoabSpacer } from "@abgov/react-components"; import { ButtonClosePopover } from "@examples/popover/ButtonClosePopover"; import { LinkClosePopover } from "@examples/popover/LinkClosePopover"; import { IconButtonClosePopover } from "@examples/popover/IconButtonClosePopover"; +import { TablePopover } from "@examples/popover/TablePopover"; import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; -import { GoabSpacer } from "@abgov/react-components"; import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx"; import { useContext } from "react"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; @@ -11,6 +12,7 @@ export const PopoverExamples = () => { const { version, language } = useContext(LanguageVersionContext); return ( <> + {/*Popover Example - close using a button*/} @@ -25,6 +27,12 @@ export const PopoverExamples = () => { figmaExample=""> + {/*Popover example - Table*/} + + + {version === "old" && ( diff --git a/src/examples/popover/TablePopover.tsx b/src/examples/popover/TablePopover.tsx new file mode 100644 index 000000000..b6d2ebcba --- /dev/null +++ b/src/examples/popover/TablePopover.tsx @@ -0,0 +1,382 @@ +import { useContext, useState } from "react"; +import { Sandbox } from "@components/sandbox"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { + GoabBadge, + GoabFilterChip, + GoabFormItem, + GoabRadioGroup, + GoabRadioItem, + GoabButton, + GoabPopover, + GoabTable, + GoabText +} from "@abgov/react-components"; +import "./popover-page-examples.css"; +import { GoabBadgeType } from "@abgov/ui-components-common"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { GoabRadioGroupOnChangeDetail } from "@abgov/ui-components-common"; + +export const TablePopover = () => { + const { version } = useContext(LanguageVersionContext); + const [selectedFilter, setSelectedFilter] = useState(null); + + const popoverValues = [ + { key: 1, type: "success", status: "Open" }, + { key: 2, type: "midtone", status: "Closed" }, + { key: 3, type: "midtone", status: "Closed" }, + { key: 4, type: "midtone", status: "Closed" }, + { key: 5, type: "success", status: "Open" }, + { key: 6, type: "midtone", status: "Closed" }, + ]; + + const target = ( + + Filter + + ); + + function radioGroupOnChange(event: GoabRadioGroupOnChangeDetail) { + setSelectedFilter(event.value); + } + + const filteredData = selectedFilter ? popoverValues.filter((item) => + item.status === selectedFilter + ) : popoverValues; + + return ( + <> + + {/*============= React code ==============*/} + + {version === "new" && ( + (null); + + const popoverValues = [ + { + key: 1, + type: "success", + status: "Open" + }, + { + key: 2, + type: "midtone", + status: "Closed" + }, + { + key: 3, + type: "midtone", + status: "Closed" + }, + { + key: 4, + type: "midtone", + status: "Closed" + }, + { + key: 5, + type: "success", + status: "Open" + }, + { + key: 6, + type: "midtone", + status: "Closed" + }, + ]; + + const target = ( + + Filter + + ); + + function radioGroupOnChange(event: GoabRadioGroupOnChangeDetail) { + setSelectedFilter(event.value); + } + + const filteredData = selectedFilter ? popoverValues.filter((item) => + item.status === selectedFilter + ) : popoverValues; + `} + /> + )} + + {version === "new" && ( + +

Table with a filter

+ +
+ + + + + + +
+ + + {selectedFilter && ( +
+ + Filter: + + setSelectedFilter(null)} + /> + setSelectedFilter(null)} + > + Clear all + +
+ )} + + + + + Status + Text + Number + Action + + + + {filteredData.map((u) => ( + + + + + Lorem ipsum + 1234567890 + + Action + + + ))} + + + `} + /> + )} + + {/*================ Angular code ==================*/} + + {version === "new" && ( + (null); + + popoverValues: PopoverValue[] = [ + { + key: 1, + type: 'success', + status: 'Open' + }, + { + key: 2, + type: 'midtone', + status: 'Closed' + }, + { + key: 3, + type: 'midtone', + status: 'Closed' + }, + { + key: 4, + type: 'midtone', + status: 'Closed' + }, + { + key: 5, + type: 'success', + status: 'Open' + }, + { + key: 6, + type: 'midtone', + status: 'Closed' + }, + ]; + + get filteredData(): PopoverValue[] { + const filter = this.selectedFilter.value; + return filter + ? this.popoverValues.filter(item => item.status === filter) + : this.popoverValues; + } + + clearFilter() { + this.selectedFilter.setValue(null); + } + } + `} + /> + )} + + {version === "new" && ( + +

Table with a filter

+ +
+ + + + + + +
+ + + Filter + + + + + +
+ + Filter: + + + + Clear all + +
+ + + + + Status + Text + Number + Action + + + + + Lorem ipsum + 1234567890 + Action + + + + `} + /> + )} + +
+

Table with a filter

+ +
+ + + + + + +
+ +
+ {selectedFilter && ( +
+ + Filter: + + setSelectedFilter(null)} + /> + setSelectedFilter(null)} + aria-label="Clear all filters" + > + Clear all + +
+ )} + + + + + Status + Text + Number + Action + + + + {filteredData.map((u) => ( + + + + + Lorem ipsum + 1234567890 + + Action + + + ))} + + + + + ); +}; diff --git a/src/examples/popover/popover-page-examples.css b/src/examples/popover/popover-page-examples.css new file mode 100644 index 000000000..7d441361f --- /dev/null +++ b/src/examples/popover/popover-page-examples.css @@ -0,0 +1,5 @@ +.goa-table-heading-container { + display: flex; + justify-content: space-between; + align-items: center; +} \ No newline at end of file diff --git a/src/examples/question-page/QuestionPageExamples.tsx b/src/examples/question-page/QuestionPageExamples.tsx index 6a06bbbcb..e38eb6264 100644 --- a/src/examples/question-page/QuestionPageExamples.tsx +++ b/src/examples/question-page/QuestionPageExamples.tsx @@ -2,7 +2,7 @@ import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader. import AskAUserOneQuestionAtATime from "@examples/ask-a-user-one-question-at-a-time.tsx"; import GiveBackgroundInformationBeforeAskingAQuestion from "../give-background-information-before-asking-a-question.tsx"; -import RevealMoreInformationToHelpAnswerAQuestion from "../reveal-more-information-to-help-answer-a-question.tsx"; +import ShowMoreInformationToHelpAnswerAQuestion from "../show-more-information-to-help-answer-a-question.tsx"; import ShowASectionTitleOnAQuestionPage from "../show-a-section-title-on-a-question-page.tsx"; import ShowASimpleProgressIndicatorOnAQuestionPage from "../show-a-simple-progress-indicator-on-a-question-page.tsx"; import GroupRelatedQuestionsTogetherOnAQuestionPage from "../group-related-questions-together-on-a-question-page.tsx"; @@ -28,7 +28,7 @@ export default function QuestionPageExamples() { exampleTitle="Reveal more information to help answer a question" figmaExample="https://www.figma.com/file/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?type=design&node-id=101-4108&mode=design"> - + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/examples/set-a-specific-tab-to-be-active.tsx b/src/examples/set-a-specific-tab-to-be-active.tsx index c910cbcb9..3f005b8d3 100644 --- a/src/examples/set-a-specific-tab-to-be-active.tsx +++ b/src/examples/set-a-specific-tab-to-be-active.tsx @@ -113,7 +113,7 @@ export const SetASpecificTabToBeActive = () => { tags="angular" allowCopy={true} code={` - +
All
diff --git a/src/examples/show-a-list-to-help-answer-a-question.tsx b/src/examples/show-a-list-to-help-answer-a-question.tsx index d7bff981f..30678c393 100644 --- a/src/examples/show-a-list-to-help-answer-a-question.tsx +++ b/src/examples/show-a-list-to-help-answer-a-question.tsx @@ -51,7 +51,7 @@ export const ShowAListToHelpAnswerAQuestion = () => { - +
Examples of education expenses diff --git a/src/examples/reveal-more-information-to-help-answer-a-question.tsx b/src/examples/show-more-information-to-help-answer-a-question.tsx similarity index 97% rename from src/examples/reveal-more-information-to-help-answer-a-question.tsx rename to src/examples/show-more-information-to-help-answer-a-question.tsx index cd6d2cec8..e957e40d2 100644 --- a/src/examples/reveal-more-information-to-help-answer-a-question.tsx +++ b/src/examples/show-more-information-to-help-answer-a-question.tsx @@ -10,7 +10,7 @@ import { import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { useContext } from "react"; -export default function RevealMoreInformationToHelpAnswerAQuestion() { +export default function ShowMoreInformationToHelpAnswerAQuestion() { useContext(LanguageVersionContext); return (
diff --git a/src/examples/show-version-number.tsx b/src/examples/show-version-number.tsx index 2c16a9e97..f75609233 100644 --- a/src/examples/show-version-number.tsx +++ b/src/examples/show-version-number.tsx @@ -1,20 +1,70 @@ import { GoabMicrositeHeader } from "@abgov/react-components"; import { Sandbox } from "@components/sandbox"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; export default function ShowVersionNumberExample() { + const {version} = useContext(LanguageVersionContext); return ( <> + + {/*Angular code*/} + {version === "old" && +
v1.23
+ + `} + />} + + {/*Angular code*/} + {version === "new" && +
v1.23
+ + `} + />} + + {/*React code*/} + {version === "old" && + `} + />} + + {/*React code*/} + {version === "new" && + `} + />} + {/* ...React + Angular code snippets here (same as original)... */} - Slotted version text. - v1.23 - - } + version="v1.23" /> diff --git a/src/examples/text-field/TextFieldExamples.tsx b/src/examples/text-field/TextFieldExamples.tsx index 94179cc0a..3cddb0e82 100644 --- a/src/examples/text-field/TextFieldExamples.tsx +++ b/src/examples/text-field/TextFieldExamples.tsx @@ -1,4 +1,3 @@ -import { AskAUserForABirthday } from "@examples/ask-a-user-for-a-birthday.tsx"; import { Search } from "@examples/search.tsx"; import { AskAUserForDollarAmounts } from "@examples/ask-a-user-for-dollar-amounts.tsx"; import { @@ -7,6 +6,8 @@ import { import { TextFieldRightAlignExample } from "@examples/text-field/TextFieldRightAlignExample.tsx"; import { SandboxHeader } from "@components/sandbox/sandbox-header/sandboxHeader.tsx"; import { AskAUserForAnAddress } from "@examples/ask-a-user-for-an-address.tsx"; +import { AskAUserForBankDetails } from "@examples/ask-a-user-for-bank-details.tsx"; +import { EnterAPhoneNumber } from "@examples/enter-a-phone-number.tsx"; export default function TextFieldExamples() { return ( @@ -18,18 +19,18 @@ export default function TextFieldExamples() { - - - - + + + + @@ -47,6 +48,12 @@ export default function TextFieldExamples() { figmaExample="https://www.figma.com/design/aIRjvBzpIUH0GbkffjbL04/%E2%9D%96-Patterns-library-%7C-DDD?node-id=1896-179631&t=X0IQW5flDDaj8Vyg-4"> + + + + ); } \ No newline at end of file diff --git a/src/routes/components/AppHeader.tsx b/src/routes/components/AppHeader.tsx index cdbdd36d8..dcb0ea00c 100644 --- a/src/routes/components/AppHeader.tsx +++ b/src/routes/components/AppHeader.tsx @@ -116,6 +116,29 @@ export default function AppHeaderPage() { description: "Function invoked when the menu hamburger button (on mobile/tablet device) is clicked." } ]; + + const appHeaderMenuLegacyProperties: ComponentProperty[] = [ + { + name: "heading", + type: "string", + description: "Set the heading text displayed for the menu.", + required: true, + }, + { + name: "leadingicon", + type: "GoAIconType", + description: "Set the leading icon for the menu item.", + lang: "angular" + }, + { + name: "leadingIcon", + type: "GoAIconType", + description: "Set the leading icon for the menu item.", + lang: "react" + }, + ...LegacyTestIdProperties, + ]; + const componentProperties: ComponentProperty[] = [ { name: "url", @@ -146,6 +169,21 @@ export default function AppHeaderPage() { } ]; + const appHeaderMenuProperties: ComponentProperty[] = [ + { + name: "heading", + type: "string", + description: "Set the heading text displayed for the menu.", + required: true, + }, + { + name: "leadingIcon", + type: "GoabIconType", + description: "Set the leading icon for the menu item.", + }, + TestIdProperty, + ]; + function onSandboxChange(bindings: ComponentBinding[], props: Record) { setAppHeaderProps(props as CastingType); @@ -174,7 +212,18 @@ export default function AppHeaderPage() { {/*Component properties*/} - + + + {/*App Header Menu Component properties*/} + diff --git a/src/routes/components/Button.tsx b/src/routes/components/Button.tsx index 2ab63d3d7..88b0ae7b6 100644 --- a/src/routes/components/Button.tsx +++ b/src/routes/components/Button.tsx @@ -33,7 +33,7 @@ export default function ButtonPage() { label: "Type", type: "list", name: "type", - options: ["primary", "submit", "secondary", "tertiary", "start"], + options: ["primary", "secondary", "tertiary", "start"], value: "", defaultValue: "primary", }, @@ -71,7 +71,7 @@ export default function ButtonPage() { const oldComponentProperties: ComponentProperty[] = [ { name: "type", - type: "primary | submit | secondary | tertiary | start", + type: "primary | secondary | tertiary | start", description: "Sets the type of button.", defaultValue: "primary", }, @@ -140,7 +140,7 @@ export default function ButtonPage() { const componentProperties: ComponentProperty[] = [ { name: "type", - type: "GoabButtonType (primary | submit | secondary | tertiary | start)", + type: "GoabButtonType (primary | secondary | tertiary | start)", description: "Sets the type of button.", defaultValue: "primary", }, @@ -248,7 +248,7 @@ export default function ButtonPage() { heading={ <> Examples - + } > diff --git a/src/routes/components/ButtonGroup.tsx b/src/routes/components/ButtonGroup.tsx index 056b0cc13..4ee4ffedd 100644 --- a/src/routes/components/ButtonGroup.tsx +++ b/src/routes/components/ButtonGroup.tsx @@ -11,7 +11,7 @@ import { GoabButtonGroupAlignment } from "@abgov/ui-components-common"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; -import { ExamplesEmpty } from "@components/empty-states/examples-empty/ExamplesEmpty.tsx"; +import { ButtonGroupExamples } from "@examples/button-group/ButtonGroupExamples.tsx"; const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=27301-302108"; @@ -156,11 +156,11 @@ export default function ButtonGroupPage() { heading={ <> Examples - + } > - + diff --git a/src/routes/components/DatePicker.tsx b/src/routes/components/DatePicker.tsx index 921566c93..668f5a96a 100644 --- a/src/routes/components/DatePicker.tsx +++ b/src/routes/components/DatePicker.tsx @@ -1,6 +1,6 @@ import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; import { ComponentBinding, Sandbox } from "@components/sandbox"; -import { useContext, useState } from "react"; +import { useContext, useState, useEffect } from "react"; import { ComponentProperties, ComponentProperty, @@ -71,6 +71,32 @@ export default function DatePickerPage() { value: false, }, ]); + + useEffect(() => { + setComponentBindings(prevBindings => { + if (version === "new") { + // Add the type property if it doesn't exist + if (!prevBindings.find(binding => binding.name === "type")) { + return [ + ...prevBindings, + { + label: "Type", + type: "list", + name: "type", + options: ["", "calendar", "input"], + value: "", + defaultValue: "calendar", + } + ]; + } + } else { + // Remove the type property if it exists + return prevBindings.filter(binding => binding.name !== "type"); + } + return prevBindings; + }); + }, [version]); + const { formItemBindings, formItemProps, onFormItemChange } = useSandboxFormItem({ label: "Item", }); @@ -95,7 +121,7 @@ export default function DatePickerPage() { { name: "min", type: "string", - defaultValue: "5 year previous", + defaultValue: "5 years previous", description: "Minimum date value allowed.", }, { @@ -125,6 +151,12 @@ export default function DatePickerPage() { type: "string", description: "Name of the date field.", }, + { + name: "type", + type: "calendar | input", + description: "Sets the type of date picker to use.", + defaultValue: "calendar", + }, { name: "value", type: "Date | string | null | undefined", @@ -133,14 +165,14 @@ export default function DatePickerPage() { { name: "min", type: "Date | string", - defaultValue: "5 year previous", - description: "Minimum date value allowed.", + defaultValue: "5 years previous", + description: "Minimum date value allowed. Only used for calendar type.", }, { name: "max", type: "Date | string", defaultValue: "5 years forward", - description: "Maximum date value allowed.", + description: "Maximum date value allowed. Only used for calendar type.", }, { name: "error", @@ -311,16 +343,31 @@ export default function DatePickerPage() { - - Examples - - - } - > - - + Examples + + + } + > + + + )} + + {version === "old" && ( + + Examples + + + } + > + + + )} diff --git a/src/routes/components/Dropdown.tsx b/src/routes/components/Dropdown.tsx index 160473ab3..af111a26a 100644 --- a/src/routes/components/Dropdown.tsx +++ b/src/routes/components/Dropdown.tsx @@ -426,7 +426,7 @@ export default function DropdownPage() { heading={ <> Examples - + }> diff --git a/src/routes/components/Popover.tsx b/src/routes/components/Popover.tsx index 33c5f6b9f..dd4364312 100644 --- a/src/routes/components/Popover.tsx +++ b/src/routes/components/Popover.tsx @@ -1,11 +1,12 @@ import { useContext, useState } from "react"; import { ComponentBinding, Sandbox } from "@components/sandbox"; +import { Link } from "react-router-dom"; import { ComponentProperties, ComponentProperty, } from "@components/component-properties/ComponentProperties.tsx"; import { Category, ComponentHeader } from "@components/component-header/ComponentHeader.tsx"; -import { GoabBadge, GoabButton, GoabPopover, GoabTab, GoabTabs } from "@abgov/react-components"; +import { GoabBadge, GoabButton, GoabCallout, GoabPopover, GoabSpacer, GoabTab, GoabTabs } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { propsToString } from "@components/sandbox/BaseSerializer.ts"; import { ComponentContent } from "@components/component-content/ComponentContent"; @@ -298,6 +299,8 @@ export default function PopoverPage() { It can be used for a number of different contexts. + + Popovers are used as a base layer in other components like tooltips and dropdown menus. Examples - + }> diff --git a/src/routes/components/TemporaryNotification.tsx b/src/routes/components/TemporaryNotification.tsx index 8f4237181..f1a2c9c44 100644 --- a/src/routes/components/TemporaryNotification.tsx +++ b/src/routes/components/TemporaryNotification.tsx @@ -477,7 +477,7 @@ export default function TemporaryNotificationPage() { Examples - + }> diff --git a/src/routes/components/TextField.tsx b/src/routes/components/TextField.tsx index bb6d03907..c4ff08682 100644 --- a/src/routes/components/TextField.tsx +++ b/src/routes/components/TextField.tsx @@ -798,7 +798,7 @@ export default function TextFieldPage() { heading={ <> Examples - + }> diff --git a/src/routes/design-tokens/border-radius/BorderRadius.tsx b/src/routes/design-tokens/border-radius/BorderRadius.tsx index ebff7fd56..22d85b867 100644 --- a/src/routes/design-tokens/border-radius/BorderRadius.tsx +++ b/src/routes/design-tokens/border-radius/BorderRadius.tsx @@ -1,5 +1,5 @@ import { useContext } from "react"; -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./BorderRadius.css"; import { Token } from "../token"; @@ -120,7 +120,7 @@ export default function BorderRadiusPage() { return ( -

Border Radius

+ Border Radius {isDesktop ? renderDesktop() : renderMobile()} ); diff --git a/src/routes/design-tokens/border-width/BorderWidth.tsx b/src/routes/design-tokens/border-width/BorderWidth.tsx index 3299e4f3b..7c7ec9bb5 100644 --- a/src/routes/design-tokens/border-width/BorderWidth.tsx +++ b/src/routes/design-tokens/border-width/BorderWidth.tsx @@ -1,5 +1,5 @@ import { useContext } from "react"; -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./BorderWidth.css"; import { Token } from "../token"; @@ -118,7 +118,7 @@ export default function BorderWidthPage() { return ( -

Border Width

+ Border Width {isDesktop ? renderDesktop() : renderMobile()} ); diff --git a/src/routes/design-tokens/color/Color.tsx b/src/routes/design-tokens/color/Color.tsx index eab8cd91f..a9d82362a 100644 --- a/src/routes/design-tokens/color/Color.tsx +++ b/src/routes/design-tokens/color/Color.tsx @@ -110,7 +110,7 @@ export default function ColorPage() { return ( -

Color

+ Color {isDesktop ? renderDesktop() : renderTablet()} ); diff --git a/src/routes/design-tokens/icon-size/IconSize.tsx b/src/routes/design-tokens/icon-size/IconSize.tsx index 871af740a..37982c6b6 100644 --- a/src/routes/design-tokens/icon-size/IconSize.tsx +++ b/src/routes/design-tokens/icon-size/IconSize.tsx @@ -1,4 +1,4 @@ -import { GoabContainer, GoabGrid, GoabIcon, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabIcon, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./IconSize.css"; import { getTokenGroups } from "../getTokenGroups"; @@ -138,7 +138,7 @@ export default function IconSizePage() { return ( -

Icon size

+ Icon size {isDesktop ? renderDesktop() : renderMobile()} ); diff --git a/src/routes/design-tokens/opacity/Opacity.tsx b/src/routes/design-tokens/opacity/Opacity.tsx index 373ebb416..46b1dace0 100644 --- a/src/routes/design-tokens/opacity/Opacity.tsx +++ b/src/routes/design-tokens/opacity/Opacity.tsx @@ -1,4 +1,4 @@ -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./Opacity.css"; import { getTokenGroups } from "../getTokenGroups"; @@ -94,7 +94,7 @@ export default function OpacityPage() { return ( -

Opacity

+ Opacity {isDesktop ? renderDesktop() : renderMobile()} ); diff --git a/src/routes/design-tokens/shadow/Shadow.tsx b/src/routes/design-tokens/shadow/Shadow.tsx index 15c7dab36..e4db48116 100644 --- a/src/routes/design-tokens/shadow/Shadow.tsx +++ b/src/routes/design-tokens/shadow/Shadow.tsx @@ -1,4 +1,4 @@ -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./Shadow.css"; import { getTokenGroups } from "../getTokenGroups"; @@ -110,7 +110,7 @@ export default function ShadowPage() { return ( -

Shadow

+ Shadow {isDesktop ? renderDesktop() : renderMobile()} ); diff --git a/src/routes/design-tokens/spacing/Spacing.tsx b/src/routes/design-tokens/spacing/Spacing.tsx index b942561d2..d5a54c8cc 100644 --- a/src/routes/design-tokens/spacing/Spacing.tsx +++ b/src/routes/design-tokens/spacing/Spacing.tsx @@ -1,4 +1,4 @@ -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import "./Spacing.css"; import SPACING_TOKENS from "./spacing.json"; @@ -90,7 +90,7 @@ export default function SpacingPage() { return ( -

Spacing

+ Spacing {isDesktop ? renderDesktop() : renderMobile()} ); diff --git a/src/routes/design-tokens/typography/Typography.tsx b/src/routes/design-tokens/typography/Typography.tsx index 1814e2ad7..fd0df2628 100644 --- a/src/routes/design-tokens/typography/Typography.tsx +++ b/src/routes/design-tokens/typography/Typography.tsx @@ -1,4 +1,4 @@ -import { GoabContainer, GoabGrid, GoabTable } from "@abgov/react-components"; +import { GoabContainer, GoabGrid, GoabTable, GoabText } from "@abgov/react-components"; import { TokenSnippet } from "@components/token-snippet/TokenSnippet"; import TYPO_TOKENS from "./typography.json"; import { getTokenGroups } from "../getTokenGroups"; @@ -81,7 +81,7 @@ export default function TypographyPage() { return (
-

Typography

+ Typography {isDesktop ? renderDesktop() : renderMobile()}
diff --git a/src/routes/foundations/Accessibility.tsx b/src/routes/foundations/Accessibility.tsx index c033c8e47..f208ff8ff 100644 --- a/src/routes/foundations/Accessibility.tsx +++ b/src/routes/foundations/Accessibility.tsx @@ -8,7 +8,7 @@ export default function AccessibilityPage() { Accessibility - + We aim to create digital products that everyone can use, no matter their abilities or situation. This guide outlines key principles, design tips, and tools to help create accessible and inclusive experiences. diff --git a/src/routes/foundations/BrandGuidelines.tsx b/src/routes/foundations/BrandGuidelines.tsx index 9b593436c..221c6a9b6 100644 --- a/src/routes/foundations/BrandGuidelines.tsx +++ b/src/routes/foundations/BrandGuidelines.tsx @@ -7,7 +7,7 @@ export default function BrandGuidelinesPage() { Brand guidelines - + Communications and Public Engagement (CPE) plays an important role in providing and maintaining brand identity guidelines across the Government of Alberta. These guidelines ensure all digital products are consistent and easily recognizable, building trust with users. diff --git a/src/routes/foundations/Capitalization.tsx b/src/routes/foundations/Capitalization.tsx index a159e7d1d..afb6ebbd4 100644 --- a/src/routes/foundations/Capitalization.tsx +++ b/src/routes/foundations/Capitalization.tsx @@ -8,10 +8,11 @@ export default function CapitalizationPage() { return ( - + Content guidelines + Capitalization - + Use sentence case for all headings, labels, and content. diff --git a/src/routes/foundations/Color.tsx b/src/routes/foundations/Color.tsx index 0cf00f8a0..6a917b957 100644 --- a/src/routes/foundations/Color.tsx +++ b/src/routes/foundations/Color.tsx @@ -5,10 +5,11 @@ export default function FoundationsColorPage() { return ( - + Style guide + Color - + Colors play a major role in how the Government of Alberta communicates. They serve as a tool to convey clarity, express emotions, and promote inclusivity. diff --git a/src/routes/foundations/DateFormat.tsx b/src/routes/foundations/DateFormat.tsx index 03623321b..9133f84d7 100644 --- a/src/routes/foundations/DateFormat.tsx +++ b/src/routes/foundations/DateFormat.tsx @@ -7,10 +7,11 @@ const minGridWidth = "36ch"; export default function DateFormatPage() { return ( - + Content guidelines + Date format - + Configuration which contains date information that includes the specification of the form and structure of the date data within the date format in different scenarios. diff --git a/src/routes/foundations/DesignAtGoA.tsx b/src/routes/foundations/DesignAtGoA.tsx index b6a74b8b3..9c6236562 100644 --- a/src/routes/foundations/DesignAtGoA.tsx +++ b/src/routes/foundations/DesignAtGoA.tsx @@ -7,7 +7,7 @@ export default function DesignAtGoAPage() { Design at the Government of Alberta - + Citizens expect digital products that are modern, easy to use, and consistent. To meet these needs, our digital products must follow our user experience guidelines and should be tested frequently to make continuous improvement and stay relevant. diff --git a/src/routes/foundations/ErrorMessages.tsx b/src/routes/foundations/ErrorMessages.tsx index 2e9c7da85..52b6cc38d 100644 --- a/src/routes/foundations/ErrorMessages.tsx +++ b/src/routes/foundations/ErrorMessages.tsx @@ -18,11 +18,12 @@ export default function ErrorMessagesPage() { const noop = () => { }; return ( - + Content guidelines + Error messages - - Error messages appear when the user’s proposed action fails. + + Error messages appear when the user's proposed action fails. diff --git a/src/routes/foundations/HelperText.tsx b/src/routes/foundations/HelperText.tsx index 62fd5c909..f3cbd0010 100644 --- a/src/routes/foundations/HelperText.tsx +++ b/src/routes/foundations/HelperText.tsx @@ -19,10 +19,11 @@ export default function HelperTextPage() { return ( - + Content guidelines + Helper text - + Additional context and guidance that is always visible below an input. The text instructs a user on what needs to be completed to move to the next question in the form or process. diff --git a/src/routes/foundations/Iconography.tsx b/src/routes/foundations/Iconography.tsx index 6241a75be..94a916e59 100644 --- a/src/routes/foundations/Iconography.tsx +++ b/src/routes/foundations/Iconography.tsx @@ -75,10 +75,11 @@ export default function IconographyPage() { return ( - + Style guide + Iconography - + Icons are simple and universal graphic symbols that communicate and enhance both the aesthetic and functional aspects of our products. While they can be used with descriptors, they can also be self-expressive and convey meaning diff --git a/src/routes/foundations/Layout.tsx b/src/routes/foundations/Layout.tsx index 86c9e8156..238b83da8 100644 --- a/src/routes/foundations/Layout.tsx +++ b/src/routes/foundations/Layout.tsx @@ -6,10 +6,11 @@ export default function FoundationsLayoutPage() { return ( - + Style guide + Layout - + We use the layout as a structural template to support consistency across our products. By defining visual grids, spacing, and sections, we create intuitive products for our users. diff --git a/src/routes/foundations/Logo.tsx b/src/routes/foundations/Logo.tsx index 1c187745f..75f46d4d5 100644 --- a/src/routes/foundations/Logo.tsx +++ b/src/routes/foundations/Logo.tsx @@ -4,10 +4,11 @@ import { ComponentContent } from "@components/component-content/ComponentContent export default function LogoPage() { return ( - + Style guide + Logo - + Our logo is an important part of our brand identity and serves as a symbol that distinguishes our digital products from others. To keep our brand consistent and recognizable, we encourage following the guidelines for proper diff --git a/src/routes/foundations/Photography.tsx b/src/routes/foundations/Photography.tsx index 3871d9a62..51a2bbf99 100644 --- a/src/routes/foundations/Photography.tsx +++ b/src/routes/foundations/Photography.tsx @@ -4,10 +4,11 @@ import { ComponentContent } from "@components/component-content/ComponentContent export default function ImagesPage() { return ( - + Style guide + Photography - + The Government of Alberta maintains a library of photos specifically taken for government use, ensuring they are relevant to our citizens. This collection meets our established criteria for quality and accessibility. diff --git a/src/routes/foundations/Typography.tsx b/src/routes/foundations/Typography.tsx index 75ea5f563..3c114c13f 100644 --- a/src/routes/foundations/Typography.tsx +++ b/src/routes/foundations/Typography.tsx @@ -6,10 +6,11 @@ export default function FoundationsTypographyPage() { return ( - + Style guide + Typography - + Our typography system is designed to create a consistent and accessible experience across all Government of Alberta digital products. When paired with an effective content strategy, it enhances accessibility and makes content diff --git a/src/routes/get-started/ComponentLifecycle.tsx b/src/routes/get-started/ComponentLifecycle.tsx index 318bc667f..cdd5f3e5d 100644 --- a/src/routes/get-started/ComponentLifecycle.tsx +++ b/src/routes/get-started/ComponentLifecycle.tsx @@ -7,7 +7,7 @@ export default function ComponentLifecyclePage() { Component lifecycle - + This lifecycle defines the stages every component in the Design System undergoes, from Alpha to Production to Legacy. Each stage describes the component's maturity, adoption level, and support status.

 diff --git a/src/routes/get-started/Contribute.tsx b/src/routes/get-started/Contribute.tsx index 6db946d4e..cc082cc3e 100644 --- a/src/routes/get-started/Contribute.tsx +++ b/src/routes/get-started/Contribute.tsx @@ -182,7 +182,7 @@ export default function ContributePage() {
  • Run the bash script: - +
  • The commands above will install all necessary packages and create a “playground” folder containing both React and Angular environments. Since nothing in this folder is committed to the repository, you can freely make any changes you want. These environments are designed for testing purposes.
  • diff --git a/src/routes/get-started/GetStartedOverview.tsx b/src/routes/get-started/GetStartedOverview.tsx index 6481bb6fa..46c837928 100644 --- a/src/routes/get-started/GetStartedOverview.tsx +++ b/src/routes/get-started/GetStartedOverview.tsx @@ -13,13 +13,13 @@ export default function GetStartedOverviewPage() { Starting with the design system - + Start with the design system to build on the research and experience of other service teams and avoid repeating work that's already been done. - + Design system by role: diff --git a/src/routes/get-started/LtsPolicyPage.tsx b/src/routes/get-started/LtsPolicyPage.tsx index d17a77ad4..29f85c91c 100644 --- a/src/routes/get-started/LtsPolicyPage.tsx +++ b/src/routes/get-started/LtsPolicyPage.tsx @@ -4,31 +4,38 @@ import { Link } from "react-router-dom"; export const LtsPolicyPage = () => { return ( <> - Long Term Support (LTS) + Long Term Support (LTS) - - The Long Term Support (LTS) version will continue to be supported until September 30, 2025. Learn more about what you can expect. + + LTS for the design system has ended. Version v3 (Angular) and v5 (React) are no longer supported. - - The previous version of the design system v3 (Angular) and v5 (React) is now in Long-Term Support (LTS). Here's what that means: + + What this means: -
      -
    • Bug fixes only: We'll continue fixing critical bugs and regressions.
      • -
    • No new features or enhancements: All new development is happening in the latest major version.
      • -
    • Same reliable experience: Your project will continue to work as expected.
      • -
    +
      +
    • No fixes or patches: We won't ship bug or security fixes for v3/v5
      • +
    • No new features or enhancements: All new work happens in the current major version.
      • +
    • Use at your own risk: Existing projects may continue to run, but we won't test or guarantee compatibility with new browsers, OS updates, or framework changes.
      • +
    - - Ready to update to the latest version? Visit our update guide + + What to do next - +
      +
    • Upgrade to the latest version. See the update guide
      • +
    • Need help planning the upgrade? Book a drop in hours session for guidance
      • +
    +     + + - Projects still using LTS will continue to work, but new issues or bugs will not be prioritized. + Projects still using LTS will continue to work, but new issues or bugs in v3 (Angular) and v5 (React) will not be fixed. ); diff --git a/src/routes/get-started/ReportBug.tsx b/src/routes/get-started/ReportBug.tsx index be995c888..b4eed0b99 100644 --- a/src/routes/get-started/ReportBug.tsx +++ b/src/routes/get-started/ReportBug.tsx @@ -233,7 +233,7 @@ export default function ReportBugPage() { Report a bug - + Let us know if you find a problem or inconsistency in the design system. Providing complete details in your bug report helps our team understand, prioritize, and fix the issue faster. diff --git a/src/routes/get-started/RequestFeature.tsx b/src/routes/get-started/RequestFeature.tsx index 12ea72335..b15a07f56 100644 --- a/src/routes/get-started/RequestFeature.tsx +++ b/src/routes/get-started/RequestFeature.tsx @@ -10,7 +10,7 @@ export default function RequestFeaturePage() { Request a new feature - + Anyone can propose a new component or pattern for the design system. diff --git a/src/routes/get-started/Roadmap.tsx b/src/routes/get-started/Roadmap.tsx index 4524f230c..1ff0426bb 100644 --- a/src/routes/get-started/Roadmap.tsx +++ b/src/routes/get-started/Roadmap.tsx @@ -6,7 +6,7 @@ export default function RoadmapPage() { Roadmap - + A high-level summary of the work the design system team plans to focus on in 2025. Some initiatives span multiple phases, meaning they will be continuously worked on across the year. diff --git a/src/routes/get-started/Support.tsx b/src/routes/get-started/Support.tsx index 127d7d197..8e804de24 100644 --- a/src/routes/get-started/Support.tsx +++ b/src/routes/get-started/Support.tsx @@ -32,7 +32,7 @@ export default function SupportPage() { Get support - + Get help from our team with using the design system, including components, guidelines, best practices, and accessibility. diff --git a/src/routes/get-started/UserExperienceGuidelines.tsx b/src/routes/get-started/UserExperienceGuidelines.tsx index 484c0736f..28f0ecf41 100644 --- a/src/routes/get-started/UserExperienceGuidelines.tsx +++ b/src/routes/get-started/UserExperienceGuidelines.tsx @@ -4,8 +4,8 @@ export default function UserExperienceGuidelinesPage() { return ( <> Designers - User experience guidelines - Digital products built for the Government of Alberta should comply with these + User experience guidelines + Digital products built for the Government of Alberta should comply with these guidelines to ensure a quality user experience for Albertans. diff --git a/src/routes/get-started/designers/UxDesigner.tsx b/src/routes/get-started/designers/UxDesigner.tsx index 09d11c774..2d7e77452 100644 --- a/src/routes/get-started/designers/UxDesigner.tsx +++ b/src/routes/get-started/designers/UxDesigner.tsx @@ -6,8 +6,8 @@ export default function UxDesignerPage() { return ( Designers - Overview - As a designer, you can consume the design system through Figma. Through Figma you + Overview + As a designer, you can consume the design system through Figma. Through Figma you can use tokens, components, and page templates. @@ -65,7 +65,7 @@ export default function UxDesignerPage() { - + For example, you can communicate to your developer:
    The colour is: --goa-color-info-default
    diff --git a/src/routes/get-started/developers/BugVerification.tsx b/src/routes/get-started/developers/BugVerification.tsx index cbb3ba26a..7e431c6d1 100644 --- a/src/routes/get-started/developers/BugVerification.tsx +++ b/src/routes/get-started/developers/BugVerification.tsx @@ -5,8 +5,8 @@ export default function BugVerificationPage() { return ( Developers - Verify a bug - + Verify a bug + How to resolve issues with design system components diff --git a/src/routes/get-started/developers/DevelopersOverview.tsx b/src/routes/get-started/developers/DevelopersOverview.tsx index 9ea7b2032..ed0102f31 100644 --- a/src/routes/get-started/developers/DevelopersOverview.tsx +++ b/src/routes/get-started/developers/DevelopersOverview.tsx @@ -7,8 +7,8 @@ export default function DevelopersOverviewPage() { return ( Developers - Overview - As a developer, you can consume the design system using tokens, components, + Overview + As a developer, you can consume the design system using tokens, components, templates, and the demo application. diff --git a/src/routes/get-started/developers/DevelopersSetup.tsx b/src/routes/get-started/developers/DevelopersSetup.tsx index 71616c4f6..52107e30d 100644 --- a/src/routes/get-started/developers/DevelopersSetup.tsx +++ b/src/routes/get-started/developers/DevelopersSetup.tsx @@ -8,8 +8,8 @@ export default function DevelopersSetupPage() {
    Developers - Setup - Once you are setup, you can use the project template to quickly get + Setup + Once you are setup, you can use the project template to quickly get started. View project templates diff --git a/src/routes/get-started/developers/DevelopersTechnologies.tsx b/src/routes/get-started/developers/DevelopersTechnologies.tsx index b667b2df7..33f854e2f 100644 --- a/src/routes/get-started/developers/DevelopersTechnologies.tsx +++ b/src/routes/get-started/developers/DevelopersTechnologies.tsx @@ -5,8 +5,8 @@ export default function DevelopersTechnologiesPage() { return ( Developers - Technologies - An overview of the technologies that make up the design system. + Technologies + An overview of the technologies that make up the design system.
    diff --git a/src/routes/get-started/developers/DevelopersVSCode.tsx b/src/routes/get-started/developers/DevelopersVSCode.tsx index e9bc7b727..de4d9b84b 100644 --- a/src/routes/get-started/developers/DevelopersVSCode.tsx +++ b/src/routes/get-started/developers/DevelopersVSCode.tsx @@ -6,8 +6,8 @@ export default function DevelopersVSCodePage() { return ( Developers - VS Code - + VS Code + You can use VS Code's autocomplete suggestions for design system components and design tokens. diff --git a/src/routes/get-started/developers/SupportedBrowsers.tsx b/src/routes/get-started/developers/SupportedBrowsers.tsx index a1d66debd..ab25ea1a1 100644 --- a/src/routes/get-started/developers/SupportedBrowsers.tsx +++ b/src/routes/get-started/developers/SupportedBrowsers.tsx @@ -6,8 +6,8 @@ export default function SupportedBrowsersPage() { return ( Developers - Supported browsers - The design system components are tested on the following browsers and devices: + Supported browsers + The design system components are tested on the following browsers and devices: @@ -82,13 +82,13 @@ export default function SupportedBrowsersPage() {
    - + Representative mobile OS used in testing - + Android OS: 10+ - + iOS: 15+ diff --git a/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx b/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx index c4fc903c3..2c59375c3 100644 --- a/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx +++ b/src/routes/get-started/developers/upgrade-guide/DevelopersUpgrade.tsx @@ -13,8 +13,8 @@ export default function DevelopersUpgradePage() { Developers - Version update guide - Step-by-step guide to updating your code from DDD Design System v3 to v4 + Version update guide + Step-by-step guide to updating your code from DDD Design System v3 to v4 (Angular) and v5 to v6 (React) @@ -38,8 +38,8 @@ export default function DevelopersUpgradePage() { The component is stable and supported in the latest major release. However, we recommend using the public form pattern for a more modular, flexible, and accessible approach. - - + + Major differences between current and new version diff --git a/src/routes/get-started/qa-testing/QATestingOverview.tsx b/src/routes/get-started/qa-testing/QATestingOverview.tsx index 33d4d5b3f..d66474a73 100644 --- a/src/routes/get-started/qa-testing/QATestingOverview.tsx +++ b/src/routes/get-started/qa-testing/QATestingOverview.tsx @@ -8,7 +8,7 @@ export default function QATestingOverviewPage() { QA Testing - + Outline of the testing procedure for the DDD design system. The procedure ensures that all components function correctly and integrate seamlessly within DDD products. diff --git a/src/routes/home.tsx b/src/routes/home.tsx index 777be2c42..ad45ba89b 100644 --- a/src/routes/home.tsx +++ b/src/routes/home.tsx @@ -80,7 +80,7 @@ const HomePage = () => {
    - Start by using the design system in your service + Start by using the design system in your service Use the existing components and patterns in the design system to save time and build off of the current standard. Typically, these cover around 80% of your service's needs. @@ -103,8 +103,8 @@ const HomePage = () => { heading="What happens when I need a new or different component or pattern?" headingSize="medium" > - - If a component or pattern doesn’t exists in the design system or doesn’t meet the needs of your users, + + If a component or pattern doesn't exists in the design system or doesn't meet the needs of your users, follow the process below: @@ -135,10 +135,10 @@ const HomePage = () => { Additional resources - + Common capabilities: Shared digital services - + A directory of reusable backend services designed to help you and your team work more efficiently and align to government infrastructure standards. @@ -152,10 +152,10 @@ const HomePage = () => { - + User Experience best practices - + These resources establish best practices to shape and guide the work of DDD user experience designers.