feat(Anchor): Sbanken styling, added icon props #2318

snorrekim · 2023-05-09T13:52:18Z

Summary

Sbanken will be using an icon either in front or after the link. Other use cases should work, but haven't been the focus of these changes.

I've added props for icons so that we have can have better control over the styling. These should work for dnb style as well

vercel · 2023-05-09T13:52:21Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 15, 2023 8:33am

snorrekim · 2023-05-09T13:59:21Z

Hm, something is wrong with the checks. I cant run them. I think github being down has broken something. Any ideas?

snorrekim · 2023-05-09T13:59:36Z

I can try pushing a bump commit

codesandbox-ci · 2023-05-09T13:59:46Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ab61eab:

Sandbox	Source
eufemia-starter	Configuration

snorrekim · 2023-05-09T14:06:23Z

That worked, checks are now running

snorrekim · 2023-05-09T14:20:42Z

Can one of you try to update the screenshot tests? Neither me or Espen seem to get correct results.

tujoworker · 2023-05-10T09:00:05Z

I rebased this branch form v10 – it includes this fix #2321 and should work now.

tujoworker

Very good work so far @snorrekim!

I think, we need to look into couple of things.

Eufemia Icon properties (such as iconLeft and iconRight) do often handle icons as direct imports, so the user does not need to import the icon component in addition.
Right now, the target blank icon is placed in the CSS, which is only so we can use the Anchor styles, without a component. But I think, we should do both, or rather only in the component. Because its more flexible in terms of colors. And also, we can use the iconRight property internally then.
Change all component examples to use the properties iconLeft and iconRight instead of inline.
Should we provide a visual example with a chevron and target blank? I guess you added it so we can test such a case?
I tested the text wrapping behavior with the before/after (non-breakable-space) method vs padding and could not find any difference. Did you manage to compare this?
Add integration tests for the new properties iconLeft and iconRight and how they behave.

I can contribute with all of these if that would be preferable?

snorrekim · 2023-05-11T11:03:48Z

@tujoworker
What exactly do you mean with "Eufemia Icon properties (such as iconLeft and iconRight) do often handle icons as direct imports, so the user does not need to import the icon component in addition." Are you thinking we should do the same thing as <Button>? Where the prop can also accept a string like iconLeft="chevron_right"?

As for the "_blank" links. The only thing new is that if you use iconLeft then the _blank icon will still appear, that was not possible before, any icon inside the link would hide the _blank icon, in fact, any html element (like a <span>) would hide it. The example I added was to show that the _blank icon could be replaced.

As for the before/after (non-breakable-space) method vs padding, the difference is the width of the underline, Sbanken styling requires that the underline is one space wider than the word. Though I might be open to completely changing the styling so we don't use text-underline, but a pseudo-underline with background gradient, similar to what we do with button and border using outline.

I'll change the icon props to accept strings as well, and adding tests for the new props. The rest I think should be a seperate task. This PR is about adding sbanken styling and adding two new optional props.

tujoworker · 2023-05-11T12:10:10Z

Yes yes 🙌 sorry for the imprecise request of comments! In this PR should just add related things for sure.

snorrekim · 2023-05-12T14:48:16Z

Ready for tests for review again, as long as someone runs the screenshot tests again.

I've converted most examples to using the new icon prop, and I've moved the "old" way to a hidden legacy example for screenshot testing.

…n and should be written in camelCase (we change all the others in future)

tujoworker

Nice work @snorrekim – thank you 🔥

* feat(Anchor): updates sbanken styling and added props for icons * chore(Anchor): update snapshot tests * Update screenshot tests for Sbanken theme * Updated screenshot tests for ui theme * chore(Anchor): fix linting and sass imports * chore: update snapshot that runs bad on windows * chore: bump commit * screenshot update test * remove anchor screenshots * readd screenshots * Check out from v10: Firefox Mac version of visually hidden snapshot * Ensure the word gets not wrapped on line-break visual tests * feat(Anchor): icon props structured like in <Button>, tests * chore: remove old screenshots * chore: moved legacy screenshot tests to own section * Update screenshot tests (sbanken changes only) * Update screenshot tests (ui changes only) * Rename `icon_position` to `iconPosition` because new feature props can and should be written in camelCase (we change all the others in future) * Check out from v10: Firefox Mac version of visually hidden snapshot * Remove excess h1 * Ensure clean snapshots, without text from above at the top --------- Co-authored-by: Espen Liland <espen.liland@dnb.no> Co-authored-by: Joakim Bjerknes <joakbjerk@gmail.com> Co-authored-by: Tobias Høegh <tobias@tujo.no>

## [10.0.0-beta.8](v10.0.0-beta.7...v10.0.0-beta.8) (2023-05-26) ### 💈 Style Changes * **Button:** smaller tertiary button focus effect for Sbanken ([#2319](#2319)) ([0652d0d](0652d0d)) ### ✨ Features * **Anchor:** add `scrollToHash` feature ([#2290](#2290)) ([d9a692e](d9a692e)), closes [#2286](#2286) * **Anchor:** always show focus when `dnb-anchor--focus` is used ([#2364](#2364)) ([cdd75b2](cdd75b2)) * **Anchor:** remove horizontal padding ([#2365](#2365)) ([05d75a6](05d75a6)) * **Anchor:** Sbanken styling, added icon props ([#2318](#2318)) ([c8e63a1](c8e63a1)) * expose package version ([#2327](#2327)) ([b63b7cd](b63b7cd)) * **GlobalStatus:** add possibility for a custom message (replace `global_status_id` with `globalStatus` prop) ([#2351](#2351)) ([a6f59d8](a6f59d8)) * **HelpButton:** remove `modal_props` in favour of `render` ([#2333](#2333)) ([6cb1767](6cb1767)) * **Theme:** add `darkMode` and `contrastMode` props ([#2355](#2355)) ([712441b](712441b)) * **Typography:** Use text color on typography for Sbanken ([#2363](#2363)) ([eb2763b](eb2763b)) ### 📝 Documentation * Add Sbanken color table and -documentation ([#2332](#2332)) ([6523643](6523643)) * **Breadcrumb:** improve event docs ([76f2294](76f2294)) * **Grid:** removes WIP ([42b7d8d](42b7d8d)) * **PaymentCard:** change imports of types to /payment-card ([e6588dc](e6588dc)) * **ProgressIndicator:** Update size properties ([a216855](a216855)) * **ProgressIndicator:** Update size properties ([4df05eb](4df05eb)) * **Radio:** improve event docs ([f277b13](f277b13)) * **Table:** enhance info about the component and possibilities ([#2336](#2336)) ([9963029](9963029)) * **Table:** improve event docs ([4bd22b7](4bd22b7)) * **Tag:** improve event docs ([389ddd0](389ddd0)) * **ToggleButton:** improve event docs ([aaf811c](aaf811c)) * **v10:** adds examples for updating imports to assets and fonts ([d3d91b3](d3d91b3)) * **v10:** where -> was ([9acc294](9acc294)) ### 🐛 Bug Fixes * **Button:** fix icon alignment issue when left positioned ([#2371](#2371)) ([bbb1ec8](bbb1ec8)) * **Dialog:** make action buttons responsive ([#2373](#2373)) ([be41c14](be41c14)) * **Icon:** enhance alignment when used in paragraphs ([#2368](#2368)) ([69699f7](69699f7)) * **InputMasked:** duplicate decimal number when typing ([#2344](#2344)) ([0d66dc0](0d66dc0)) * **InputMasked:** fix integerLimit issue when combined with decimals ([#2338](#2338)) ([6df4b31](6df4b31)) * **InputMasked:** on custom mask – avoid interaction stall after focus ([#2270](#2270)) ([2201ea9](2201ea9)) * **NumberFormat:** fix tooltip theme inheritance ([#2354](#2354)) ([502c847](502c847)) * omit showing Tooltip after Dialog or Drawer got closed ([#2375](#2375)) ([583fb8d](583fb8d)) * **VisuallyHidden:** force properties to overcome unwanted CSS specificity ([#2366](#2366)) ([64a3c6f](64a3c6f))

tujoworker · 2023-05-26T08:57:08Z

🎉 This PR is included in version 10.0.0-beta.8 🎉

The release is available on:

Your semantic-release bot 📦🚀

* feat(Anchor): updates sbanken styling and added props for icons * chore(Anchor): update snapshot tests * Update screenshot tests for Sbanken theme * Updated screenshot tests for ui theme * chore(Anchor): fix linting and sass imports * chore: update snapshot that runs bad on windows * chore: bump commit * screenshot update test * remove anchor screenshots * readd screenshots * Check out from v10: Firefox Mac version of visually hidden snapshot * Ensure the word gets not wrapped on line-break visual tests * feat(Anchor): icon props structured like in <Button>, tests * chore: remove old screenshots * chore: moved legacy screenshot tests to own section * Update screenshot tests (sbanken changes only) * Update screenshot tests (ui changes only) * Rename `icon_position` to `iconPosition` because new feature props can and should be written in camelCase (we change all the others in future) * Check out from v10: Firefox Mac version of visually hidden snapshot * Remove excess h1 * Ensure clean snapshots, without text from above at the top --------- Co-authored-by: Espen Liland <espen.liland@dnb.no> Co-authored-by: Joakim Bjerknes <joakbjerk@gmail.com> Co-authored-by: Tobias Høegh <tobias@tujo.no>

## [10.0.0](v9.47.6...v10.0.0) (2023-06-01) ### ⚠ BREAKING CHANGES * **Anchor:** Anchor was moved form `/elements` to `/components` * **StylisPlugin:** Stylis plugin, `import stylisPlugin from '@dnb/eufemia/style/stylis'`, has been removed. * - The package dnb-theme-ui was renamed to ui-theme-basis. - The package dnb-ui-components was renamed and moved inside a theme /style/themes/theme-ui/ui-theme-components.*. - dnb-ui-tags was renamed and moved form /style/dnb-ui-tags.* to /style/themes/theme-ui/ui-theme-tags.*. * SCSS mixin was renamed from `fakeFocus` to `focusRing` as well as `removeFakeFocus` to `removeFocusRing`. * * - CSS Packages such as `dnb-ui-basis` and `dnb-ui-core` do not contain the fonts anymore. Fonts are now only a part of a theme file, such as: `/style/themes/theme-ui/dnb-theme-ui.*`. - The CSS package `dnb-ui-fonts` is moved inside a theme folder `/themes/theme-ui` * The DNB font is moved inside a subfolder in /assets/fonts/dnb/... * **Modal:** - Modal: Remove deprecated `mode` prop – it will default to `custom` mode. Use rather the `Dialog` or the `Drawer` component. * Remove support for Web Components and Vue * re-define Media Query Breakpoints and layout width * Read the docs about migration: https://eufemia.dnb.no/uilib/about-the-lib/releases/eufemia/v10-info * remove web components and vue support (#1946) ([ab7379e](ab7379e)), closes [#1946](#1946) * re-define Media Query Breakpoints and layout width (#1373) ([e0a11ce](e0a11ce)), closes [#1373](#1373) * v10 ([b7d6348](b7d6348)) ### 💈 Style Changes * **Button:** smaller tertiary button focus effect for Sbanken ([#2319](#2319)) ([aa3ab7d](aa3ab7d)) * move :root vars into their component itself ([#2102](#2102)) ([60a53fe](60a53fe)) ### 🐛 Bug Fixes * **Accordion:** enhance TypeScript type definitions ([035c0fb](035c0fb)) * **Anchor:** comments Anchor's inner_ref usage ([#1919](#1919)) ([b3623e9](b3623e9)) * **Anchor:** ensure id is passed down ([#2016](#2016)) ([e8efd09](e8efd09)) * **Autocomplete:** add HorizontalItem TypeScript type definition ([f97f6ea](f97f6ea)) * **Badge:** enhance semantic / accessibility and inherit skeleton from provider ([#1967](#1967)) ([42e20a7](42e20a7)) * **Button:** align large icon size to be same as in Figma ([#2239](#2239)) ([33e41e7](33e41e7)) * **Button:** fix icon alignment issue when left positioned ([#2371](#2371)) ([9250f15](9250f15)) * **Button:** remove left and right padding of tertiary button ([88bec0c](88bec0c)) * **DatePicker:** fix text prop for submit and cancel buttons ([#2254](#2254)) ([b5f1bfa](b5f1bfa)) * **DatePicker:** make focus handling on input work on second click ([#2039](#2039)) ([7a66806](7a66806)) * **Datepicker:** reset and cancel button gap ([6056009](6056009)) * **DatePicker:** shortcut buttons ([#2266](#2266)) ([eb79f77](eb79f77)) * **Dialog:** make action buttons responsive ([#2373](#2373)) ([3e1f146](3e1f146)) * **Dl:** ensure horizontal wrap no matter what available space ([#1965](#1965)) ([8e5729a](8e5729a)) * **DrawerList:** enhance TypeScript definition types ([5f7fd54](5f7fd54)) * **Dropdown:** enhance TypeScript definition types ([514f6fa](514f6fa)) * enhance scrollbar appearance ([#2046](#2046)) ([237331a](237331a)) * fix breadcumb alignment after tertiary button changes ([9f4a9a6](9f4a9a6)) * fix pagination alignment after tertiary button changes ([037a391](037a391)) * **GlobalStatus:** enhance TypeScript definition types ([dc58836](dc58836)) * **Heading:** enhance TypeScript definition types ([c3c736b](c3c736b)) * **Icon:** enhance alignment when used in paragraphs ([#2368](#2368)) ([78cc1e4](78cc1e4)) * **IconPrimary:** correct ts file extension usage ([#2289](#2289)) ([ad485bc](ad485bc)) * **InfoCard:** enhance accessibility + set max width of 60ch ([#1977](#1977)) ([e2075f3](e2075f3)) * **InputMasked:** expose inner_ref input element when useRef is used ([#2042](#2042)) ([b52bbe0](b52bbe0)) * **InputMasked:** fix integerLimit issue when combined with decimals ([#2338](#2338)) ([04c30e9](04c30e9)) * **InputMasked:** on custom mask – avoid interaction stall after focus ([#2269](#2269)) ([aa0300f](aa0300f)) * make docs/portal Windows compatible by properly handle backslashes and newlines ([#2038](#2038)) ([1196819](1196819)) * **MediaQuery:** enhance TypeScript types ([d93bd54](d93bd54)) * **Modal:** make children accept function with close method in parameters ([#2015](#2015)) ([bacc1f1](bacc1f1)) * **NumberFormat:** fix tooltip theme inheritance ([#2354](#2354)) ([ddffa58](ddffa58)) * **NumberFormat:** hide screen reader only text from being copied as HTML ([#2240](#2240)) ([26b6039](26b6039)) * omit showing Tooltip after Dialog or Drawer got closed ([#2375](#2375)) ([1c41dfe](1c41dfe)) * **Pagination:** enhance Pagination and InfinityScroller TypeScript definitions ([5a7de9d](5a7de9d)) * **Pagination:** fix hover style state after click to be emerald-green ([#2032](#2032)) ([2c399e8](2c399e8)) * remove `maintained node versions` from .browserslistrc ([#1917](#1917)) ([3e9b0d8](3e9b0d8)), closes [#1912](#1912) * remove FormRow context support from /elements ([#2031](#2031)) ([6560a80](6560a80)) * **ScrollView:** avoid usage of useLayoutEffect during SSR ([#2012](#2012)) ([6246afc](6246afc)) * **Skeleton:** add Skeleton.Exclude types ([b9512ff](b9512ff)) * **StepIndicator:** fix TypeScript spacing types ([c304d47](c304d47)) * **Timeline:** use ordered list element ([#1962](#1962)) ([bfc3004](bfc3004)) * **ToggleButton:** fixes error when pressing enter ([#2183](#2183)) ([da95ee4](da95ee4)) * upgrade Stylelint from v13 to v15 ([#1995](#1995)) ([b4ca07c](b4ca07c)) * **VisuallyHidden:** force properties to overcome unwanted CSS specificity ([#2366](#2366)) ([ed088de](ed088de)) ### ✨ Features * **Accordion:** export type AccordionIconPosition ([ff05f9f](ff05f9f)) * add shared Theme component and useTheme hook ([#2112](#2112)) ([9f88b71](9f88b71)) * **Anchor:** add `scrollToHash` feature ([#2290](#2290)) ([246eaa9](246eaa9)), closes [#2286](#2286) * **Anchor:** always show focus when `dnb-anchor--focus` is used ([#2364](#2364)) ([541e889](541e889)) * **Anchor:** create styles for Sbanken ([#2250](#2250)) ([208e891](208e891)) * **Anchor:** deprecate property target_blank_title ([#1882](#1882)) ([065321e](065321e)) * **Anchor:** move from elements to components ([#2275](#2275)) ([fdb5680](fdb5680)) * **Anchor:** remove horizontal padding ([#2365](#2365)) ([106c02f](106c02f)) * **Anchor:** Sbanken styling, added icon props ([#2318](#2318)) ([c6dcd03](c6dcd03)) * **Autocomplete:** export AutocompleteData type ([#2299](#2299)) ([0315b14](0315b14)) * **Autocomplete:** export AutocompleteOptionsRender type ([#2300](#2300)) ([becf345](becf345)) * build pure component css packages (without deps) ([#1928](#1928)) ([0af6b60](0af6b60)) * **build:** replace node-sass with dart-sass ([#1934](#1934)) ([87f918f](87f918f)) * **Button:** export type ButtonIcon ([bb4d70e](bb4d70e)) * **Button:** sbanken styling ([#2273](#2273)) ([f53faa0](f53faa0)) * **Checkbox:** deprecate default_state property ([#1863](#1863)) ([a022de3](a022de3)) * deprecate StepIndicator v1 ([#1840](#1840)) ([33d6fc2](33d6fc2)) * **Dialog:** adds ReactNode as type for texts ([#2294](#2294)) ([5a18768](5a18768)) * **DrawerList:** remove use_drawer_on_mobile & enable_closest_observer ([#1879](#1879)) ([e1bcfb0](e1bcfb0)) * **Dropdown:** export DropdownData type ([#2298](#2298)) ([81a0619](81a0619)) * **Dropdown:** remove deprecated selected_item property ([#1870](#1870)) ([ac509ca](ac509ca)) * **Element:** deprecate css, class, inner_ref, skeleton_method ([#1859](#1859)) ([5ef5292](5ef5292)) * expose package version ([#2327](#2327)) ([2a51dfc](2a51dfc)) * **FormRow:** remove indent feature ([#1975](#1975)) ([9c69439](9c69439)) * **FormStatus:** remove deprecated status property ([#1914](#1914)) ([75fe76c](75fe76c)) * **GlobalError:** add new styles (no illustrations anymore) ([#2381](#2381)) ([cf18ccd](cf18ccd)) * **GlobalStatus:** add possibility for a custom message (replace `global_status_id` with `globalStatus` prop) ([#2351](#2351)) ([551d87e](551d87e)) * **GlobalStatus:** deprecate AddStatus & Set ([#1891](#1891)) ([680b2c8](680b2c8)) * **H:** deprecate is and style_type properties ([#1856](#1856)) ([41c2ae8](41c2ae8)) * **HelpButton:** remove `modal_props` in favour of `render` ([#2333](#2333)) ([f95e249](f95e249)) * **Helpers:** deprecate .dnb-sr-only--inline & .dnb-not-sr-only ([#1865](#1865)) ([7789778](7789778)) * **Icons:** add new icons `handshake`, `heavy_equipment`, `id_card`, `investment_account`, `keyfigures`, `portfolio_analytics`, `sea_transport`, `shield_lock`, `file_zip`, `bus`, `building_shopping`, `handshake`, `heavy_equipment` ([#2178](#2178)) ([5e57d0d](5e57d0d)) * **Icons:** move all icons assets to `dnb` subfolder: assets/icons/dnb/*.svg ([#2187](#2187)) ([15b19b7](15b19b7)) * **Icons:** remove iOS (PDF) icons library support ([#2170](#2170)) ([6063ff3](6063ff3)) * include all type definitions in repo ([#1996](#1996)) ([a5d07fe](a5d07fe)) * **InputMasked:** ATTENTION! make allowLeadingZeroes default to true ([#1126](#1126)) ([dfddc3a](dfddc3a)) * **Logo:** Add brand and variant params for Sbanken logo ([#2271](#2271)) ([577e9b4](577e9b4)) * **Modal, Dialog, Drawer:** remove closeButtonAttributes ([#1926](#1926)) ([80c69ee](80c69ee)) * **Modal:** remove deprecated mode prop ([#1993](#1993)) ([7769b77](7769b77)) * **Modal:** remove deprecated trigger_ props ([#1918](#1918)) ([0582254](0582254)) * move `dnb-ui-fonts` package inside `/style/themes/theme-ui/` ([9dfa3d6](9dfa3d6)) * move `dnb-ui-tags` to themes ([#2140](#2140)) ([0a49595](0a49595)) * move `properties.scss` into theme ui ([#2035](#2035)) ([dce2a3a](dce2a3a)) * move browser assets to dnb subfolder ([#2083](#2083)) ([e0cf868](e0cf868)) * move DNB font in subfolder ([fdb05f3](fdb05f3)) * move DNB icons to subfolder (with v9 compatibility) ([#2200](#2200)) ([fd23310](fd23310)) * move dnb image assets to own subfolder ([#2099](#2099)) ([4101cca](4101cca)) * new browserslist config for es6 builds ([#1833](#1833)) ([0f02859](0f02859)) * **Number:** Removes component ([#1924](#1924)) ([5ecb3aa](5ecb3aa)) * **Pagination:** replace `page` with `pageNumber` ([3d538da](3d538da)) * **PaymentCard:** new card designs & new products ([#2264](#2264)) ([2e3d790](2e3d790)) * **PaymentCard:** rename type Metalic to Metallic ([#2226](#2226)) ([00c30ea](00c30ea)) * **P:** deprecate style_type property ([#1855](#1855)) ([f45e60c](f45e60c)) * **P:** remove deprecated class dnb-p--ingress ([#1872](#1872)) ([2837e8e](2837e8e)) * remove support for internet explorer ([#1807](#1807)) ([44b3803](44b3803)) * rename SCSS mixin `fakeFocus` to `focusRing` ([#2110](#2110)) ([47b5e47](47b5e47)) * replace visual test driver to jest-image-snapshot and Firefox (Playwright) ([#1945](#1945)) ([6402aa5](6402aa5)), closes [/github.com/puppeteer/puppeteer/issues/7514#issuecomment-1005917527](https://github.com/dnbexperience//github.com/puppeteer/puppeteer/issues/7514/issues/issuecomment-1005917527) [/github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js#L39](https://github.com/dnbexperience//github.com/dnbexperience/eufemia/blob/88279d1e6903497fce40d6c4322dd9b7c7b9ac3b/packages/dnb-eufemia/src/core/jest/jestSetupScreenshots.js/issues/L39) * **ScrollView:** add interactive=auto to observe the content ([#1984](#1984)) ([cc8d37a](cc8d37a)) * **Section:** deprecate style_type signal-orange ([#1886](#1886)) ([9e8dd3f](9e8dd3f)) * simplify CSS packages/themes structure ([c1a7894](c1a7894)) * **Skeleton:** removes style_type prop ([#2095](#2095)) ([3e0f4ce](3e0f4ce)) * **SkipContent:** add new component to skip large contents when using tab key ([#1981](#1981)) ([78dd384](78dd384)) * **Slider:** deprecate use_scrollwheel ([#1889](#1889)) ([ead0a49](ead0a49)) * **Slider:** remove deprecated onInit prop ([#1909](#1909)) ([3b72e9b](3b72e9b)) * **Slider:** remove dnb-range styling ([#1890](#1890)) ([839edd5](839edd5)) * **Space:** add conditional reset class: `dnb-space__reset` ([#1961](#1961)) ([0de26fe](0de26fe)) * **SpacingUtils:** deprecate createStyleObject ([#1892](#1892)) ([385d6d3](385d6d3)) * **StylisPlugin:** removes stylis plugin ([#2156](#2156)) ([8c96969](8c96969)) * **Switch:** deprecate default_state property ([#1864](#1864)) ([03a6bd0](03a6bd0)) * **Table:** deprecate sticky_offset ([#1883](#1883)) ([57c10d0](57c10d0)) * **Tags:** removed deprecated comments ([#1857](#1857)) ([9c17d75](9c17d75)) * **Theme:** add `darkMode` and `contrastMode` props ([#2355](#2355)) ([04b350e](04b350e)) * **Theming:** add `VisibilityByTheme` as a shared component ([#2280](#2280)) ([2592658](2592658)) * **Timeline:** deprecate name and date props ([#1884](#1884)) ([74f56b1](74f56b1)) * **Typography:** add `--line-height-lead` property ([#2237](#2237)) ([8dc9ed8](8dc9ed8)) * **Typography:** remove small prop from paragraph (p) ([#2234](#2234)) ([06c5ba5](06c5ba5)) * **Typography:** removed deprecated comments ([#1858](#1858)) ([0916cde](0916cde)) * **Typography:** Use text color on typography for Sbanken ([#2363](#2363)) ([f06291a](f06291a)) * use CSS vars in focus-ring (`fakeFocus`) ([#2109](#2109)) ([b0649d5](b0649d5)) ### 📝 Documentation * **Accordion:** improve docs of group & allow_close_all ([#2070](#2070)) ([2790302](2790302)) * add change log about v10 ([bdba81b](bdba81b)) * add docs about how to maintain theming ([#2097](#2097)) ([8bdfdb1](8bdfdb1)) * add info about the tertiary button "visual" breaking change ([24bf0e7](24bf0e7)) * add link to new Payment Card Figma file ([#2117](#2117)) ([239c239](239c239)) * add new styles flow diagram ([21e3b3c](21e3b3c)) * Add Sbanken color table and -documentation ([#2332](#2332)) ([e4324f8](e4324f8)) * adds a dot to quick guide - designers ([#2157](#2157)) ([3ba8a2e](3ba8a2e)) * adds missing accents to values in docs ([#2041](#2041)) ([cc7460f](cc7460f)) * **Anchor:** fix console warning when using class ([#2125](#2125)) ([85be7d5](85be7d5)) * **Autocomplete:** minor spelling improvement in title ([#2069](#2069)) ([6be0a77](6be0a77)) * **Autocomplete:** minor spelling improvements ([#2197](#2197)) ([3aa19a3](3aa19a3)) * **Autocomplete:** refactor jsx examples to tsx ([#2198](#2198)) ([6775dfb](6775dfb)) * **Autocomplete:** update docs about the debounce method ([#2138](#2138)) ([e4e4865](e4e4865)) * **Avatar:** fixes broken properties table ([#2030](#2030)) ([b8c9ed4](b8c9ed4)) * **Best Practices:** adds a dot ([#2151](#2151)) ([97e44aa](97e44aa)) * **Best Practices:** adds links to children pages ([#2161](#2161)) ([27d09a1](27d09a1)) * **Breadcrumb:** improve event docs ([66aad32](66aad32)) * capitalize component names in descriptions ([#2162](#2162)) ([80fb3b2](80fb3b2)) * **ColorsTable:** fixes color and hover effect ([#2122](#2122)) ([c82f570](c82f570)) * **Contact:** adds Joakim as contact ([#2023](#2023)) ([43f9f47](43f9f47)) * **Contribution Guide:** update legacy type definition handling ([#2048](#2048)) ([2c16fd6](2c16fd6)) * crate main doc for how to deal with brand ([#2100](#2100)) ([ae2416a](ae2416a)) * **CSS Styles:** fix console warning when using class ([#2127](#2127)) ([e903d69](e903d69)) * **Customization:** adds link to provider/context ([#2160](#2160)) ([009e056](009e056)) * **DatePicker:** refactor jsx examples to tsx ([#2204](#2204)) ([d2f1b42](d2f1b42)) * **Demo Apps:** fix console warning when using class ([#2126](#2126)) ([74142e8](74142e8)) * **DrawerList:** prevents change of direction when scrolling ([#2233](#2233)) ([cb4cbbd](cb4cbbd)) * **DrawerList:** refactor jsx examples to tsx ([#2209](#2209)) ([65dff60](65dff60)) * **DrawerList:** renamse fixedPosition to fixed_position ([#2093](#2093)) ([8e9ae76](8e9ae76)) * **Extension:** convert md to mdx files ([#2026](#2026)) ([ebc7988](ebc7988)) * fix outdated boolean usage ([#2013](#2013)) ([99b816c](99b816c)) * fix wrong Heading example about margin collapse ([eb866a8](eb866a8)) * **Font Weights:** fix console warning when using class ([#2132](#2132)) ([0fd9aa1](0fd9aa1)) * **FormLabel:** improve description of vertical prop ([#2098](#2098)) ([32020bd](32020bd)) * **FormRow:** refactor jsx examples to tsx ([#2219](#2219)) ([38fd221](38fd221)) * **FormSet:** refactor jsx examples to tsx ([#2208](#2208)) ([db32e5f](db32e5f)) * **Fragments:** minor docs improvement ([#2232](#2232)) ([151a800](151a800)) * **Front Page:** minor text improvements ([#2139](#2139)) ([5d9ad4d](5d9ad4d)) * **getOffsetTop:** fix wrong docs and console.log usage ([#2018](#2018)) ([9ba16b5](9ba16b5)) * **GlobalStatus:** improve docs for id prop ([#2067](#2067)) ([06e3ab1](06e3ab1)) * **GlobalStatus:** refactor jsx examples to tsx ([#2202](#2202)) ([91e4c05](91e4c05)) * **Grid:** removes WIP ([350321c](350321c)) * **Heading:** refactor jsx examples to tsx ([#2205](#2205)) ([534294e](534294e)) * **Helpers:** Adds info about dnb-unstyled-list in info page ([#2171](#2171)) ([37251b5](37251b5)) * **HTML Elements:** move mdx of unstyled and unsupported to elements.mdx ([#2154](#2154)) ([0982c3e](0982c3e)) * **Icon Details:** fix console warning when using class ([#2128](#2128)) ([79760c5](79760c5)) * **Icons:** link to v10 docs ([#2182](#2182)) ([34c7184](34c7184)) * **Input:** adds on_key_down event ([#2062](#2062)) ([ddbdff6](ddbdff6)) * **InputMasked:** refactor jsx examples to tsx ([#2207](#2207)) ([1253896](1253896)) * **Logos:** fix console warning in console ([#2123](#2123)) ([d4b5c4c](d4b5c4c)) * make click on anchor with hash work on first click ([#2019](#2019)) ([85caef3](85caef3)) * minor doc improvements ([#2283](#2283)) ([654ae82](654ae82)) * **Modal:** refactor jsx examples to tsx ([#2218](#2218)) ([532a58f](532a58f)) * Move Modal to Dialog/Drawer conversion docs to v10 migration ([#1921](#1921)) ([9c6eed7](9c6eed7)) * **Naming conventions:** fix console warning when using class ([#2129](#2129)) ([46031d0](46031d0)) * **NumberFormat:** fix info docs ([#2009](#2009)) ([af0e889](af0e889)) * **PaymentCard:** change imports of types to /payment-card ([41dc3ce](41dc3ce)) * **Portal:** removes Modal's new status ([#2312](#2312)) ([c9d98dd](c9d98dd)) * **ProgressIndicator:** removes props min_time and variant ([#1997](#1997)) ([26cce3f](26cce3f)) * **ProgressIndicator:** Update size properties ([a02a8fe](a02a8fe)) * **Radio:** improve event docs ([9383afb](9383afb)) * refactor contribution guide getting started ([#2008](#2008)) ([0a7cfdd](0a7cfdd)) * remove `smoothscroll-polyfill` as a recommendation ([#2020](#2020)) ([bae2e89](bae2e89)) * remove docs about CSS vars polyfills ([#2145](#2145)) ([e423d2d](e423d2d)) * remove docs about importing from @dnb/eufemia/elements ([#2173](#2173)) ([6d0bfed](6d0bfed)) * remove outdated info ([#1940](#1940)) ([0f77115](0f77115)) * remove properties import from docs ([#2034](#2034)) ([a0aaffc](a0aaffc)) * removes cards and spaceholder indicator ([#2061](#2061)) ([f8abfb6](f8abfb6)) * **ScrollView:** controll -> control ([#2225](#2225)) ([17db885](17db885)) * **ScrollView:** refactor jsx examples to tsx ([#2210](#2210)) ([1f97545](1f97545)) * **ScrollView:** sets Description as header in docs ([#2168](#2168)) ([2d05405](2d05405)) * **Skeleton:** refactor jsx examples to tsx ([#2203](#2203)) ([dabdba6](dabdba6)) * **SkipContent:** hide Events tab ([#2282](#2282)) ([fcbe37b](fcbe37b)) * **SkipContent:** refactor jsx examples to tsx ([#2211](#2211)) ([df34f0c](df34f0c)) * **Space:** refactor jsx examples to tsx ([#2199](#2199)) ([de7645c](de7645c)) * **Space:** refactor jsx properties to tsx ([#2216](#2216)) ([ecb941e](ecb941e)) * **StepIndicator:** format Steps Parameters table ([#2284](#2284)) ([884a09e](884a09e)) * **Table:** add info about the needed CSS class in v10 ([#1923](#1923)) ([407977e](407977e)) * **Table:** enhance info about the component and possibilities ([#2336](#2336)) ([f376d1d](f376d1d)) * **Table:** improve event docs ([e025745](e025745)) * **Table:** refactor jsx examples to tsx ([#2206](#2206)) ([f2d1c72](f2d1c72)) * **Tag:** improve event docs ([4a01c08](4a01c08)) * **Timeline:** fix broken link to example ([#2241](#2241)) ([418979b](418979b)) * **ToggleButton:** improve event docs ([a351019](a351019)) * **ToggleButton:** removes outdated label_position docs ([#2141](#2141)) ([a067f31](a067f31)) * **TypeScript:** remove outdated docs ([#2124](#2124)) ([497b3c3](497b3c3)) * **Typography:** fix console warning when using class ([#2133](#2133)) ([3088447](3088447)) * **Typography:** hast -> has ([#2221](#2221)) ([3ae59d5](3ae59d5)) * update docs about CSS formatting and styling ([#1964](#1964)) ([9b85816](9b85816)) * update v10 change log ([#1983](#1983)) ([8235f50](8235f50)) * update v10-info ([#1998](#1998)) ([47fa420](47fa420)) * **v10:** add docs for HelpButton's modal_props ([#2314](#2314)) ([4e825ee](4e825ee)) * **v10:** add example for updating import of properties ([#2313](#2313)) ([fdee6c3](fdee6c3)) * **v10:** adds examples for updating import of boolean props ([47f31f1](47f31f1)) * **v10:** adds examples for updating imports to assets and fonts ([f6adcef](f6adcef)) * **v10:** adds explicit examples for props that's changes type to boolean ([#2292](#2292)) ([6b23682](6b23682)) * **v10:** adds info about removal of closeButtonAttributes ([#2296](#2296)) ([8859256](8859256)) * **v10:** adds info about removal of closeButtonAttributes ([#2296](#2296)) ([b68b5bd](b68b5bd)) * **v10:** adds info about replacing white with default ([#2295](#2295)) ([c938f4d](c938f4d)) * **v10:** improve docs for EufemiaStyleImporter files ([#2302](#2302)) ([9c0d692](9c0d692)) * **v10:** improves docs of browser assets ([c0c0a3c](c0c0a3c)) * **v10:** minor spelling improvement ([#2301](#2301)) ([8105026](8105026)) * **v10:** prop change for FormStatus of status to state ([#2293](#2293)) ([0cc65be](0cc65be)) * **v10:** where -> was ([44eeeb8](44eeeb8))

snorrekim changed the title ~~Feat/anchor sbanken styling~~ feat(Anchor): Sbanken styling, added icon props May 9, 2023

vercel bot deployed to Preview May 9, 2023 14:16 View deployment

joakbjerk force-pushed the feat/anchor-sbanken-styling branch from ba699e2 to 5c04253 Compare May 9, 2023 16:13

vercel bot deployed to Preview May 9, 2023 16:19 View deployment

vercel bot deployed to Preview May 9, 2023 16:38 View deployment

tujoworker mentioned this pull request May 10, 2023

chore: fix VisibilityByTheme React hydration issue #2321

Merged

tujoworker force-pushed the feat/anchor-sbanken-styling branch from f9201a0 to b95a74f Compare May 10, 2023 08:59

tujoworker self-requested a review as a code owner May 10, 2023 08:59

vercel bot deployed to Preview May 10, 2023 09:11 View deployment

tujoworker force-pushed the feat/anchor-sbanken-styling branch from 05ae186 to 42bf814 Compare May 10, 2023 13:28

vercel bot deployed to Preview May 10, 2023 13:37 View deployment

snorrekim mentioned this pull request May 10, 2023

style(Button): smaller tertiary button focus effect for Sbanken #2319

Merged

tujoworker requested changes May 11, 2023

View reviewed changes

Snorre Kim and others added 8 commits May 12, 2023 16:35

feat(Anchor): updates sbanken styling and added props for icons

5e55567

chore(Anchor): update snapshot tests

2f46e09

Update screenshot tests for Sbanken theme

4daaea2

Updated screenshot tests for ui theme

7457fbb

chore(Anchor): fix linting and sass imports

24530d7

chore: update snapshot that runs bad on windows

5d29ac0

chore: bump commit

eb59658

screenshot update test

61302d1

vercel bot deployed to Preview May 12, 2023 14:44 View deployment

chore: remove old screenshots

652b8f4

vercel bot deployed to Preview May 12, 2023 14:54 View deployment

chore: moved legacy screenshot tests to own section

f005cbd

vercel bot deployed to Preview May 12, 2023 15:37 View deployment

eliland added 2 commits May 15, 2023 09:10

Update screenshot tests (sbanken changes only)

54b16fd

Update screenshot tests (ui changes only)

5225dc9

vercel bot deployed to Preview May 15, 2023 07:16 View deployment

tujoworker added 3 commits May 15, 2023 09:38

Rename icon_position to iconPosition because new feature props ca…

29c4c45

…n and should be written in camelCase (we change all the others in future)

Check out from v10: Firefox Mac version of visually hidden snapshot

994ac6d

Remove excess h1

eb16dfd

vercel bot deployed to Preview May 15, 2023 07:51 View deployment

vercel bot deployed to Preview May 15, 2023 08:01 View deployment

Ensure clean snapshots, without text from above at the top

ab61eab

tujoworker force-pushed the feat/anchor-sbanken-styling branch from 96a9faf to ab61eab Compare May 15, 2023 08:24

vercel bot deployed to Preview May 15, 2023 08:33 View deployment

tujoworker approved these changes May 15, 2023

View reviewed changes

snorrekim merged commit c8e63a1 into v10 May 15, 2023

snorrekim deleted the feat/anchor-sbanken-styling branch May 15, 2023 13:48

tujoworker added the released on @beta label May 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Anchor): Sbanken styling, added icon props #2318

feat(Anchor): Sbanken styling, added icon props #2318

snorrekim commented May 9, 2023

vercel bot commented May 9, 2023 •

edited

Loading

snorrekim commented May 9, 2023

snorrekim commented May 9, 2023

codesandbox-ci bot commented May 9, 2023 •

edited

Loading

snorrekim commented May 9, 2023

snorrekim commented May 9, 2023

tujoworker commented May 10, 2023

tujoworker left a comment •

edited

Loading

snorrekim commented May 11, 2023

tujoworker commented May 11, 2023

snorrekim commented May 12, 2023 •

edited

Loading

tujoworker left a comment

tujoworker commented May 26, 2023

feat(Anchor): Sbanken styling, added icon props #2318

feat(Anchor): Sbanken styling, added icon props #2318

Conversation

snorrekim commented May 9, 2023

Summary

vercel bot commented May 9, 2023 • edited Loading

snorrekim commented May 9, 2023

snorrekim commented May 9, 2023

codesandbox-ci bot commented May 9, 2023 • edited Loading

snorrekim commented May 9, 2023

snorrekim commented May 9, 2023

tujoworker commented May 10, 2023

tujoworker left a comment • edited Loading

Choose a reason for hiding this comment

snorrekim commented May 11, 2023

tujoworker commented May 11, 2023

snorrekim commented May 12, 2023 • edited Loading

tujoworker left a comment

Choose a reason for hiding this comment

tujoworker commented May 26, 2023

vercel bot commented May 9, 2023 •

edited

Loading

codesandbox-ci bot commented May 9, 2023 •

edited

Loading

tujoworker left a comment •

edited

Loading

snorrekim commented May 12, 2023 •

edited

Loading