* ✨ feat: Add GOD_PRAKSIS_ALL_TEMA_QUERY and related types for improved data fetching
🎨 style: Update globals.css to enhance accessibility for skip links
📝 docs: Enhance theme.d.ts with new data-text-prose attribute for prose text styling
🎉 feat: Implement HeroCube component for visual representation in the hero section
🎨 style: Create Hero.module.css for styling the hero components
🎉 feat: Develop GodPraksisIntroHero component for the hero section
🎉 feat: Create TemaHero component for displaying theme navigation
🎉 feat: Implement HeroCardList for rendering theme cards
🎉 feat: Add HeroIntro component for displaying theme title and description
🎉 feat: Create HeroSelectButton for toggling theme selection
🎉 feat: Build page.tsx to fetch and display themes with the new components
* 🚚 Port over linkcard
* 💄 Replicate gp figma card
* 🎉 Synced hero
* ✨ Implemented GP frontpage
* 🔍 Add god-praksis metadata
* 🎉 Fetch and parse svg from sanity
* 🎉 Update use of linkcard on gp-pages
* 🎉 Use LinkCard on overview-pages
* Update aksel.nav.no/website/app/dev/(god-praksis)/god-praksis/page.tsx
* Update aksel.nav.no/website/app/dev/(god-praksis)/god-praksis/page.tsx
* 🐛 Clean up linkcard types
* ✨ Added data-fetching for tema-pages
* ✨ Gp-hero is now a self-fetching component
* ✨ Migrated state-handling for hero-banner
* ✨ Migrated CSS and interactions for HeroModule
* 🎉 Implemented chip-navigation logic
* 🐛 margin-animation did not work
* 🐛 Used undefined 'open' value
* ⚡ Optimize article mapping
* 📝 Add better metadata to categories
* ✨ Render articles as LinkCard
* ⚡ Fix URL parameter handling in GodPrakisChipsNavigationButton and add prefetch on hover
* 🐛 Chips nav had duplicate data
* 💄 Synced layout with Figma
* 🔍 Added metadata
* 🎨 Refactor padding in search form and improve header logo visibility based on screen size
💄 Add icon styling for GodPraksisHeroButton and create GodPraksisTaxonomyTag component
* 🐛 Add spacing below hero description
* 🐛 Remove spacing from description when no element below
* 🐛 Use data-attrb since last-child selector cant work
* 💄 Use new linear gradient for darkmode hero banner
* 🐛 Add missing focus-markings, word break for title
* 🐛 Use updated colors for fallback image
* [Appdir] God praksis article page Part 1 (#3743)
* 🎉 Scaffolding for gp article pages
* 🐛 Add spacing top to non-first child headings
* ✨ Implemented SystemPanel component
* ✨ Added sanity login check to outdated panel
* [Appdir] God praksis article page Part 2 (#3746)
* ✨ Added authors
* 📝 Formatting
* ✨ Added related articles content
* ♻️ Refactor UnderTemaLink to inline implementation with NextLink
* ✨ Integrate EditorPanel into multiple components and remove unused styles
* 🔍 Add metadata to page
* 🔥 Remove TOC from GP pages
* 🐛 Remove duplicate outdated panel render
* ✨ Add GodPraksisFeedback component with context and states for user feedback
* ✨ Added form-state and validation clientside
* ✨ Added RCS auth
* ♻️ Optimize slack-user lookup, inline inside action
* ✨ Refactor GodPraksisFeedback components and enhance page layout with relevant articles
* 💄 Remove bg from bilde-caption
* 💄 Fix list layout
* 🐛 Editorpanel dir had extra space
* Update aksel.nav.no/website/app/_ui/toc/TableOfContents.tsx
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* 🐛 Avoid getting updated types for legacy-implementation
* 💄 Move related links
* Update aksel.nav.no/website/app/_ui/toc/TableOfContents.tsx
* Update aksel.nav.no/website/app/dev/(god-praksis)/god-praksis/artikler/[slug]/page.tsx
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* ✨ feat: Add GOD_PRAKSIS_ALL_TEMA_QUERY and related types for improved data fetching
🎨 style: Update globals.css to enhance accessibility for skip links
📝 docs: Enhance theme.d.ts with new data-text-prose attribute for prose text styling
🎉 feat: Implement HeroCube component for visual representation in the hero section
🎨 style: Create Hero.module.css for styling the hero components
🎉 feat: Develop GodPraksisIntroHero component for the hero section
🎉 feat: Create TemaHero component for displaying theme navigation
🎉 feat: Implement HeroCardList for rendering theme cards
🎉 feat: Add HeroIntro component for displaying theme title and description
🎉 feat: Create HeroSelectButton for toggling theme selection
🎉 feat: Build page.tsx to fetch and display themes with the new components
* 🚚 Port over linkcard
* 💄 Replicate gp figma card
* 🎉 Synced hero
* ✨ Implemented GP frontpage
* 🔍 Add god-praksis metadata
* 🎉 Fetch and parse svg from sanity
* 🎉 Update use of linkcard on gp-pages
* 🎉 Use LinkCard on overview-pages
* Update aksel.nav.no/website/app/dev/(god-praksis)/god-praksis/page.tsx
* Update aksel.nav.no/website/app/dev/(god-praksis)/god-praksis/page.tsx
* ✨ Added theming-support to appdir
* 📝 Added changelog docs for theme class change
* ♻️ Use inline head to set local styles instead of css-modules
* ✨ Setup overview-page
* 🐛 Use inline styles instead of Head element from nextjs
* WIP: V1 list view
* 💄 Align overview heading with regular page heading
* 🐛 Moved margin-bottom to top for overview grid
* 🎉 Add overview toggle for component pages
* 🎉 Added overview-pages to sidebar
* 🎉 Added routing support for overview pages
* 🎉 Setup staticparams and metadata for overview-pages
* 🚚 Moved overview components out to now dir
* ✨ Added overview support for komponenter, templates and grunnleggende
* 🔥 Removed unused sanity-field
* 🐛 Hide fallback-svg
* 🐛 Fix misspelling
* 🎉 Added Iconpage filtering and navigation
* 🎉 Added modal view
* 🐛 Fixed searchParams type
* 🎉 Added empty-state
* 🔥 Removed forced use-client for emptystate
* 🎉 Support svg fetch
* 🔥 Refactor IconPage components and remove unused sidepanel
* 🎉 Added links
* 📝 Added metadata
* 🐛 Resolve impure css module class
* 🐛 Fix iconName validation logic in IconPage component
* 🎨 Improve layout and styling in IconPage components
* 🎨 Update HStack component to use 'as="ul"' for semantic HTML
* ✨ Added icon-page to sidebar
* Update aksel.nav.no/website/app/dev/(designsystemet)/_ui/sidebar/Sidebar.util.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Update aksel.nav.no/website/app/dev/(designsystemet)/_ui/icon-page/IconPage.button.tsx
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* ⚡ Added zod-validation and debounce to search
* 🏷️ Resolved updated types
* ⚡ Use clientside updates for icon-page
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* ✨ Added theming-support to appdir
* 📝 Added changelog docs for theme class change
* ♻️ Use inline head to set local styles instead of css-modules
* ✨ Setup overview-page
* 🐛 Use inline styles instead of Head element from nextjs
* WIP: V1 list view
* 💄 Align overview heading with regular page heading
* 🐛 Moved margin-bottom to top for overview grid
* 🎉 Add overview toggle for component pages
* 🎉 Added overview-pages to sidebar
* 🎉 Added routing support for overview pages
* 🎉 Setup staticparams and metadata for overview-pages
* 🚚 Moved overview components out to now dir
* ✨ Added overview support for komponenter, templates and grunnleggende
* 🔥 Removed unused sanity-field
* 🐛 Hide fallback-svg
* 🐛 Fix misspelling
* ✨ Setup appdir cookie-banner view
* 🎉 Moved cookie-handling to server-actions
* 🐛 Remove impure css module use
* 🐛 Use forced dynamic to allow consent-banner
* 📝 Add docs
* 🎉 Moved consent doc-page
* ♻️ Rename cookie-actions to use 'action'-suffix
* ✨ Added theming-support to appdir
* 📝 Added changelog docs for theme class change
* ♻️ Use inline head to set local styles instead of css-modules
* ✨ Setup overview-page
* 🐛 Use inline styles instead of Head element from nextjs
* WIP: V1 list view
* 💄 Align overview heading with regular page heading
* 🐛 Moved margin-bottom to top for overview grid
* 🎉 Add overview toggle for component pages
* 🎉 Added overview-pages to sidebar
* 🎉 Added routing support for overview pages
* 🎉 Setup staticparams and metadata for overview-pages
* 🚚 Moved overview components out to now dir
* ✨ Added overview support for komponenter, templates and grunnleggende
* 🔥 Removed unused sanity-field
* 🐛 Hide fallback-svg
* 🐛 Fix misspelling
* Update aksel.nav.no/website/app/dev/(designsystemet)/_ui/sidebar/Sidebar.tsx
* 🐛 Could not create overview-pages for grunnleggende or templates
* Remove unused CSS that causes issues when Combobox' ToggleListButton is skipped
This code removed wrapping of chips if ToggleListButton is hidden, and will only ever apply to the button otherwise. That does not need a flex layout.
* Add changeset
* ✨ Added theming-support to appdir
* 📝 Added changelog docs for theme class change
* ♻️ Use inline head to set local styles instead of css-modules
* 🐛 Use inline styles instead of Head element from nextjs
* 🚧 box migration scaffolding
* 🚚 boxnew -> darkside/boxnew
* 🚧 wip
* 🚧 working single substitution (pending lookup in replacements)
* ✅ working test
* import rename in output test
* ✅ import rename + tests
* use config comments, better import example
* commentblock function (append to string output) + update tests (failing)
* 🚧 almost good... needs to respect renamed imports
* ✅ passing tests
* ♻️ organize some utils
* 🧪 Added more tests
* cast JSXIdentifier type
* pass idempotency tests
* also refactor the usage when renaming a function
---------
Co-authored-by: Ken <ken.aleksander@gmail.com>
* ♻️ Update TOC feedback, add layout padding bottom
* 🐛 Added missing type
* 🐛 Fix missing spacing in intro-section
* 🎉 Added metadata for changelog view support in mønster pages
* 🎨 Refactor layout styles and enhance sidebar button animations
* 🎉 Added SEO support
* 🐛 Add page SEO image to start of image list
* 🔥 Remove reduntant early exit code
* 🐛 Open feedback in new tab
* 🐛 Update footer to use responsive layout
* 🐛 Moved theme-colors to viewmport config
* 🐛 Show mobile-menu earlier
* 🐛 Use local schema in sanity-typegen
* 📝 Typo
* ✨ Implemented codeblock header and codeblock
* ✨ Can now toggle betweem different code-views
* 🐛 Use Theme component to get color-scheme in CSS
* 💄 Updated padding, use custom theme
* ✨ Implemented custom prism-theme
* ✨ Use new prism-theme for propsseksjon
* 🎉 Use new codeblock for single code view
* 🐛 Add hover-effect for expander button
* ✨ Added provider and navigation support
* WIP: Add codeview block
* ✨ Enhance KodeEksempler with Suspense, toolbar, and improved props handling
* 🎨 Refactor CodeBlock component by removing unnecessary Theme wrapper and improving className handling
* ✨ Use local styles for kodeexample module
* 🐛 Add useclient
* 🐛 Use local css variable since css counter breaks at random
* ✨ Set up page-slug query logic
* ♻️ Inline TableOfContents in smaller modules
* 🎨 Refactor TableOfContents styles and update component structure
* 🎨 Enhance TableOfContents styles and structure for improved responsiveness and clarity
* ✨ Enhance TableOfContents component with feedback and changelog links; refactor queries for improved data handling
* 🚚 Co-localized layout in grouped ui dir
* ✨ Extract schema types from sanity
* 🐛 Update sidebar types to use new sanity schema-types
Bug: icon was marked as "new tab" but the icon for new tab is an box with the arrow stopping at the border. Having the new tab synonym here will cause missunderstandings.
Bug: icon was marked as "new tab" but the icon for new tab is an box with the arrow stopping at the border. Having the new tab synonym here will cause missunderstandings.
* root layout
* ✨ Added draftmode
* ✨ Setup boilerplate
* ✨ Setup grouping-dir
* ✨ Implemented header
* 💄 Made header sticky
* 🔒 Content security policy updated
* 🚚 Moved favicon to appdir
* 🔥 restore old frontpage
* 🚚 Moved sidebar to appdir
* ✨ Implemented sidebar loading
* ✨ Doc lyout
* 🐛 Add id for skiplink
* ✨ Added new footer
* 💄 Move skiplink further away
* 💄 Add more padding bottom sidebar
* ✨ Refactor header and sidebar components for improved layout and structure
* 📝 Uncomment some code
* 🔥 Removed user server directive from component and layouts
* 🐛 Center footer
* 🐛 Re-added support for chromatic connect
* 🔥 removed browser-token
* Update aksel.nav.no/website/app/_ui/footer/Footer.tsx
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* [Aksel.nav.no] Ported over global search to app-router (#3663)
* 🚚 Moved search-code closer to app router
* ✨ Added button and modal
* ⚡ Initial loading for recent articles
* ⚡ Query data from the server
* ✨ Generates parsed search-results
* ⚡ Added debounce
* ✨ Render hits
* ♻️ Limit articles for each field to 20
* 🐛 Revert form-layout to initial view
* 🐛 Build searchindex before website
* ✨ Pre-select text when re-opening search
* ✨ Enhance global search UI with improved layout and styling
* ✨ Refactor global search components to improve search functionality and UI
* ✨ Improve global search functionality and UI responsiveness
* ✨ Update global search UI and functionality with improved input handling and styling
* ✨ Refactor global search dialog and add Kbd component for keyboard shortcuts
* ⚡ removed reduntant suspense
* ✨ Refactor global search components for improved styling and functionality
* ✨ Refactor global search results rendering for improved performance and readability
* ✨ Update global search dialog and form for improved styling and accessibility
* ✨ Refactor global search components for improved layout and styling
* ✨ Refactor GlobalSearchHitCollection for improved styling and accessibility
* 🎨 Update global search configuration and styles for improved clarity and aesthetics
* 🎨 Update layout and styles for global search components for improved aesthetics and readability
* ✨ Refactor global search utilities and update styles for improved clarity and maintainability
* 🔧 Refactor global search queries and implement caching for improved performance and data retrieval
* ⚡ Preload cache for search
* 🔧 Refactor fetchArticles function to improve caching logic and remove unnecessary logging
* 🔥 Removed user server directive from component
* 🔥 Removed comments
* ⚡ Explicitly declare server-only component
* Update aksel.nav.no/website/app/_ui/global-search/GlobalSearch.fetch.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Update aksel.nav.no/website/app/_ui/global-search/GlobalSearch.fetch.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* 📝 Rename sanitiezedata
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* [Aksel.nav.no] Move Aksel-brand theme into app-router for use (#3668)
* 💄 Added global aksel-theme tokens
* ✨ Implement new Aksel-brand for theming
* [Aksel.nav.no] Updated MobileMenu for new ds-pages (#3670)
* 💄 Added global aksel-theme tokens
* ✨ Implement new Aksel-brand for theming
* ✨ Initial setup mobile-menu
* ✨ V1 mobile-menu component
* 💄 Update mobile navigation and global search responsiveness; adjust overlay color opacity
* 💄 Refine modal backdrop animation timing and opacity for smoother transitions
* 💄 Adjust pressed-sidebar state
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* 📝 Reposition sanity fields
* ✨ Added new standalone-category to sanity docs
* ✨ Added validation to make sure standalone articles dont overlap with sections
* 🐛 Always error out if using standalone articles until implemented
* 🔥 Removed temp removal of feature
* 🐛 Check for undefined slug
* [Aksel.nav.no] Implemented support for new lvl 1 articles (#3658)
* ✨ Added support for new lvl 1 articles
* 🧪 Added tests for new sidebar
* 🔥 Removed breadcrumb from WithSidebar layout
* 🐛 Revert to prod dataset
* ✨ Setup darkside migration
* ✨ Can now convert primitives spacing
* 🧪 Added more tests
* 📝 Docs for utils
* 📝 Changeset
* 📝 Typos
* [Darkside] ✨ Added migration for css, less and scss (#3598)
* ✨ Added migration for css, less and scsss
* Update @navikt/aksel/src/codemod/migrations.ts
* ✨ Make old px spacing space-1
* ✨ Use esbuild to inline local references
* ✨ Added js migration to space-tokens (#3600)
* ✨ Setup first iteration of token translation object
* ✨ Started mapping old to new tokens
* ♻️ Simplified repalcement logic
* ✨ Added tests for token-migration
* ✨ Replaces old token with new reference
* ✨ Handle overrides of tokens
* 🧪 Global messages storage
* 📝 Added migration
* 🐛 Initialize message list
* ✨ Customizable results messaging
* ✨ Customizable results messaging
* 🐛 Use replacement, not ref
* 📝 Only document found legacy-tokens, dont rename them
* 📝 Better comments
* ✨ Added context to remaining token updates
* ✨ Added comments to unsupported token
* ✨ Format comments better, remove duplicates
* 📝 Success message if no legacy-tokens found
* 🐛 Return updated source files
* 🐛 Reference valid replacement
* 🔥 Removed comments
* ✨ Added better messaging
* ✨ Better messaging structure
* 🧪 Added more tests
* 🧪 Tests for less, scss, css and js tokens
* 🐛 CSS hits were shown as scss and less hits
* 📝 Format messages better
* 📝 Format messages better
* ✨ Added js-migrations template
* Update test runner
* 🐛 Revert mistakes
* 🐛 Resolve testing rig
* ✨ Js token migration
* 📝 Better docs for JS migration
* 📝 Added missing lineshift
* ✨ Tooling setup
* ✨ Tooling setup with enquirer
* ✨ Tooling setup with enquirer
* ✨ Set up inquirier and enquirer to promt user for tasks
* ✨ Get legacy-data
* ✨ Now formats and prints progress
* ✨ Now formats and prints progress
* ⚡ Smarter scanning of updated tokens
* ⚡ Refactored status-code
* ✨ Now prints remaining files
* ✨ Smarter tailwind-regex
* 📝 Tell user we are scanning the files
* ✨ Moved transforms to new darkside location
* 🚚 Moved tests for js transforms
* 📝 Updated prettier config to ignore new test-files
* 📝 Moved css, less, scss tests
* 🐛 Resolved tests not running properly on less,scss setup
* WIP: tailwind config migration
* 📝 Added tailwind config for border-radius
* ✨ Strictly match tailwind-classes
* ♻️ Convert status obj to class
* ♻️ Compact regex parsing
* ♻️ Simplified regex-handling for new token lookup
* ✨ Added support for component tokens
* ⚡ Optimize lineNumber task
* 🐛 Inline regex-probe
* 🐛 Remove old merged code
* 🐛 Fix regex escape-characters
* Update @navikt/aksel/src/darkside/index.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* 🐛 Fix token-tests
* ✨ Now prints with token-name
* ♻️ Move files
* ♻️ Move printing to TokenStatus class
* ✨ Add comments to printout
* 🐛 Handle word boundaries
* ⚡ Pre-generate the regexes
* 🧪 More regex-tests
* 🧪 More regex-tests
* ⚡ Use built-in regexes
* ⚡ Only run codeshift on relevant files
* 🐛 No print for codemod status update
* ⚡ Only run codeshift on relevant files
* 📝 Added extra space
* 📝 Exit after codemod
* 📝 Removed temp logging
* 🐛 Await codeshift execution
* 🧪 Added tests for not imported JS-tokens
* ✨ Implemented tailwind migration code
* 🧪 @apply tests for tailwind transform
* 🐛 Handle spaces better for tailwind config
* 🐛 Handle prefixing of tailwind config correctly
* 🐛 Handles cases where empty collection was passed
* 🐛 makes sure to clean up match before parsing
* 🧪 More tailwind-codemod tests
* ⚰️ Removed moved code, renamed darkside -> spacing for migrations
* ♻️ Config cleanup part 1
* ♻️ Config cleanup part 2
* ♻️ Refactored runner
* ✨ Added run all migraitons task
* 🐛 Use destrucutred taskname
* 📝 Better naming
* 📝 More spesific import docs
* 🐛 Print filename correctly when token contains special characters
* 🐛 Update spacing migrations paths
* 🐛 Added new spacing-tokens to legacy config
* ✨ Initialize status directly in constructor
* ⬆️ yarn lock sync
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* 🐛 Handle cases where to is defined and from is undefined
* 🐛 Fix missing state-option when selecting ranged datepicker values
* Update @navikt/core/react/src/date/datepicker/DatePicker.stories.tsx
* Update @navikt/core/react/src/date/datepicker/DatePicker.stories.tsx
* 🧪 Added tests for new ranged-datepicker logic
* 🐛 Typo
* 🎨 Adjust padding in alert styles for consistency
* 🎨 Update chat bubble padding for improved consistency
* 🎨 Standardize padding in date and modal styles for consistency
* 🎨 Refactor padding in error summary styles for improved consistency
* 🎨 Adjust padding in file upload styles for improved consistency
* 🎨 Update padding in file upload styles for improved consistency
* 🎨 Adjust transition duration and padding for form progress and summary styles
* 🎨 Update padding in guide panel styles for improved consistency
* 📝 Changeset
Endret i darkmode
Brand Blue og Success, 100 - 400, endret saturation til 100.
Accent, 100 - 400, endret saturation til 60.
Alle farger 600, endret til kontraststop til 4.52:1. Bug, noen farger havnet under 4.5:1.
Alle farger 1000, endret saturation til 100.
* 🚧 umami test script
* 🚧 CSP for umami
* 🚧 test data-tag, set no auto tracking
* ♻️ make consentBanner more self contained
* 🚧 working implementation for consent modal
* ♻️ move ConsentBanner to website-modules + small changes
* use typescript-cookies over localStorage API
* Copy Nav.no consent text
* better name for cookie
* 🚧 crude complex consent object
* Update aksel.nav.no/website/components/website-modules/ConsentBanner.tsx
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* classify traffic better (umami)
* Update aksel.nav.no/website/components/website-modules/ConsentBanner.tsx
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* link to our own personvernerklering + disable modal on that specific page
* use same conditions for all showModal() triggers
* update comment
* limit cookie to specific subdomain (prevent it getting sent by clients to other *.nav.no pages
* remove the MutationObserver, but keep query param to disable banner (for tests)
* bypass banner in e2e tests
* store "no action" consent data in sessionStorage
* 🚧 change to in document flow style banner (no more modal)
* 📱 responsive consent banner++
* website: set cookie domain dynamically (from serving site)
* hardcode /side/personvernerklaering
* 🚧 placeholder cookie preferences box
* cookie preferences box++
* dokmøte plenumsendringer
* move page personvernserklaering
* make the cookie preference form functional
* ♿ add missing aria-labelledby target
* re-enable banner on e2e search tests
* Add explanation to organic and polluted traffic
* extract consent state into custom hook
* PR review changes
* ✨ Serverside-check for cookie consent
* banner set tracking id from env var
* remove unused url param check
* env var toggle for PRODUCTION
use this to inject code scripts clientside, do stuff during build or anything else really! (better to use this than NODE_ENV)
---------
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
Co-authored-by: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com>
Co-authored-by: Ken <ken.aleksander@gmail.com>
* ✨ Setup darkside migration
* ✨ Can now convert primitives spacing
* 🧪 Added more tests
* 📝 Docs for utils
* 📝 Changeset
* 📝 Typos
* [Darkside] ✨ Added migration for css, less and scss (#3598)
* ✨ Added migration for css, less and scsss
* Update @navikt/aksel/src/codemod/migrations.ts
* ✨ Make old px spacing space-1
* ✨ Use esbuild to inline local references
* ✨ Added js migration to space-tokens (#3600)
* ♻️ Use eslint-bundle as main build for CLI
* ♻️ Add mappings exports in ds-css, avoid using esbuild
- Most of our CSS is re-written. This could potentially affect most custom overrides targeting `.navds`-classes.
- You will not be able to use the old CSS and the new CSS at the same time.
- Most of our CSS is re-written. This includes renaming all `.navds`-classNames to `.aksel`. This will affect most custom overrides targeting `.navds`-classes.
As we strongly recommend avoiding custom
overrides where possible, we would like to encourage opening an
@@ -40,6 +31,15 @@ All component-spesific tokens are no longer supported. That means all tokens lik
All component-based tokens are prefixed with `--ac`, so a global search in your codebase should find all of them.
## Tailwind CSS
Since our Tailwind CSS config is tied to our tokens, most changes made to the tokens will affect the Tailwind CSS config.
We have decided to prefix all our classes with `ax-` in the new config, so it should be possible to use both packages at the same time. We will develop tooling to hopefuly make the migrations easier in the future.
### Removed classes
z-index, maxWidth and spacing classes are removed from the new config.
## React
We have made some updates to `@navikt/ds-react` that you should be aware of before testing.
@@ -64,9 +64,9 @@ custom button.
Component got a complete overhaul. Custom overrides might break.
### Popover, HelpText, Tooltip
### Popover, HelpText
`arrow`-prop is removed. All of our floating dialog-elements now come without arrow.
`arrow`-prop is removed. All of our floating dialog-elements except for `Tooltip` now comes without arrow.
If you have custom `offset`-values, you might have to update them to accommodate this.
@@ -6,18 +6,18 @@ import { Markdown, Meta } from "@storybook/blocks";
## Clean project
For new projects, setup is just as easy as before, but now requires `Theme`-component to be wrapped around your app.
For new projects, setup is just as easy as before, but now requires a `Theme`-component to be wrapped around your app.
The component acts as a local feature-flag for the new implementation, with the added benefit of being able to switch between light and dark mode for you.
Steps:
- 1. Import new CSS `@navikt/ds-css/darkside`
- 2. Import `Theme`-component from `@navikt/ds-react`
- 3. Wrap your app in the `Theme`-component. You do not have to set the theme, but it defaults to `light`.
- 2. Import `Theme`-component from `@navikt/ds-react/Theme`
- 3. Wrap your app in the `Theme`-component. You do not have to set the theme, as you can manually handle theme switching with other tools like `next-themes`.
```tsx
import "@navikt/ds-css/darkside";
import { Theme } from "@navikt/ds-react";
import { Theme } from "@navikt/ds-react/Theme";
export const App = () => (
<Theme theme="light">
@@ -32,7 +32,7 @@ If you are not using any of our React-components, you can still switch between t
## Theme switching
The `Theme`-component has a `theme`-prop that can be set to either `light` or `dark`. This only sets a `class` on the element of `light` or `dark`, and the rest is handled by the CSS.
The `Theme`-component has a `theme`-prop that can be set to either `light` or `dark`. This only sets a `class` on the element of `light` or `dark` (in addition to a `aksel-theme` class), and the rest is handled by the CSS.
You have the option of using `hasBackground` (defaults to true) to make `Theme` include a built on default background.
@@ -83,11 +83,11 @@ For SCSS, Less and JS they are also available under the paths
## I want to test the new React-changes
For the new system to work with our components, you will have to use the new `Theme`-component, and import the new CSS from `ds-css/darkside`
For the new system to work with our components, you will have to use the new `Theme`-component, and import the new CSS from `@navikt/ds-css/darkside`
```tsx
import "@navikt/ds-css/darkside;";
import { Theme } from "@navikt/ds-react";
import "@navikt/ds-css/darkside";
import { Theme } from "@navikt/ds-react/Theme";
export const App = () => (
<Theme theme="light">
@@ -96,7 +96,30 @@ export const App = () => (
);
```
You will not be able to use the old CSS and the new CSS at the same time.
You will have to check on all your custom overrides when making this switch.
### Partial update
You can migrate parts of your application to use the new CSS classes without having to migrate everything at once.
```tsx
// Old setup
import "@navikt/ds-css/darkside";
// New setup
import "@navikt/ds-css/darkside";
import { Theme } from "@navikt/ds-react/Theme";
export const App = () => (
<div>
<StillOnOldCSSComponent>
/* Only this part of your app now uses new styling */
<Theme>
<YourApp />
</Theme>
</div>
);
```
You will have to check on all your custom overrides when making this switch.
## I have to make some custom changes in darkmode
@@ -117,3 +140,12 @@ Since our implementation is based on CSS, you can easily make custom adjustments
@@ -4,4 +4,32 @@ import { Meta, Title } from "@storybook/blocks";
# Darkside changelog
Nothing to see here yet.
## v7.18 (02.04.25)
`<Theme />`-component no longer defaults to `light`-theme className when no theme is provided.
This change is made to make it possible to handle 'light' and 'dark' themes in a more flexible way. You can manually set `className="light"` (or dark) on any html-element higher in the hierarchy, and the `<Theme />`-component will not override this.
One of the cases where this is needed is with `next-themes` where defaulting to light, and changing to dark based on `useTheme`-hook from `next-themes` leads to hydratiob errors.
## v7.16 (03.03.25)
To allow loading old and new CSS files that the same time, we have now renamed all classes to start with `.aksel` instead of `.navds`.
Every React component has this now feature-flagged behind using the new `Theme`-component.
- **With `<Theme />`**: All components uses `.aksel`-classes internally.
- **Without `<Theme />`**: All components uses `.navds`-classes internally like before.
This means you can now migrate parts of your application to use the new CSS classes without having to migrate everything at once.
@@ -44,6 +44,7 @@ We welcome all forms of feedback:
- **Design tokens**: A complete re-write of our design tokens to allow for dark mode.
- **Dark mode**: A new dark mode implementation.
- **Updated CSS**: Now uses new tokens, built-in CSS-layers support and most components are re-written.
- **Updated Tailwind CSS config**: Now uses new tokens, now comes with built-in `ax`-prefix for easier separation between Aksel and your own config.
- **Updated components**: Components use the new tokens and CSS.
- **New Theme-component**: A new `<Theme/>`-component to handle the theming-switch locally.
- **Updated documentation**: Updated documentation for the new implementation.
@@ -54,9 +55,14 @@ As we go, we will add more documentation to help you get started with the new im
- [Design i light og dark-mode](https://aksel.nav.no/god-praksis/artikler/design-i-dark-mode-og-light-mode)
### Demo page
We have a demo page to show off some of the new features and tokens. [You can find it here](https://aksel-referansesider.ansatt.dev.nav.no/aktivitetsplan/).
We recommend using "inspect-tool" in browser to get a feel for the new tokens and CSS.
## How testing could affect your application
All the changes are **opt in**, meaning you can choose to use nothing, some parts of the new implementation, or go all inn.
All the changes are **opt in**, meaning you can choose to use nothing, some parts of the new implementation, or go all-in.
You will still be able to recieve updates to the old implementation while we are in the testing phase.
### Tokens
@@ -67,7 +73,7 @@ This includes new backgrounds, text-colors, border-colors and updated spacing-to
- All tokens have a new prefix `--ax` to avoid conflicts with old tokens.
- You will be able to use the new tokens at the same time as the old tokens.
- All background, text-colors and border-colors have new names and "concepts" to learn. Migration will not be a quick one to one with old system.
- New spacing tokens are now named `space` and based on `px` values.
- New spacing tokens are now named `space` and based on `px` values (most devs think and deal in `px` values first, no more on-the-fly mental arithmetic! WYSIWYG).
### CSS
@@ -75,9 +81,13 @@ We have updated our CSS to be based on the new tokens for theming.
- Most of our CSS is re-written.
- All custom overrides targeting `.navds`-classes might have to be updated locally.
- You will not be able to use the old CSS and the new CSS at the same time.
- Component-based tokens are no longer avaliable.
### Tailwind CSS
We have made a new Tailwind CSS config based on the new tokens. Based on previous iterations, we have decided to try prefixing all our classes with `ax-`.
While this will be a little more verbose, it makes it easier to separate your own config from ours, and hopefully makes it easier to maintain.
### React components
We have made some prop-changes to some components to facilitate the new theming and updated CSS. You can read more about them under `migration` in the sidebar.
Loaded 100 of 864 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.