* Check loading prop for showing spinner, not widthOverride.
Making this change because widthOverride sometimes gets set to 0 (should also be fixed), meaning this check fails as "falsy".
* Prevent setting width to 0 while showing spinner, to avoid issue in Modals
Checking that width is truthy (not zero) will avoid issue where widthOverride gets set to 0 because the button is not yet rendered.
* Add changeset
* Replace width calculation with just visually hiding label + icon and absolutely positioning the loading icon.
* Update @navikt/core/react/src/button/Button.tsx
* add story for bug case
* We no longer use buttonRef/mergedRef internally, so removed them and set ref directly
* Update @navikt/core/css/button.css
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* Hiding everything except loading spinner is more robust than hiding every specific item.
* In loading-state, the button icon will no longer be able to be the only child (hidden), because of the loader icon. Instead checks for no label.
Could consider :not(:has(:is(.navds-button__icon, .navds-loader))) as well, to be more robust, but it might be overkill.
* Much simpler/easier to read
* Don't need to destructure style, only to add it along with rest.
* Should destructure onKeyUp from props, instead of having it added through filteredProps and then overridden afterwards.
* Quick and easy conversion for darkside
* Unnecessary :is after refactoring
---------
Co-authored-by: Julian Nymark <julian.nymark@nav.no>
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* 💄 New ToggleGroup design
* 🐛 Removed hover-state from selected togglegroup in forced-colors mode
* 💄 Add px-gap to elements
* 🐛 Hide divider on both sides when selected
* change: add story to demonstrate buggy textarea behaviour inside modal
* use lodash debounce with our own default value for wait
* Revert "use lodash debounce with our own default value for wait"
This reverts commit 7638297765.
* change: add leading to debounce + use it in TextareaAutoSize
* changeset
* changeset + co-author
Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>
---------
Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>
* change: support icon in ErrorMessage + warning icon for textarea error
* change: ignore icon on old CSS + tweaks
* change: do not nest in old css
* wip commit (works nicely)
* clean up css for errormessage, remove it from form.css
* 🐛 tweaks + use icon in Search
* use icon for the rest of our form components
* backport new css to old form.css
* 🔥 remove unnecessary specification bump
* cleaner example story
* changeset
* ♻️ icon -> showIcon
* make flex & gap opt-in with 'icon'
* change: inline ErrorMessageIcon
* change: nest css more
* revert test changes (utility in multiple variants on one for DOM diffing, but probably no longer useful)
* debloat changeset
* mention form components in changeset
* change: typo in changeset
* change: typo in changeset
* ✨ Solves issue where programatic focus to fix error would show dropdown list and hide error
* 🚚 Moved onclick listener for open-state to input, not wrapper
* Update .changeset/forty-rules-ring.md
* change: timeline periods
* update stories for timeline
* change: Timeline pin update
* change: crude variable renaming (--a- -> --ax-)
also likely done with zoom buttons,
a bit of popover styling fix
* change: popover z-index bump
* change: remove unnecessary CSS state :active
* change: z-index fix, correct token usage
* change: remove @supports not selector(:focus-visible)
* change: use proper tokens
* change: can't get focus on popover
* change: remove arrow from popover consumers
* change: only render arrow div when !themeContext
* 💄 Use smaller offset without arrow, use subtleA border for popover
* 💄 Adjusted popover tokens for timeline
---------
Co-authored-by: Ken <ken.aleksander@gmail.com>
* ✨ Added darkmode-support to Tag
* 🐛 Update spacing-tokens to new format
* ✨ Added darkmode-support to Tag
* 💄 use canvas-color for text on filled forced color text
* ♻️ Use classNames for tag colors, not data-attrb
* 🐛 Old Tag-css supports new names
* V1 of CSS bundler
* V1 of CSS bundler
* ♻️ Added target checking for browser
* ♻️ Remove built in variables added by lightningcss
* Setup bundling of darkside
* 🐛 Fix path resolving in bundle script
* Setup bundling for index
* 🚚 Re-order layering
* ✨ Filter for only components in bundle
* 🚚 Moved token-definition
* 🔥 Removed index.css copy
* ✨ Global build
* ✨ form and primitives build
* ✨ Component build
* ✨ Build versions dir for new setup
* :test_tupe: Added tests for bundle
* 🚚 Move bundle file to config
* 📝 Comments
* ✨ Allow import of darkside directly under ds-css
* 🐛 Use relative import for CSS in storybook
* [Darkside] Updated input-bg in darkmode, added token for opacity (#3441)
* [Darkside]: Update bg-input to be darker in darkmode
* Added opacity-token
* Use token for disabled opacity
* Update @navikt/core/css/darkside/button.darkside.css
* ♻️ De-dupe reading of index.css
* ♻️ Use regex to remove - and space instead of lodash
* 🥅 Throw when bundler fails
* Update @navikt/core/css/config/bundle.darkside.ts
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* Update @navikt/core/css/config/bundle.darkside.ts
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* 🏷️ Updated opacity-tokens types, resolved import conflict
---------
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* ✨ Updated exports to allow better darkside support
* ✨ Setup less and scss support for darkside
* ✨ Added static build for tokens
* ✨ Token-config exports
* 🐛 Resolved import conflicts between tailwind and css
* 🐛 Resolved import conflicts between tailwind and css
* ♻️ Refactor Token-setup for better typing
* ♻️ WIP resolve import conflicts2
* ♻️ Avoid importing JSON in react from tokens
* 🐛 Resolve updated imports in referansesider after refactor
* Update @navikt/core/tokens/.gitignore
* Update @navikt/core/tokens/types.ts
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* 🐛 Removed prefix 'ax' when generating static tokens for js
* 🐛 Resolved export syntax to support less, scss and JS
* 📝 Updated JSDoc to link directly to types
* Update @navikt/core/tokens/darkside/figma/figma-config.types.ts
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* ♻️ Use colorRole-array as bases for Role array
---------
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
- Merged LanguageProvider into Provider, while also changing the API a bit to make it easier to use (with the help of TS).
- Updated tests for `useI18n()` according to changes in API.
- Chips.Removable: Removed prop `removeLabel`.
- DatePicker/MonthPicker: Added new `translations` prop and deprecated `locale` prop.
- Search: Deprecated prop `clearButtonLabel`.
- Textarea: Deprecated prop `i18n`.
- Timeline: Deprecated prop `axisLabelTemplates`.
- nb/nn/en.ts:
- Arranged the top level keys alphabetically.
- Merged `close` in Modal and DatePicker and put it under the `global` key.
- Changed Search.clear from "Clear" to "Clear field" to make it more... clear 😅
- Removed Combobox.clear since the clear button has been removed.
- Made them importable from `@navikt/ds-react`
* GuidePanel initial CSS rewrite
* ✨ new illustration
* change: layout
* change: add speechbubble arrow
* change: dark mode raised for speechbubble arrow
* change: correct stroke path color (actually fill) of path in svg
* change: fine tuned SVG with padding and overlapping paths
* change: exception CSS for FF rendering of speech bubble tail
* change: hardcode calculation as whole pixel value remove FF custom CSS
* change: convert BEM modifiers to simpler CSS data-attributes
* change: display:none for speech bubble tail on old token system
* change: refactor old css to use the attribute selectors
* change: noSVG example (see default story for side-by-side)
* change: rewrite to using only SVG for speechbubble
* change: only looks good in lightmode, no token support / hardcoded
* :refactor: Updated Guidepanel CSS to use SVG
* 🔥 Remove old commented CSS
* 🐛 Fixed cases where mediaqueries would target nesten element instead of itself
* 🗑️ Cleanup of unused code
---------
Co-authored-by: Ken <ken.aleksander@gmail.com>
* ✨ Added darkmode support to table
* 📝 Added comments
* 📝 Added todo
* :refactor: Avoid use of custom animate height function
* :refactor: Use Alpha-token on hover-selected
* :refactor: Remove redundant token-use
* Update @navikt/core/css/table.css
* ♻️ Reverted to animate-component for table animation
* 📝 Overlap comments
* WIP: update primitives prefixing
* ♻️ Use updated prefix in primitives ts-code
* ♻️ Use updated token-prefix in css
* ♻️ Use updated tokens in primitives css utilities
* 🔥 Removed backwards-compat with old stack CSS
* [Darkside] Primtives prop-support (#3423)
* :refactor: Support primitives with new theme
* :refactor: Use sub-component for new Box update
* ♻️ Update support for new and old theme in Page and Box
* ♻️ Resolve instances where tokens were not correctly named for theme-support
* ♻️ Avoid exposing component before necesarry
* ♻️ Avoid having to import figma-types in ds-react
* ♻️ Using camelCase on tokens breaks primtives. Now uses kebab-case
* 🔥 Removed comment used as notes
* Update @navikt/core/react/src/layout/page/Page.tsx
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* Update @navikt/core/react/src/layout/box/Box.tsx
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* ♻️ Remove redundant prefix const
* ♻️ remove redundant T-suffix on types
* ♻️ Better previews on hover when checking token-props
---------
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* ♻️ More fine-grained exception-testing for use of old props in Box
---------
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* 🚧 wip
* [Darkside] ErrorSummary updated CSS (#3331)
* First run for errorsummary css update
* Added nesting
* [Darkside] Fileupload CSS update (#3343)
* ✨ Updated Dropzone with darkmode
* ♻️ Added nesting for root
* ♻️ ac -> acx prefix for interla tokens
* ♻️ Removed reduntant token
* ♻️ More nesting
* 💄 Align overlay on drag better
* ⚰️ Removed test-code
* 💄 Update hover-border for dropzone
* 🐛 Removed border-color update on hover in disabled state
* ♻️ Use bg input on area, use border default
* [Darkside] Link CSS update (#3353)
* ✨ Darkmode-support for existing link-component
* :refactor: Adjusted line offsets and thickness
* [Darkside] ExpansionCard CSS update (#3338)
* 💄 Initial css-update expansioncard
* 📝 Added sub-headers
* 💫 Button animation
* ✨ Added data attrb for open-state
* 💫 Updated content animation
* ♻️ Added nesting
* ♻️ Better nesting of rules
* ♻️ Use outline for hover border
* ♻️ Use border as default outline
* 🔥 Remove redundant border css
* 🔥 Removed divider transition, unused state attributes in react
* [aksel.nav.no] Update examples of Page (#3349)
* Changesets: Run yarn as part of create-version
* Combobox: Fix issue where using arrow keys in list would make the entire page scroll (#3364)
* [Darkside] FormSummary updated CSS (#3345)
* :refactor: Use updated CSS for darkside
* 💄 Replace accent bg with info bg
* [Docs] Use NAV-dekorator for Page examples (#3362)
* [aksel.nav.no] Update examples of Page
* comment
* comment + rename + style->class
* fix
* 📝 Use NAV-dekorator for Page-examples
* 🚚 Moved content to separate __parts location
* :refactor: Updated examples
* Update aksel.nav.no/website/components/website-modules/examples/__parts/PageDemoContent.tsx
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* 🐛 Use correct import syntax for parts
* 📝 Add description to page-block default story
* 💄 Removed spacing from all typo-headings in demo
* 🐛 Removed react import from content part
---------
Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* Git hooks that notify when yarn.lock have changed (#3361)
* 💄 first pass css updates
* 🎨 nest CSS
* Datepicker: 💄 css layer changes & remove extra border
* 🔥 remove resolved todo
* 💄 border radius for caption buttons
* 🎨 drastically simplify focus outline
* change: make button selector less wildcardy
* change: outline smaller for rdp-cell buttons
* change: width large enough to show 4 characters in year caption
* change: match design for range middle selected
* change: remove redundant error CSS
* change: remove unused CSS
* change: un-shuffle css import ordering for date.css
* change: remove unused CSS
* change: week buttons & day button active
* change: use secondary-neutral button for weeknumber buttons
* change: same selector for month and day buttons, active state
* 🐛 Fixed weeknumber as the button broke old datepicker
* change: remove double border on captions, active state on disabled
* ♻️ Updated weeknumber to be barkw-compat with old system
* 🚚 Moved date-import further up
---------
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>
Co-authored-by: Ken <ken.aleksander@gmail.com>
Hid buttons from screen readers since you can't tab to them anyways. Moved sr-only text on clear button to title attr. Removed sr-only text on toggle list button. Removed prop toggleListButtonLabel.
* Prevent active text being announced waaay too many times.
* Add changeset
* New attempt at consistently reduced status messages on "copy" click
* Remove aria-relevant and aria-atomic to make announcement consistent between Safari and other browsers
* When single select on combobox, remove the gap between the input and the selected value.
* ♻️ Updated spacing between options and input in Combobox
* 📝 Changeset
* Revert darkside update
* ♻️ Update darkside combobox
* :refactor: Make gap something we add, not remove for chips based on type
* Update .changeset/yellow-days-rhyme.md
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* :refactor: Only add margin-left when only-child
---------
Co-authored-by: Ken <ken.aleksander@gmail.com>
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
- [Darkside]: Use shadow-dialog token in components, use subtle-border in combobox list
- [Darkside]: FileSummary nesten items border
- [Darkside]: Adjusted ExpansionCard padding
- [Darkside]: ActionMenu uses new Radio-design
- [Darkside]: Added shadow-token to system
* :refactor: Added darkmode-support to Stepper
* :refactor: Restructure Stepper to support darkmode and nesting
* 🐛 text-decoration now changes on hover
* :refactor: Line before non-interactive step now has border-neutral
* ✨ Added brandvolume support in theme-component
* 📝 Added brandvolume story to readmore
* ✨ Added large size to readmore
* ✨ Added darkmode support for Readmore
* :refactor: Updated CSS syntax
* 🐛 Fixed brandvolume stories
* ✨ Implemented brandvolume in ReadMore
* ✨ Added large-variant of readmore to OG readmore
* :refactor: Use tokens and calc to handle volume
* 🐛 Added text-accent-strong on hover to high brandvolume
* 🐛 Avoid adjusting readmore body when size is large
* 📝 CHangeset
* Update @navikt/core/react/src/provider/theme/AkselTheme.tsx
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* Update @navikt/core/react/src/provider/theme/AkselTheme.tsx
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
---------
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* ✨ Added darkmode support in react for internalheader
* :refactor: Support darkmode theming for internalheader
* 💄 Added bottom border to header, divider now subtleA
* 🐛 Remove hover,active effect in static title
* :refactor: Remove redundant :is for button
* :refactor: use padding shorthand
* 💄 Improved hover-effect on forced-color buttons, added story
* 🐛 Revert back to is button syntax
* :refactor: Updated List css to support darkmode
* ♻️ nest some CSS
* 🐛 Updated stories
* 🐛 Removed removed story from chromatic view
* :refactor: Removed color-override on list-markers
* :refactor: Set icon-color to currentColor
* :refactor: Removed currentColor from icon
---------
Co-authored-by: Julian Nymark <julian.nymark@nav.no>
* :refactor: Initial loader update
* :refactor: Re-added support for inverted
* :refactor: Added nesting to loader
* 🐛 Foreground now scales the same as background track
* Updated checkbox css
* bug: Added correct icon-color for readonly checkbox
* Form-css: Updated form.css and fieldset.css with new tokens
* Added radio dot support
* use 4px border-radius, use border-strong for error
* Error-state updated for checked checkbox
* Updated 'dot'-color for readonly radio
* Updated radio-design
* Added disabled-stories for checkbox and radio
* Radio story with checked and error
* Updated foced-colors support for radio
* Use border-syntax instead of box-shadow
* Removed old code
* Updated checked color to accent-strong-pressed for radio
* Adjusted Error-colors for radio/checkbox
* 💄 Radio can now be checked and have Error
* ♻️ Use hoverA bg for hover
* ♻️ Readio readonly now matches figma
* [Darkside] Migrated typo to new CSS
* memo: Added comments
* change: Implemented accordion header and content
* change: Added lines
* feat: added todo
* change: Fixed layering issues with lines
* change: Avoid animation on initial render
* change: Removed comments
* change: moved icon state into nesting
* change: Added alpha-background for icon, updated fontweight
* change: Added forced-colors support
* Removed use op --open class
* Removed old grid centering
* Top, bottom line is now alpha
* Fixed animation
* bug: Revert to transparent bg
* deprecation: Added tags to accordion props that are to be removed
* removed deprecation for accordion headingSize prop
* Updated implementation of line in accordion
* Remove position relative in accordion content
* Implemented size-update for accordion
* bug: removed old comment
* Clarify comments
* Removed redundant header class
* Re-added className in accordionHeader
* Use new tokens in copybutton
* Updated animation
* updated to nested syntax
* Updated text-color on hover
* Added subheading for sectioning
* removed background none
* sanity config cleanup
* removed extra const for type
* re-organized admin tools and fixed types
* Removed no longer needed custom actions for translations
* Simplified publication plugin
* Removed extra logic in publish action
* synced SEO-updates
* lock sync
* bug: Removed old index export
* Show AddNewValue button in Combobox based on searchTerm instead of value, so it is displayed when autocompleting words
* Highlight matching text in FilteredOptions
* Add changeset
* Move styling to combobox.css instead of inline JS
* Ensure label options are read as one text, even when highlighting search matches.
This only seemed to be a problem in testing library, so we should be able to remove this if they fix this in their calculation of accessible name.
* Update changeset to a minor version
* Re-introduce controlled value in storybook examples to not change Chromatic snapshots
* change: Updated actionmenu examples
* change: Removed flipAlignment prop for better alignment
* change: Removed defaultOpen-prop from ActionMenu
* change: Moved rootElement prop to component root
* change: Added support for use inside Modal
* change: Use MenuPortalProps instead of Pick
* feat: Added build for darkside
* feat: Implemented darkside-tokens in tailwind-build
* change: Code cleanup and syntax simplification
* change: Moved color-token extraction to start of file
* memo: Moved comment
* change: Updated actionmenu examples
* change: Removed flipAlignment prop for better alignment
* change: Removed defaultOpen-prop from ActionMenu
* change: Moved rootElement prop to component root
* change: Added support for use inside Modal
* change: Use MenuPortalProps instead of Pick
* change: Revert to using Pick for prop inheritance
* change: Menucontext uses required definition of rootElement
[darkside] Updated naming transform to support alpha-tokens
[darkside] Updated input-token to use opacity
[darkside] Added alpha-tokens to global config
[darkside] Now auto-generates the alpha-values
[darkside] Added semantic role tokens using alpha-values
bug: removed tempfile added by vitest
* bug: Some icons that should be ignored were fetched and caused exceptions
* change: Added some comments
* change: Better math for icon-check
* change: Better messaging
* Update @navikt/aksel-icons/config/figma/index.ts
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
---------
Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
* Add support for PageUp and PageDown in Combobox.FilteredOptions
* Remove console.log statements
* Add test for PageDown/PageUp
* Open FilteredOptions when pressing PageDown
* Prevent scrolling from moving the whole page
* Consistently scroll to the active element in useVirtualFocus by using useLayoutEffect
It seems like doing it with the state update sometimes encounters a race condition preventing the scrolling.
This removes the need for a private function handling index update and scrolling, simplifying the code.
* Updated test to fit new options order
* Prevent "Home" and "End" in Combobox from scrolling as well
* Add changeset
* Update @navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* useEffect seems to work the same way, and works better for SSR
* Removed code that did nothing
* Added the same check we have for PageDown, etc. Unsure if it is neccessary.
* Change behaviour for "Home" to move focus to the first element instead of Input
* Once we changed virtualFocus.moveFocusToTop to move focus to first element instead of the Input, we now need another function to move it to the Input where applicable.
* Update .changeset/tasty-cats-hear.md
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
---------
Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
* Disable autocomplete in Combobox to "fix" issue where autocomplete is broken in Firefox on Android
The bug is that after three "correct" characters are entered in a row, the autocomplete inserts the third character incorrectly, messing up the text in the input.
This also happens in other implementations of autocomple, like W3C's ARIA Authoring Practices Guide combobox with inline autocomple.
* Add changeset
* Use type checking instead of useEffect to prevent client code from running server side
feat: Avoid caching config for color-tokens
feat: Remove use of leonardo, hardcode global config
feat: Update 100-400 scale for darkmode
feat: Update 500-1000 scale for global colors
* feat: Updated to sanity 3.59
* bug: Sanity updated icon and media types, so everything broke
* bug: Fallback to default media in article previews if everything is normal
* Combobox: 💄 tweak the visibility of chevron
* Combobox: 💄 dim visibility of icons for readonly datepicker, select, and combobox
* Combobox: 💄 dim visibility of icons for readonly datepicker, select, and combobox
* changeset
* 🚧 translations in Provider
* ♻️ consume providerContext translations in useI18n + example usage (FormProgress)
* changeset
* 🎨 keep component level translations
* ♻️ extract language provider into own provider
* 📝 update changeset doc
* 🎨 undo all changes to original Provider
* 📝 changeset text
* ✅ update test for i18n changes
* refactor: Moved location of LanguageProvider, removed changeset
---------
Co-authored-by: Ken <ken.aleksander@gmail.com>
* memo: Updated storyname for button framework
* memo: Updated example with link i description and link -> nextlink
* testing: Added test to check link/markdown-parsing in description-field
* test for playwright
* bug: Playroom does not support Nextjs link
* bug: Turn off sandbox for bytton-demo missing import in playroom
* combobox 🚸 tweaks for single select
- hide the selected value when inputing text
- delete input value on blur (you must actually select something with
intent to select it, this prevents the field from "looking like it's
filled in when it's actually not")
* changeset
* 🐛 use clearInput() instead of setValue("")
* 💄 match x-position of input to the selected option
* Add test case for selecting autocompleted word after first character typed, which is currently broken (selects first in list, not the autocompleted word)
* Select the correct option when pressing enter after autocompleting a word in Combobox
Fixes#3106
* Added changeset
// TODO: Convert to new format: https://eslint.org/docs/latest/use/configure/migration-guide
/**
* TODO:
* - Convert to new format (v9): https://eslint.org/docs/latest/use/configure/migration-guide
* - Look into opinionated stylistic plugin
* - Replace @typescript-eslint/recommended with @typescript-eslint/recommended-type-checked
* - We should add "plugin:react/jsx-runtime", but not sure if this will cause problems for projects not using the new JSX transform
* - Consider adding the rule "id-length"
*/
/**
* V9 migration WIP
* - eslint-plugin-storybook does not support v9 yet: https://github.com/storybookjs/eslint-plugin-storybook/issues/157
* - eslint-plugin-testing-library does not support v9 yet: https://github.com/testing-library/eslint-plugin-testing-library/issues?q=is%3Aissue+is%3Aopen+v9
* - @vitest/eslint-plugin supports v9, just need to replace @vitest/legacy-recommended: https://github.com/vitest-dev/eslint-plugin-vitest?tab=readme-ov-file#usage
* - Looks like @typescript-eslint/eslint-plugin and @typescript-eslint/parser can both be replaced by just typescript-eslint in v9: https://typescript-eslint.io/getting-started#step-2-configuration
*/
module.exports={
env:{
browser:true,
@@ -8,15 +23,13 @@ module.exports = {
extends:[
"eslint:recommended",
"plugin:react/recommended",
//"plugin:react/jsx-runtime", // Not sure if this will cause problems for projects not using the new JSX transform
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:storybook/recommended",
// TODO: Look into opinionated stylistic plugin
// TODO: Replace @typescript-eslint/recommended with @typescript-eslint/recommended-type-checked
],
/* Allows eslint-plugin-react to detect installed react-version */
settings:{react:{version:"detect"}},
rules:{
"import/no-unresolved":"off",
@@ -26,29 +39,67 @@ module.exports = {
],
"array-callback-return":"error",
"object-shorthand":"error",
// TODO: Consider adding the rule "id-length"
// Temporary:
"no-else-return":"error",
"no-console":[
"warn",
{
allow:[
"info",
"warn",
"error",
"group",
"groupEnd",
"table",
"assert",
"countReset",
"count",
"dir",
"time",
"timeEnd",
"timeStamp",
],
},
],
/* Temporarily turned off until code is updated */
add links to project-tasks, slack discussions etc here
-->
<!-- PR description/motivation, summary of changes, links to issue/slack discussion etc. -->
### Change summary
### Component Checklist 📝
<!-- Short summary of changes in PR
- added variant x
- fixed bug in y
-->
### PR Checklist 📝 (Remove fields after check!)
#### New component? ✨
- Check that component-styling is correctly configured in `@navikt/core/css/config/_mappings.js`. This is needed for correct build and CDN upload.
- Check that styling is correctly exported from `@navikt/core/css/index.css`
- Check that correct tokens for component is documented in `@navikt/core/css/tokens.json`
- Check that only needed components and types are exported from `@navikt/core/react/src/index.ts`
- Check that component is exported from `@navikt/core/react/package.json`
- Add JSDoc to component (see other components for reference)
- Create storybook-stories for relevant component variations and compositions. Stories are used for [visual regression testing](https://www.chromatic.com/docs/), so make sure they are complete.
- Is the component sufficiently complex to warrant tests? Add some unit-tests for vitest.
#### Component-updates 🎉
- Revalidate if everything under `New component` is still accounted for
- Deprecating/removing a CSS class? Add it to `@navikt/aksel-stylelint/src/deprecations.ts` with a suitable description. This helps stylelint-users keep their code clean and bug-free.
#### Documentation 📝
- Add/update component-demos for component `aksel.nav.no/website/pages/eksempler`
- Create/Update documentation in sanity if needed
Note: Props, tokens and examples only updates to sanity on merge to main
#### Versioning 🏷️
- Run `yarn changeset` to generate a version-entry for change.
- - Bug/hotfix: Patch
- - New feature: Minor
- - Breaking change: Major
- Adding breaking changes? Consider adding a codemod for easier migration.
- Breaking changes also needs documentation under "Migration"-page on website
@@ -11,7 +11,7 @@ import Setup from "./assets/setup.png";
# Getting started
Aksel is the toolbox for product development <a href="https://aksel.nav.no"target="_blank">@NAV</a> (Norwegian Labour and Welfare Administration)
Aksel is the toolbox for product development <a href="https://aksel.nav.no"target="_blank">@Nav</a> (Norwegian Labour and Welfare Administration)
This includes a designsystem, best practices for product-development, principles for user-experience and a blog. <a href="https://aksel.nav.no/god-praksis/artikler/om-aksel" target="_blank">
Read more about Aksel.</a>
@@ -30,7 +30,7 @@ import Setup from "./assets/setup.png";
target="_blank"
className="sb-link"
>Website</a></h3>
<p className="sb-section-item-paragraph">Includes everything you need to get started building and developing digital products for NAV today.</p>
<p className="sb-section-item-paragraph">Includes everything you need to get started building and developing digital products for Nav today.</p>
</div>
<div className="sb-section-item">
@@ -136,34 +136,34 @@ import Setup from "./assets/setup.png";
`Icons (${svgFiles.length}) and configs (${ymlFiles.length}) written to directory does not match the expected amount of icons located in Figma (${publishedIconComponents.length}).\nThis is most likely caused by duplicate icon names from figma.`,
Loaded 100 of 963 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.