feat(docs): add versioned documentation (1.1.0) for design-system-docs (#4343)

* chore(docs): add versioned documentation (1.1.0) for design-system-docs

## Summary
Introduces documentation versioning to the EDS documentation site, establishing 1.1.0 as the stable release and setting up 2.0.0-wip as the current development version.

## Changes

### Documentation Versioning
- Created version 1.1.0 snapshot using `docusaurus docs:version 1.1.0`
- Added `versioned_docs/version-1.1.0/` containing the stable documentation
- Added `versioned_sidebars/version-1.1.0-sidebars.json` for version-specific navigation
- Updated `versions.json` to include version 1.1.0
- Configured current docs as 2.0.0-wip (work in progress) in `docusaurus.config.ts`

### Version Dropdown
- Users can now switch between versions via the navbar dropdown
- Default path (`/docs/`) serves version 1.1.0 (stable)
- Next version accessible at `/docs/Next/` (2.0.0-wip)

### Documentation
- Added `documentation/how-to/DOCS_VERSIONING_GUIDE.md` with instructions for future version management

## Testing

- [x] `pnpm docu:build` completes successfully
- [x] Version dropdown appears in navbar
- [x] Switching between versions works correctly

## Related
- Docusaurus versioning: https://docusaurus.io/docs/versioning

* Update apps/design-system-docs/versioned_docs/version-1.1.0/resources/resources.md

Co-authored-by: Frida Erdal <31915755+pomfrida@users.noreply.github.com>

* Update apps/design-system-docs/versioned_docs/version-1.1.0/resources/resources.md

Co-authored-by: Frida Erdal <31915755+pomfrida@users.noreply.github.com>

---------

Co-authored-by: Frida Erdal <31915755+pomfrida@users.noreply.github.com>

Author: Chibuzor-Nwemambu

apps/design-system-docs/docusaurus.config.ts

@@ -42,6 +42,12 @@ const config: Config = {
           breadcrumbs: true,
           editUrl:
             'https://github.com/equinor/design-system/tree/main/apps/design-system-docs/shared',
+          versions: {
+            current: {
+              label: '2.0.0-wip', // Current version label
+              path: 'Next', // URL path for the current version
+            },
+          },
         },
         theme: {
           customCss: [
@@ -127,6 +133,11 @@ const config: Config = {
           type: 'search',
           position: 'right',
         },
+        {
+          type: 'docsVersionDropdown',
+          position: 'left',
+          dropdownActiveClassDisabled: true,
+        },
       ],
     },
     footer: {

apps/design-system-docs/versioned_docs/version-1.1.0/about/about_eds.md

@@ -0,0 +1,63 @@
+# About EDS
+
+Welcome to **Equinor Design System**! We've built this design system to help you create consistent, accessible digital experiences at Equinor. Whether you're designing in Figma, developing with React, or managing projects, EDS provides the tools and guidance you need to succeed.
+
+We believe great design should be accessible to everyone, regardless of your technical background. Our system eliminates the need to recreate basic interface elements, so you can focus your expertise on solving real user problems and delivering exceptional experiences.
+
+## Design Principles
+
+These principles guide every decision we make in developing and maintaining EDS:
+
+**Flexible and adaptable**  
+Our components work together seamlessly whilst accommodating diverse use cases and requirements across different projects.
+
+**Accessible by design**  
+We prioritise inclusive design from the start, ensuring every element works for users of all abilities and supports assistive technologies.
+
+**Purposeful interaction**  
+Motion and interactive elements serve clear functions, helping users understand and navigate interfaces without unnecessary decoration.
+
+**Cross-platform consistency**  
+Whether you're building for web, mobile, or desktop applications, EDS maintains the same visual language and interaction patterns.
+
+## Why EDS
+
+EDS was created to support teams across Equinor in building better digital experiences more efficiently. We recognised opportunities to help teams work together more effectively whilst maintaining the high standards our users deserve.
+
+**Shared foundation for efficiency** — EDS provides tested, reusable components that teams can build upon, eliminating the need to recreate similar solutions across different projects and allowing everyone to focus their expertise on solving unique user problems.
+
+**Centralised maintenance** — With components maintained centrally in one place, developers no longer need to spend time maintaining multiple versions of the same interface elements. This approach ensures consistent updates and bug fixes whilst freeing up valuable development time for teams to focus on innovative features and solving complex business challenges.
+
+**Unified brand experience** — We ensure that users have a consistent, professional experience as they navigate between different Equinor applications, strengthening trust and familiarity with our digital services.
+
+**Built-in accessibility** — Every component includes accessibility best practices from the start, helping teams create inclusive experiences that serve all users effectively and meet compliance standards.
+
+**Streamlined collaboration** — EDS provides shared tools and common terminology that enable designers and developers to work together seamlessly, reducing development time and improving communication.
+
+**Quality assurance** — Our centralised approach ensures that interface solutions are thoroughly tested and maintained, giving teams confidence in their implementations and reducing long-term maintenance overhead.
+
+EDS serves as the foundation that empowers teams to create exceptional user experiences whilst working more efficiently and maintaining consistency across all of Equinor's digital touchpoints.
+
+## What You Get
+
+EDS provides everything you need to build consistent, accessible interfaces:
+
+- **React components** — Production-ready with full TypeScript support
+
+- **Design tokens** — Colours, typography, spacing, and motion guidelines
+
+- **Figma libraries** — Complete foundations, components, and patterns
+
+- **Icons and assets** — Comprehensive visual library
+
+- **Accessibility guidance** — Built-in best practices and compliance standards
+
+- **Implementation support** — Clear examples and practical guidance
+
+Start building immediately with tools designed for your workflow.
+
+## Support & Community
+
+Visit our [Support page](../support/support.md) for help channels, office hours, and direct access to our team.
+
+Your feedback helps us improve EDS for everyone — we'd love to hear from you!

apps/design-system-docs/versioned_docs/version-1.1.0/about/getting-started/design/figma.md

@@ -0,0 +1,67 @@
+# Figma
+
+Figma is the design and prototyping tool we use with EDS. This guide helps you get set up, understand permissions, and work effectively with EDS components.
+
+## Getting Access
+
+**Apply for access** through internal Equinor resources or contact your team administrator for help with account setup.
+
+**Join your team** by contacting your team admin or owner. You can also search in Figma for your team and request access.
+
+## Understanding Permissions
+
+**Viewers** can:
+
+- View and comment on files and projects
+- See all teams in the Equinor Figma organisation
+- Access EDS components, styles, and fonts
+
+**Editors** can do everything viewers can, plus create and edit files. If you need editor access, ask your team admin to upgrade your permissions.
+
+## Creating Teams
+
+If you need to create a new team, read Figma's team creation guidelines first. Create teams under the Equinor organisation and make sure the team doesn't already exist. We recommend using one team per project and choosing clear, professional names.
+
+**Team owner responsibilities:**
+
+- Serve as the main contact for Figma administrators and the EDS core team
+- Follow Figma guidelines from the EDS storefront
+- Manage team member permissions properly
+- Remove inactive members to control costs
+
+## Working with EDS Components
+
+**Set up your workspace:**
+
+- Change your nudge amount to 8px for better alignment with EDS grid system
+- Read EDS grid guidelines before working with EDS components
+- Always place content on frames or artboards
+
+**Use components properly:**
+
+- Find components in the Assets tab on the left sidebar
+- Search or scroll to locate the component you need
+- Drag components to your frame without changing colours or layouts
+- Review component updates when they become available — you can accept or deny them
+- When you accept updates, all instances update while preserving your custom content like text or overridden colours
+
+## File Organisation
+
+**Create cover pages** for each file with project information and status badges. Each file must contain a cover page on the first page named "Cover". Place the `Default File Cover` component and fill in all information so team members know who owns the file and who to contact with questions. Update the status badge and background colour as your work progresses.
+
+**Stay organised** by using separate pages for different sections of your app, custom components, and sketches. Use Figma's unlimited pages feature to break apart main sections when needed. Lay out frames horizontally with consistent top alignment and equal spacing. Organise page variations vertically under the related main page to help teams switch between files easily.
+
+## Design Tips
+
+**Understanding clickbounds** — When you start using Figma, you might wonder why some components like buttons have larger bounding boxes than their visual appearance. This happens because of hidden clickbound layers (48px height) that follow WCAG guidelines for touch targets. This ensures your designs meet accessibility standards.
+
+**Working with placeholders** — Use placeholders when content isn't ready, as they're built into many EDS components. When your content is ready, replace placeholders by dragging new components over them while holding:
+
+- Mac: `Ctrl + Cmd`
+- PC: `Ctrl + Alt`
+
+## EDS Designer Sandbox
+
+The EDS designer sandbox in Figma provides a collaborative space where designers can share projects, explore ideas, and connect with the EDS core team. This community-driven environment helps foster innovation and ensures the design system continues to evolve based on real user needs.
+
+You can **[visit the sandbox](https://www.figma.com/design/hjpavZkeUoRfn1N7mhIniK/EDS-designer-sandbox?node-id=7517-2865&p=f&t=EDrTGNK3eP4VnxYq-11)** to explore ongoing projects and connect with other designers working with EDS. If you have ideas for new components or improvements to the design system, you can **[request new features](../../../support/support.md)** through our support channels.

apps/design-system-docs/versioned_docs/version-1.1.0/about/getting-started/design/getting_started_design.md

@@ -0,0 +1,61 @@
+---
+title: Getting started with design
+---
+
+You're ready to start designing with EDS. This guide helps you set up Figma access, understand our design workflow, and create your first designs with confidence.
+
+**Prerequisites:** Equinor Figma account access  
+**Time to get started:** 5-10 minutes
+
+## Figma Setup
+
+You'll need Figma access to work with EDS design components and libraries:
+
+**Get Figma access** — Apply through internal Equinor resources or contact your team administrator for help with account setup.
+
+**Join your design team** — Contact your team admin to join an existing team, or search for your team in Figma and request access.
+
+For detailed setup instructions, permissions guidance, and workspace organisation, see our [complete Figma guide](figma.md).
+
+## Start Designing
+
+Once you have Figma access, follow these specific steps to create your first EDS design:
+
+**1. Configure your Figma workspace**
+
+- Open Figma preferences and change nudge amount to 8px (matches EDS grid system)
+- Enable the EDS component library in your file's Assets panel
+- Create a new frame using standard screen sizes (1440px width for desktop)
+
+**2. Build your first interface**
+
+- Start with layout components like `TopBar` or `SideSheet` for navigation
+- Add content using `Typography` components for headings and body text
+- Include interactive elements like `Button` or `TextField` components
+- Use `Icon` components from the EDS icon library for visual elements
+
+**3. Apply EDS design principles**
+
+- Use the 8px grid system for consistent spacing between elements
+- Apply colour tokens for backgrounds, text, and interactive states
+- Ensure minimum 3:1 contrast ratio for text (use EDS colour combinations)
+- Set focus states for all interactive elements
+
+**4. Test your design**
+
+- Preview your design using Figma's prototype mode
+- Check that all interactive elements have proper spacing (minimum 44px touch targets)
+- Verify colour contrast meets accessibility standards
+
+For detailed component usage, workspace setup, file organisation, and advanced Figma techniques, see our [complete Figma guide](figma.md).
+
+## Next Steps
+
+Ready to advance your EDS skills? Here are specific next steps to help you grow:
+
+- **Explore advanced components** — Try data visualisation, navigation, or form components for complex interfaces
+- **Join design community channels** — Connect with other designers using EDS and share experiences
+- **Propose new components** — Submit requests for components not currently in the system
+- **Create design variations** — Learn to customise components whilst maintaining consistency
+
+Need help? Visit our [Support page](../../../support/support.md) for community channels and office hours.

apps/design-system-docs/versioned_docs/version-1.1.0/about/getting-started/develop/citizen_developers.md

@@ -0,0 +1,62 @@
+# Citizen Developers
+
+You can create professional, brand-aligned solutions using low-code tools whilst maintaining the consistency and quality that EDS provides. Our Power Platform integration works seamlessly with the Microsoft 365 tools you already use daily.
+
+## Getting Started
+
+We've made it straightforward to begin building with EDS. You can be up and running in just a few minutes by following these steps:
+
+1. **Access Power Apps** through your Microsoft 365 account
+2. **Download EDS templates** from the links provided below
+3. **Import templates** into your development environment or workspace
+4. **Start building** using pre-configured components and layouts
+
+## Available Tools
+
+### Power Apps
+
+<!-- markdownlint-disable-next-line MD033 -->
+We offer a Power Apps canvas app template with pre-configured components, layout, theming, and interaction patterns aligned to the <abbr title="Equinor Design System">EDS</abbr> guidelines as far as the platform allows. Embedded in-app documentation covers usage, configuration, accessibility, and extension points so you can adapt safely without breaking consistency.
+
+* Uses EDS colour, spacing, and typography tokens where technically supported
+* Includes common screen patterns (dashboard, form, list, detail)
+* Provides accessible defaults (labels, focus order, contrast guidance)
+* Exposes clearly named components for reuse and replacement
+* Documents customisation boundaries and recommended extension steps
+
+Start by importing the template, reviewing the built-in guidance, and then tailoring the documented configuration areas to keep solutions maintainable and compliant.
+
+**Preview the template**: [Canvas Apps Template](https://apps.equinor.com/edspowerapps) (Equinor users only)
+
+**Template available**: [EDS Template download and importing instructions](https://apps.equinor.com/edspadl) (Equinor users only)
+
+### Power BI
+
+We offer light-themed templates covering common business scenarios, with pre-configured charts, layouts, and styling that align with EDS principles. These templates ensure your dashboards maintain consistent visual presentation across all your business intelligence solutions.
+
+**Preview the template**: [Power BI Preview](https://apps.equinor.com/edspbi)
+
+**Template available**: [Power BI EDS Template (PBIX)](pathname:///assets/eds-pbi-template-v2.pbix)
+
+**Theme available**: [Power BI EDS Theme (JSON)](pathname:///assets/eds-pbi-theme-v2.json)
+
+We're continuously expanding this collection with more examples and scenarios to support your diverse reporting needs.
+
+## Best Practices
+
+- Use provided templates as your foundation rather than starting from scratch
+- Follow EDS colour and typography guidelines when customising elements
+- Test your solutions across different devices to ensure responsive behaviour
+- Ensure proper colour contrast in all custom elements
+- Include alternative text for images and visual components
+- Test keyboard navigation functionality
+
+## Getting Support
+
+Connect with other citizen developers through internal Power Platform channels and join our regular office hours for hands-on help with your projects. Whether you need assistance with templates, components, or brand compliance, we're here to help.
+
+For comprehensive support information and contact details, visit our [Support page](../../../support/support.md).
+
+## Next Steps
+
+Once you're comfortable with basic template usage, explore advanced customisation options and learn about creating reusable components for your team. We encourage you to contribute feedback to help us continuously improve EDS templates and resources for the entire citizen developer community.

apps/design-system-docs/versioned_docs/version-1.1.0/about/getting-started/develop/getting_started_development.md

@@ -0,0 +1,68 @@
+---
+title: Getting started with development
+---
+
+import Prerequisites from '@site/src/components/Prerequisites';
+
+Welcome to building with EDS! Get production-ready React components, full TypeScript support, and everything you need to create consistent, accessible applications.
+
+**Prerequisites:** <Prerequisites minimal />  
+**Time to get started:** 10-15 minutes
+
+## Getting Started
+
+Install the core React components:
+
+```bash
+npm install @equinor/eds-core-react
+# or
+yarn add @equinor/eds-core-react
+```
+
+Import and use components in your React application:
+
+```tsx
+import { Button, Typography } from '@equinor/eds-core-react'
+
+function App() {
+  return (
+    <div>
+      <Typography variant="h1">Welcome to EDS</Typography>
+      <Button variant="contained">Get Started</Button>
+    </div>
+  )
+}
+```
+
+For consistent styling, install and use design tokens:
+
+```bash
+npm install @equinor/eds-tokens
+```
+
+```javascript
+import { tokens } from '@equinor/eds-tokens'
+
+const { typography, colors } = tokens
+
+const styles = {
+  fontSize: typography.heading.h1.fontSize,
+  color: colors.interactive.primary__resting.rgba,
+}
+```
+
+## Key Features
+
+**TypeScript support:** Full autocomplete, type checking, and inline documentation included.
+
+**Accessibility built-in:** Every component follows WCAG 2.1 AA standards with semantic HTML structure, keyboard navigation, proper colour contrast, and screen reader compatibility.
+
+**Complete documentation:** Each component includes prop definitions, TypeScript types, interactive examples, and accessibility considerations.
+
+## Common Issues
+
+**TypeScript errors:** Check import paths and ensure TypeScript version is <Prerequisites />  
+**Build issues:** Verify peer dependencies match requirements  
+**Runtime problems:** Confirm styled-components version compatibility
+
+Need help? Visit our [Support page](../../../support/support.md) for GitHub repository, community discussions, and office hours.

apps/design-system-docs/versioned_docs/version-1.1.0/about/getting-started/getting_started.md

@@ -0,0 +1,20 @@
+# Getting started
+
+Ready to start building with EDS?<br /><br />
+Whether you're designing in Figma, developing with React, or building solutions with low-code tools, we've created tailored guidance to help you succeed.
+
+Choose your role below to jump straight into the resources and steps that matter most for your work.
+
+## Choose Your Path
+
+**As a designer**, you'll work with our Figma component libraries and design tokens. Access comprehensive documentation, usage guidelines, and accessibility considerations that help you create inclusive designs that translate smoothly to development. [Start your design journey ›](./design/getting_started_design.md)
+
+**As a developer**, install our React component library via `npm` and start building with production-ready components. You'll get full TypeScript support, thorough documentation, and practical examples for proper implementation. [Get coding with EDS ›](./develop/getting_started_development.md)
+
+**As a citizen developer**, explore our Power Platform templates and component libraries. Use ready-made templates for Power Apps and Power BI that follow EDS principles, helping you create professional solutions with familiar low-code tools. [Build with Power Platform ›](./develop/citizen_developers.md)
+
+**As a team or project lead**, start with our contribution guidelines and join our community channels. Connect with other teams, access regular office hours, and learn about upcoming features that benefit your projects. [Lead with EDS ›](team_roles.md)
+
+## What's Next
+
+After you're comfortable with the basics, explore advanced topics like custom theming, contributing new components, or integrating EDS into existing projects through our [community channels](../../support/support.md).