docs(design-system-docs): redesign 2.0.0-beta documentation site - #4989
Draft
eddiman wants to merge 8 commits into
Draft
docs(design-system-docs): redesign 2.0.0-beta documentation site#4989eddiman wants to merge 8 commits into
eddiman wants to merge 8 commits into
Conversation
This was referenced Jun 11, 2026
eddiman
force-pushed
the
docs/redesign-2.0.0-beta
branch
from
June 11, 2026 08:41
4b3fb79 to
3b50a94
Compare
eddiman
force-pushed
the
docs/redesign-2.0.0-beta
branch
from
July 13, 2026 10:29
c3bf47f to
d440399
Compare
… components Restructure the redesigned documentation site onto one reusable system, removing copy-paste, multiple sources of truth, and DOM-hack client modules. - Add shared components (Hero, SectionHeading, IconCard/IconCardGrid, CtaSection, TeamCard, Icon, StorybookEmbed) and single-source data modules; refactor the landing pages and MDX docs onto them. - Dogfood @equinor/eds-icons and @equinor/eds-tokens; drop hardcoded inline SVGs and literal hex/px values. - Fix dark mode: base text colour and neutral surfaces that did not flip now use Infima variables; accent/brand stays on EDS tokens. - Make the footer config-driven; replace the Foundation hover-menu dropdown and the Storybook-iframe scroll hack with idiomatic Docusaurus (plain link, StorybookEmbed component). - Unify all cards onto IconCard; migrate 101 Storybook iframes to StorybookEmbed; centralise Tabs/TabItem via theme/MDXComponents. - Delete legacy CSS (resource-card, about-*, component-gallery, role-card, mega-menu) and dead per-page module.css; consolidate custom.css and tokenise shadow/radius/spacing. - Fix correctness bugs: duplicate sidebar category, editUrl 404, broken Slack link, class to className, content max-width, hero jump, component-gallery collapse at wide viewports. Add REDESIGN_CONSOLIDATION.md documenting the work.
Reduce the docs site to two explicit layout templates:
- Landing — <DocsLanding> (MDX) or @theme/Layout (React pages) + <Hero> +
<section className="docs-section"> + <SectionHeading> + cards. Covers the
overview pages (/, /foundation, /getting-started, /about, components,
resources, support) and the getting-started guides.
- Doc — full-width auto-hero via the docs-doc-id-{foundation,components}/
styling (scoped :not(:has(.docs-landing))); component reference docs add the
tab bar. Covers foundation subpages and component reference docs.
- Add the DocsLanding component (renamed the .about-page full-width breakout to
.docs-landing and centralised it in custom.css).
- Convert components/resources/support and the getting-started guides to the
explicit landing structure; drop the .about-hero/.about-section system.
- Fix a duplicate hero (hide Docusaurus's auto doc-title header under
.docs-landing) and inner-container full-width (scope the breakout to
main:has(.docs-landing) > .container).
- Rename team.css -> accordion.css (now only holds the FAQ accordion).
Update REDESIGN_CONSOLIDATION.md with the final two-layout reference.
Add a "Which layout each area uses" table to REDESIGN_CONSOLIDATION.md, spelling out that component reference docs (incl. components/data-display/*) use the Doc layout with the component-doc-tabs variant, and only the overview/guide pages use the Landing layout.
…ix CtaSection nested-<p> hydration error
…width hero Rework the component reference docs into a standard three-column Docusaurus layout (left componentsSidebar + content + right TOC) with a full-width hero band on top, replacing the previous full-bleed tabbed layout that hid the sidebar and TOC. - Flatten the component-doc-tabs into sequential sections so headings feed the TOC - New component-doc template: hide_title + description frontmatter (lead doubles as SEO meta); in-body h1 + intro removed, leaving exactly one h1 (the hero) - Swizzle DocItem/Layout to render the hero band above the content/TOC row, breaking out to fill the main area right of the sidebar - Drop the components arm from the foundation full-width CSS and delete the dead component-doc-tabs block
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
1 participant
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.
What
Redesign of the 2.0.0-beta documentation site.
about,foundation,getting-started(src/pages/*).HomepageSections(replacesHomepageFeatures), reworkedFooter, client modules for the foundation dropdown nav and Storybook-iframe no-scroll behaviour..mdto.mdx(about, getting-started, resources, support, components overview) with livenextcomponent previews.<Tabs>(When to use / Structure / Guidelines / Accessibility / Figma / Do's & Don'ts) withscrolling="no"on embedded Storybook iframes.custom.csswork,docusaurus.config.ts+sidebars.tsupdates, team-page styling.Resolving
@equinor/eds-core-react/next(preserves #4395)The components overview page renders live
nextcomponents. Rather than re-adding./nextto the package's committedexports(which would leak/nextinto stable releases and undo #4395), the docs build resolves it via a webpack alias in the existingeds-resolverplugin (docusaurus.config.ts), pointing at the built artifacts:@equinor/eds-core-react/next→dist/esm-next/index.next.js@equinor/eds-core-react/next/index.css→build/index.csspackage.jsonis left untouched, so #4395's beta-only export injection (publish_core_react.yaml) stays the single mechanism for shipping/next.Build-order note: the alias targets built output, so
eds-core-reactmust be built before the docs (the same requirement the existing eds-tokens/icons/utils aliases already impose).Scope
apps/design-system-docs/**pnpm-lock.yaml(docs-app deps:eds-icons,eds-utils)No published-package changes. Self-contained — bases on
main.