docs(design-system-docs): redesign 2.0.0-beta documentation site - #4975
Closed
alexlvrs wants to merge 14 commits into
Closed
docs(design-system-docs): redesign 2.0.0-beta documentation site#4975alexlvrs wants to merge 14 commits into
alexlvrs wants to merge 14 commits into
Conversation
alexlvrs
requested review from
Chibuzor-Nwemambu,
millus,
pomfrida and
vnys
as code owners
June 9, 2026 13:21
alexlvrs
changed the title
Author
|
@eddiman - no rush - Did a branch has it had load UI change, seems it has lot conflicts that seems to be just to be due to restructure but better to have your eyes. Please, let me know if something isn't right from my way too for next time! Merci Merci |
Contributor
There was a problem hiding this comment.
Pull request overview
Redesigns the design-system-docs site for the EDS 2.0.0-beta (Next) documentation experience, introducing new landing pages (homepage sections, Foundation, Getting started, About), a tabbed component-doc layout, and updated site infrastructure (client modules, webpack resolving) to support embedded Storybook content and workspace package consumption.
Changes:
- Introduces new landing pages and homepage section components, plus a reworked footer/navigation structure for the redesigned docs IA.
- Migrates/expands Next docs content (MD/MDX) to a consistent tabbed component documentation layout and adds a component gallery page with live previews.
- Updates docs-site tooling and infrastructure (client modules, webpack aliases, templates/commands) to support the new layout and monorepo workspace package resolution.
Reviewed changes
Copilot reviewed 85 out of 87 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| prerequisites.json | Updates displayed prerequisite versions used by docs tooling/components. |
| pnpm-lock.yaml | Adds workspace links for @equinor/eds-icons and @equinor/eds-utils to the docs app lockfile. |
| packages/eds-core-react/src/components/next/Button/Button.stories.tsx | Centers Button story layout in Storybook docs. |
| packages/eds-core-react/package.json | Adds /next export map entries and CSS subpath export for EDS 2.0 bundle. |
| apps/design-system-docs/src/theme/Footer/index.tsx | Replaces config-driven footer links with a fixed multi-column footer + social icons. |
| apps/design-system-docs/src/pages/index.tsx | Replaces old homepage layout with composed HomepageSections. |
| apps/design-system-docs/src/pages/index.module.css | Removes unused homepage CSS module styles. |
| apps/design-system-docs/src/pages/getting-started.tsx | Adds a new “Getting started” landing page with role-based cards. |
| apps/design-system-docs/src/pages/getting-started.module.css | Styles for the new “Getting started” landing page. |
| apps/design-system-docs/src/pages/foundation.tsx | Adds a new “Foundation” landing page with topic cards. |
| apps/design-system-docs/src/pages/foundation.module.css | Styles for the new “Foundation” landing page. |
| apps/design-system-docs/src/pages/about.tsx | Adds a new “About” landing page with team + contact sections. |
| apps/design-system-docs/src/pages/about.module.css | Styles for the new “About” landing page. |
| apps/design-system-docs/src/components/HomepageSections/styles.module.css | New large stylesheet for redesigned homepage sections. |
| apps/design-system-docs/src/components/HomepageSections/index.tsx | New homepage sections implementation (Hero/Why/Category/Resources/Contribute). |
| apps/design-system-docs/src/components/HomepageFeatures/styles.module.css | Removes legacy homepage features styles. |
| apps/design-system-docs/src/components/HomepageFeatures/index.tsx | Removes legacy homepage features component. |
| apps/design-system-docs/src/clientModules/sbIframeNoScroll.ts | Adds a client module to suppress Storybook iframe scrollbars. |
| apps/design-system-docs/src/clientModules/foundationDropdownNav.ts | Adds click interception so the Foundation dropdown label navigates to /foundation. |
| apps/design-system-docs/sidebars.ts | Restructures sidebars and adds sections (e.g. Surfaces) and new Getting started structure. |
| apps/design-system-docs/package.json | Adds @equinor/eds-icons and @equinor/eds-utils dependencies to the docs app. |
| apps/design-system-docs/docusaurus.config.ts | Adds client modules, webpack aliases/fallbacks for workspace packages, and navbar updates. |
| apps/design-system-docs/docs/support/support.mdx | Converts Support page to MDX and introduces resource-card layout. |
| apps/design-system-docs/docs/support/support.md | Removes old Support markdown page. |
| apps/design-system-docs/docs/resources/resources.md | Removes old Resources markdown page. |
| apps/design-system-docs/docs/foundation/accessibility.md | Replaces plain links with styled resource cards for accessibility resources. |
| apps/design-system-docs/docs/components/surfaces/toolbar.md | Converts surfaces doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/surfaces/side_sheet.md | Converts surfaces doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/surfaces/divider.md | Adds a Divider surfaces doc using the new tabbed layout and Storybook embed. |
| apps/design-system-docs/docs/components/surfaces/card.md | Converts Card surfaces doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/surfaces/accordion.md | Converts Accordion surfaces doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/navigation/topbar.md | Converts navigation doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/navigation/tabs.md | Converts navigation doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/navigation/table_of_contents.md | Converts navigation doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/navigation/stepper.md | Converts navigation doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/navigation/sidebar.md | Converts navigation doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/navigation/pagination.md | Converts navigation doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/navigation/menu.md | Converts navigation doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/navigation/link.md | Converts Link doc to full tabbed layout with embedded Storybook iframes. |
| apps/design-system-docs/docs/components/navigation/drawer.md | Converts navigation doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/navigation/breadcrumbs.md | Converts navigation doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/navigation/app_launcher.md | Converts navigation doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/inputs/toggle_button.md | Converts inputs doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/inputs/textfield.md | Converts TextField doc to full tabbed layout with embedded Storybook iframes. |
| apps/design-system-docs/docs/components/inputs/textarea.md | Converts TextArea doc to full tabbed layout; adjusts iframe heights; removes stray snippet. |
| apps/design-system-docs/docs/components/inputs/slider.md | Converts inputs doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/inputs/selection_controls.md | Converts Selection controls doc to tabbed layout; adds embeds and structure/guidance sections. |
| apps/design-system-docs/docs/components/inputs/search.md | Converts Search doc to full tabbed layout with embedded Storybook iframes. |
| apps/design-system-docs/docs/components/inputs/input.md | Converts Input doc to full tabbed layout with embedded Storybook iframes. |
| apps/design-system-docs/docs/components/inputs/field.md | Converts Field doc to full tabbed layout with embedded Storybook iframes. |
| apps/design-system-docs/docs/components/inputs/button.md | Converts Button doc to full tabbed layout with embedded Storybook iframes. |
| apps/design-system-docs/docs/components/inputs/autocomplete.md | Converts inputs doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/feedback/snackbar.md | Converts feedback doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/feedback/scrim.md | Converts feedback doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/feedback/progress_indicators.md | Converts feedback doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/feedback/dialog.md | Converts feedback doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/feedback/banner.md | Converts Banner doc to full tabbed layout with embedded Storybook iframes. |
| apps/design-system-docs/docs/components/data-display/tooltip.md | Converts Tooltip doc to full tabbed layout with embedded Storybook iframes. |
| apps/design-system-docs/docs/components/data-display/table.md | Converts data-display doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/data-display/table_data_grid.md | Converts data-display doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/data-display/popover.md | Converts data-display doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/data-display/list.md | Converts data-display doc to tabbed layout skeleton. |
| apps/design-system-docs/docs/components/data-display/icon.md | Converts Icon doc to full tabbed layout with embedded Storybook iframes. |
| apps/design-system-docs/docs/components/data-display/divider.md | Removes old Divider doc under data-display category. |
| apps/design-system-docs/docs/components/data-display/chip.md | Converts Chip doc to full tabbed layout with embedded Storybook iframes. |
| apps/design-system-docs/docs/components/components.mdx | Adds a Components gallery landing page with live previews and category grouping. |
| apps/design-system-docs/docs/components/components.md | Removes old Components landing markdown page. |
| apps/design-system-docs/docs/about/team/team.css | Significantly expands styling for About/Team layouts and component gallery visuals. |
| apps/design-system-docs/docs/about/team/team-function.tsx | Updates Team card markup/classes to match new styles. |
| apps/design-system-docs/docs/about/getting-started/team_roles.mdx | Adds new Team Leads guide with custom layout, role cards and accordion. |
| apps/design-system-docs/docs/about/getting-started/team_roles.md | Removes old Team roles markdown page. |
| apps/design-system-docs/docs/about/getting-started/getting_started.mdx | Adds redirect doc to new /getting-started page. |
| apps/design-system-docs/docs/about/getting-started/getting_started.md | Removes old Getting started markdown page. |
| apps/design-system-docs/docs/about/getting-started/develop/getting_started_development.mdx | Adds redesigned development getting started guide in MDX layout. |
| apps/design-system-docs/docs/about/getting-started/develop/getting_started_development.md | Removes old development getting started markdown page. |
| apps/design-system-docs/docs/about/getting-started/develop/citizen_developers.mdx | Adds redesigned citizen developers guide in MDX layout. |
| apps/design-system-docs/docs/about/getting-started/develop/citizen_developers.md | Removes old citizen developers markdown page. |
| apps/design-system-docs/docs/about/getting-started/design/getting_started_design.mdx | Adds redesigned design getting started guide in MDX layout. |
| apps/design-system-docs/docs/about/getting-started/design/getting_started_design.md | Removes old design getting started markdown page. |
| apps/design-system-docs/docs/about/about_eds.mdx | Adds new About EDS doc page using the new layout styling. |
| apps/design-system-docs/docs/about/about_eds.md | Removes old About EDS markdown page. |
| .gitignore | Adds ignore pattern for local notes. |
| .claude/commands/design-audit.md | Adds a new Claude command for design audit report generation. |
| .claude/commands/create-component-doc.md | Updates component-doc generator instructions to the new tabbed layout standard. |
| .claude/CLAUDE.md | Adds docs-site constraints (Next-only modifications and scoping guidance). |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
Comment on lines
+161
to
+162
| <Link to="docs/Next/foundation" className={styles.bentoCard}> | ||
| <div className={styles.bentoTopRow}> |
| </span> | ||
| </Link> | ||
|
|
||
| <Link to="docs/Next/components" className={styles.bentoCard}> |
Comment on lines
+297
to
+299
| <Link to="docs/Next/resources" className={styles.resourcesFootnote}> | ||
| See all resources | ||
| <ArrowForward /> |
Comment on lines
14
to
+17
| <div> | ||
| <strong>Checkbox</strong> | ||
| <iframe | ||
| class="sb-iframe" | ||
| src="https://storybook.eds.equinor.com/iframe.html?globals=&args=&id=eds-2-0-beta-inputs-selection-controls-checkbox--introduction" | ||
| width="100%" | ||
| height="70" | ||
| frameborder="1" | ||
| ></iframe> | ||
| </div> | ||
|
|
||
| </div> |
Comment on lines
+45
to
+46
| # | ||
|
|
|
|
||
| <div className="resource-cards"> | ||
|
|
||
| <a className="resource-card" href="https://equinor.slack.com/archives/C01S2B tried" target="_blank" rel="noopener noreferrer"> |
Comment on lines
+117
to
+121
| to="https://www.github.com/equinor/design-system" | ||
| className="footer__social-link" | ||
| aria-label="EDS Github (opens in new tab)" | ||
| target="_blank" | ||
| rel="noopener noreferrer" |
|
|
||
| ## Contact Us | ||
|
|
||
| Ready to connect? Visit our [Support page](../support/support.md) for office hours, community channels, and direct contact information. |
… and components - Migrate docs from .md to .mdx (about, getting-started, components) - Add new standalone pages: about.tsx, getting-started.tsx - Replace HomepageFeatures with HomepageSections component - Rework homepage, footer, sidebar config, and custom CSS - Update docusaurus.config.ts and sidebars.ts
Add ./next and ./next/index.css export paths so design-system-docs can import EDS 2.0 components and styles.
Restore components.md to match the current production site at eds.equinor.com/docs/components/ and remove the mdx override.
… mdx Revert versioned_docs/version-1.1.0 components back to original .md to match eds.equinor.com. Keep docs/components/components.mdx with live EDS 2.0 component previews.
Keep version-1.1.0 pages unchanged — new work targets 2.0.0-beta only.
These pages should stay as-is for v1.1.0. New getting-started content targets the 2.0.0-beta standalone page.
…-beta These belong in docs/ (2.0.0-beta), not version-1.1.0.
- Use real EDS components as card illustrations (Icon, Tooltip, Banner with icons, Chip with accent tone, Link with underline) - Add Switch card and Divider card for full 2.0 coverage - Merge Selection Controls and Switch into one card - Make PersistentTooltip wrapper for always-visible tooltip preview - Set card preview backgrounds to white
…emplate - Replace PersistentTooltip with static CSS-only mock on components page to prevent tooltip from rendering in the top layer and overlapping the navbar - Remove stray code snippet from textarea page that appeared above the tab bar - Increase iframe heights for textarea stories (auto-grow, character count, states) so content is fully visible without scrolling - Update create-component-doc template to use tabbed layout matching actual page structure and add rule against placing content between intro and tabs
Redesign the EDS documentation site for the 2.0.0-beta version with a new tabbed component page layout, foundation page, and updated styling. Component docs: - Add tabbed layout (When to use, Structure, Guidelines, Accessibility, Figma, Do's and don'ts) across all component pages - Add Storybook iframe embeds with measured heights for EDS 2.0 beta components (Button, TextArea, TextField, Search, Input, Field, Selection Controls, Chip, Icon, Tooltip, Banner, Link, Divider) - Write detailed guidelines, accessibility notes, and Figma instructions for each new component - Move Divider from data-display to surfaces category Site infrastructure: - Add Foundation page with custom layout and dropdown nav - Convert resources and support pages from md to mdx - Add client modules for foundation dropdown nav and Storybook iframe scroll control - Extensive custom CSS for component doc tabs, hero banners, component gallery cards, and page layouts - Update docusaurus.config.ts with new navigation structure Tooling: - Update create-component-doc template with tabbed layout structure - Add design-audit command for auditing component docs - Update CLAUDE.md with git workflow guidance
Reverts an erroneous rebase artifact that downgraded react/reactDom 19 to 18 and is inconsistent with the lockfile (react 19.2.7).
eddiman
marked this pull request as draft
June 11, 2026 08:15
Contributor
|
Superseded by the split of this work into two stacked PRs:
Closing this monolithic PR in favour of the split. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Redesign the EDS documentation site for the 2.0.0-beta version with a new tabbed component page layout, foundation page, and updated styling.
create-component-doctemplate with tabbed layout, addeddesign-auditcommandTest plan