* Automatically add JSDoc with default values to nb.ts
* Added jscodeshift to devDeps
* 🐛 Use same jscodeshift versions
* 🐛 Use same types for jscodeshift
---------
Co-authored-by: Ken <ken.aleksander@gmail.com>
* WIP
* WIP CompareImages
* ✨ Handle more keys
* ♻️ Re-use positioning code
* 💄 Adjust for width
* ✨ Added sanity schema
* 💄 Moved focus to box, allow handle to overflow leftside by 1 px
* ✨ Added bg and alt-text support
* 🐛 Change env back to production
* 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>
2024-09-12 15:36:04 +02:00
808 changed files with 40391 additions and 17724 deletions
For versjonering bruker vi løsningen [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
Vi bruker [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
## Howto
## Lage ny versjon
- For å lage en ny versjons-entry:`yarn changeset`
- Velg pakkene som skal versjoneres med `arrowkeys` + `Space`
1.`yarn changeset`
2. Svar på spørsmålene som kommer opp:
`🦋 Which packages would you like to include?`
Trykk `Space` for å velge pakkene som skal versjoneres, for så trykke`Enter` for å gå videre.
Trykk `Space` for å velge pakkene som skal versjoneres, trykk så`Enter` for å gå videre.
`🦋 Which packages should have a major bump?`
Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
Trykk `Enter` for å gå videre _eller_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`.
`🦋 Which packages should have a minor bump?`
Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
Trykk `Enter` for å gå videre _eller_ velg pakkene som skal minor-bumpes med `arrowkeys` + `Space`.
Hvis du ikke velger major eller minor, så blir pakkene få en patch-bump
Hvis du ikke velger major eller minor, så vil pakkene få en patch-bump.
- Commit og push.
`Please enter a summary for this change`
Skriv inn en kort beskrivelse av endringen på formatet `<Komponent>: <gitmoji?> <Beskrivelse>`, f.eks. "Button: ✨ Add feature xyz".
3. Commit og push.
## Fixed versjonering
Alle base-pakkene våre har `fixed versjonering`. Dette tilsier at en bump på en av disse vil bumpe alle til samme versjon
Alle base-pakkene våre har `fixed versjonering`. Dette betyr at en bump på en av disse vil bumpe alle til samme versjon
// 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,12 +39,6 @@ module.exports = {
],
"array-callback-return":"error",
"object-shorthand":"error",
// TODO: Consider adding the rule "id-length"
// Temporary:
"react/prop-types":"off",
"react/display-name":"off",
"import/no-named-as-default":"off",
// "import/no-cycle": [1],
"no-else-return":"error",
"no-console":[
"warn",
@@ -53,7 +60,12 @@ module.exports = {
],
},
],
/* 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";
800+ open source icons made by Aksel, NAVs designsystem-team
800+ open source icons made by Aksel, Nav's designsystemteam.
- Designed for 24x24px
- Available in React and SVG
@@ -30,7 +30,7 @@ Tip: Use the `title` prop for accessible icons.
### Sizing
Each icons `width` and `height` is default `1em`. This allows you to use the native `fontSize`-prop to adjust sizing. We recommend using at least 1.5rem/24px for best possible visual representation.
Each icon's `width` and `height` is default `1em`. This allows you to use the native `fontSize`-prop to adjust sizing. We recommend using at least 1.5rem/24px for the best possible visual representation.
`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.`,
Pluginen gir deg mulighet til å se gjennom og hente ut alle ikonene i fra ikonpakken `@navikt/aksel-icons`. Du slipper da å hente nye oppdateringer fra Figma Community.
Pluginen gir deg mulighet til å se gjennom og hente ut alle ikonene fra ikonpakken `@navikt/aksel-icons`. Du slipper da å hente nye oppdateringer fra Figma Community.
Referer til [ikon-dokumentasjonen](https://aksel.nav.no/ikoner) for å se alle ikonene.
Gå til [ikon-dokumentasjonen](https://aksel.nav.no/ikoner) for å se alle ikonene.
Har du ønsker om nye ikoner, eller ønsker å bidra med å lage nye, lag et issue på [GitHub-repoet for designsystemet](https://github.com/navikt/aksel).
- Chore: Manually bump version to sync npm and github-releases ([`aa7c2d9`](https://github.com/navikt/aksel/commit/aa7c2d9598434d6304432daa20e0a1eeedd03b1b))
- CSS: Resolved regression where the complete stylesheet was included in scoped 'components.css' file. ([#3427](https://github.com/navikt/aksel/pull/3427))
- Select: Now shows focus-outline when ':focus' is set trough pointer or label in all browsers. Chrome and Firefox handles `:focus-visible` differently for 'select', previously causing outline-border not to show in Firefox. ([#3415](https://github.com/navikt/aksel/pull/3415))
- Modal: Don't add scroll shadow when polyfilled ([#3408](https://github.com/navikt/aksel/pull/3408))
- Modal: Now shows up while screensharing with Vergic ([#3407](https://github.com/navikt/aksel/pull/3407))
- FileUpload: Remove browser styling from FileUpload.Item when used in list. ([#3413](https://github.com/navikt/aksel/pull/3413))
- Combobox: Single-select now shows cursor closer to selected item. ([#3384](https://github.com/navikt/aksel/pull/3384))
## 7.5.3
## 7.5.2
### Patch Changes
- Combobox: Fix issue where using arrow keys in list would make the entire page scroll ([#3364](https://github.com/navikt/aksel/pull/3364))
## 7.5.1
## 7.5.0
## 7.4.3
### Patch Changes
- Table.ColumnHeader: Inherit text alignment in button ([#3319](https://github.com/navikt/aksel/pull/3319))
## 7.4.2
## 7.4.1
### Patch Changes
- Combobox: :bug: Fix scroll issue when using arrow keys to navigate list ([#3269](https://github.com/navikt/aksel/pull/3269))
## 7.4.0
## 7.3.1
### Patch Changes
- Updated to Selectors Level 4 syntax. ([#3250](https://github.com/navikt/aksel/pull/3250))
## 7.3.0
### Minor Changes
- ActionMenu: :tada: New component! Replaces DropdownMenu as the go-to solution for floating menus. Includes support for grouping, sub-menus, checkboxes, radios and dividers. Read more in the [documentation](https://aksel.nav.no/komponenter/core/actionmenu). ([#3081](https://github.com/navikt/aksel/pull/3081))
### Patch Changes
- List.Item: Center icon horizontally inside it's container ([#3253](https://github.com/navikt/aksel/pull/3253))
## 7.2.1
### Patch Changes
- Combobox: Support PageUp/PageDown in dropdown list. ([#3158](https://github.com/navikt/aksel/pull/3158))
## 7.2.0
## 7.1.2
### Patch Changes
- List: Explicitly set list-style on ol to override reset-CSS ([#3202](https://github.com/navikt/aksel/pull/3202))
- Datepicker/Select: :lipstick: dim non-interactable icons when readonly is set. ([#3187](https://github.com/navikt/aksel/pull/3187))
- Combobox: :bug: implement missing readonly and disabled ([#3180](https://github.com/navikt/aksel/pull/3180))
## 7.1.0
### Patch Changes
- Accordion: Remove 'relative' positioning when focused. This resolves some issues where floating elements like popover ended up clipping. ([`9c1eba445`](https://github.com/navikt/aksel/commit/9c1eba44508f295cc6261ff96822b18557bd7ddc))
## 7.0.1
### Patch Changes
- List: :lipstick: make icons 24x24px large ([#3148](https://github.com/navikt/aksel/pull/3148))
## 7.0.0
### Patch Changes
- ErrorSummary: Focus heading instead of container for improved experience with screen reader. ([#3139](https://github.com/navikt/aksel/pull/3139))
* @param rootParser: Custom parsers that allows for editing the index.css file before bundling it. This allows removing unwanted CSS from being bundled.
* @returns Parsed CSS file output. Must be valid CSS.
1. Create new CSS-file for component: "alert.darkside.css", "button.darkside.css" etc. Remember to add `.darkside.` for easier lookup.
2. Import file in "darkside/index.css": `@import "./alert.darkside.css`
Files will not be included in `/dist` for now to avoid it potentially polluting production-code. This will need to be revisited when we want to expose the new systems outside the team.
## Development
1. Write new CSS for component. Use same prefix `.navds` as before.
2. Run storybook and change from "Default (old)" to "Darkside (new)" in toolbar. You are now developing new CSS 🎉
## Syntax
- Test using outline + outline-offset for focus-markings.
## Checklist
- Add new CSS-files under `core/css/darkside`.
- New files should include `.darkside.` for easier lookup.
- Import new CSS-files in `core/css/darkside/index.css`
- New CSS-selectors should have `.navds` as prefix, same as original code.
- Test changes in Storybook by changing mode in toolbar from "default (old)" -> "darkside (new)"
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup{
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}
sub{
bottom:-0.25em;
}
sup{
top:-0.5em;
}
/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table{
border-color:currentColor;
}
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea{
font-family:inherit;/* 1 */
font-size:100%;/* 1 */
line-height:1.15;/* 1 */
margin:0;/* 2 */
}
/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"]{
-webkit-appearance:button;
}
/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend{
padding:0;
}
/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress{
vertical-align:baseline;
}
/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button{
height:auto;
}
/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type="search"]{
-webkit-appearance:textfield;/* 1 */
outline-offset:-2px;/* 2 */
}
/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration{
-webkit-appearance:none;
}
/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button{
-webkit-appearance:button;/* 1 */
font:inherit;/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary{
display:list-item;
}
Loaded 100 of 808 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.
