@helsenorge/designsystem-react 13.7.0 → 13.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/lib/CHANGELOG.md +32 -0
  2. package/lib/Checkbox.js +1 -1
  3. package/lib/Checkbox.js.map +1 -1
  4. package/lib/DoctorSmall.js +22 -35
  5. package/lib/DoctorSmall.js.map +1 -1
  6. package/lib/Drawer.js +2 -1
  7. package/lib/Drawer.js.map +1 -1
  8. package/lib/HelpTriggerIcon.js +121 -43
  9. package/lib/HelpTriggerIcon.js.map +1 -1
  10. package/lib/IllustrationNames.js +6 -2
  11. package/lib/IllustrationNames.js.map +1 -1
  12. package/lib/Label.js +27 -23
  13. package/lib/Label.js.map +1 -1
  14. package/lib/LazyIllustration.js +5 -1
  15. package/lib/LazyIllustration.js.map +1 -1
  16. package/lib/RadioButton.js +1 -1
  17. package/lib/RadioButton.js.map +1 -1
  18. package/lib/StorkMedium.js +96 -0
  19. package/lib/StorkMedium.js.map +1 -0
  20. package/lib/ThinkingMedium.js +98 -0
  21. package/lib/ThinkingMedium.js.map +1 -0
  22. package/lib/components/Button/styles.module.scss +1 -3
  23. package/lib/components/Checkbox/styles.module.scss +4 -0
  24. package/lib/components/Checkbox/styles.module.scss.d.ts +1 -0
  25. package/lib/components/Drawer/styles.module.scss +4 -21
  26. package/lib/components/Drawer/styles.module.scss.d.ts +1 -1
  27. package/lib/components/ExpanderHierarchy/Expander.d.ts +2 -0
  28. package/lib/components/ExpanderHierarchy/ExpanderHierarchy.d.ts +1 -1
  29. package/lib/components/ExpanderHierarchy/index.js +2 -1
  30. package/lib/components/ExpanderHierarchy/index.js.map +1 -1
  31. package/lib/components/HelpTriggerIcon/HelpSign.d.ts +2 -2
  32. package/lib/components/HelpTriggerInline/styles.module.scss +1 -0
  33. package/lib/components/Illustrations/IllustrationNames.d.ts +1 -1
  34. package/lib/components/Illustrations/Stork.d.ts +11 -0
  35. package/lib/components/Illustrations/Stork.js +16 -0
  36. package/lib/components/Illustrations/Stork.js.map +1 -0
  37. package/lib/components/Illustrations/StorkMedium.d.ts +4 -0
  38. package/lib/components/Illustrations/StorkMedium.js +2 -0
  39. package/lib/components/Illustrations/Thinking.d.ts +9 -0
  40. package/lib/components/Illustrations/Thinking.js +16 -0
  41. package/lib/components/Illustrations/Thinking.js.map +1 -0
  42. package/lib/components/Illustrations/ThinkingMedium.d.ts +4 -0
  43. package/lib/components/Illustrations/ThinkingMedium.js +2 -0
  44. package/lib/components/Label/Label.d.ts +3 -1
  45. package/lib/components/Label/styles.module.scss +1 -1
  46. package/lib/components/RadioButton/styles.module.scss +4 -0
  47. package/lib/components/RadioButton/styles.module.scss.d.ts +1 -0
  48. package/lib/components/ServiceMessage/ServiceMessage.d.ts +3 -1
  49. package/lib/components/ServiceMessage/index.js +3 -3
  50. package/lib/components/ServiceMessage/index.js.map +1 -1
  51. package/lib/components/StickyNote/Triangle.d.ts +0 -1
  52. package/lib/components/StickyNote/index.js +8 -5
  53. package/lib/components/StickyNote/index.js.map +1 -1
  54. package/package.json +1 -1
package/lib/ThinkingMedium.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThinkingMedium.js","names":["ThinkingMedium: React.FC<BaseSvgIllustrationProps>"],"sources":["../src/components/Illustrations/ThinkingMedium.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { Palette } from './Thinking';\n\nimport { type BaseSvgIllustrationProps, ViewBoxSize } from '../Illustration';\n\nconst ThinkingMedium: React.FC<BaseSvgIllustrationProps> = ({ color, svgProperties, title }) => {\n const palette = ((): Palette => {\n switch (color) {\n case 'blueberry':\n return {\n lines: '#000',\n shapes1: '#188097',\n shapes2: '#AFDAE3',\n };\n case 'cherry':\n return {\n lines: '#000',\n shapes1: '#A31F0E',\n shapes2: '#F05A3B',\n };\n default:\n return {\n lines: '#1D1C1A',\n shapes1: '#989693',\n shapes2: '#D6D3D2',\n };\n }\n })();\n\n return (\n <svg {...svgProperties} viewBox={ViewBoxSize.Medium}>\n {title}\n <path d=\"m301.601 134.422-11.125 19.26-11.115-19.26h22.24Z\" fill={palette.lines} />\n <path\n d=\"M215.7 117.402c6.645 0 12.033-5.387 12.033-12.033s-5.388-12.033-12.033-12.033c-6.646 0-12.033 5.387-12.033 12.033s5.387 12.033 12.033 12.033Z\"\n fill={palette.shapes2}\n />\n <path\n d=\"M352.636 188.933a543.85 543.85 0 0 1-15.73 3.395 116.773 116.773 0 0 0-4.179-9.625c-2.107-4.28-6.387-8.313-9.121-10.633l21.21-6.968 7.809 23.82.011.011ZM138.19 133.719l-15.753-14.487c-1.659-1.524-5.11-.448-7.72 2.386-2.611 2.835-3.373 6.375-1.726 7.899l15.753 14.487c1.659 1.524 5.11.448 7.72-2.386 2.611-2.835 3.373-6.376 1.726-7.899Z\"\n fill={palette.lines}\n />\n <path\n d=\"M120.712 127.141c2.608-2.839 3.38-6.372 1.726-7.892-1.655-1.519-5.109-.449-7.717 2.391-2.607 2.839-3.38 6.373-1.725 7.892 1.654 1.519 5.109.449 7.716-2.391Zm170.674-32.739-1.429 27.457 13.427.699 1.429-27.457-13.427-.7Zm45.811 97.869a586.22 586.22 0 0 1-11.417 2.196c-26.576 4.84-50.587 7.271-71.931 8.089 1.132-22.531 19.764-40.447 42.576-40.447 19.204 0 35.439 12.706 40.772 30.162Z\"\n fill={palette.shapes1}\n />\n <path d=\"m362.978 139.172 2.957 11.047-11.047-2.969 8.09-8.078Z\" fill={palette.shapes2} />\n <path\n d=\"M299.965 451.799c-.918 0-1.669-.74-1.68-1.658l-.874-66.329a1.679 1.679 0 0 1 1.658-1.703h.022c.919 0 1.67.74 1.681 1.659l.874 66.328a1.678 1.678 0 0 1-1.658 1.703h-.023Zm-91.784-142.302c-1.288 0-2.621-.269-4.022-.84-7.563-3.149-18.767-21.871-24.66-50.352-.964-4.672-.605-12.358 3.607-18.632 2.869-4.291 7.093-7.07 12.191-8.022 13.87-2.611 20.75 7.036 21.041 7.45a1.68 1.68 0 0 1-2.756 1.927c-.258-.358-6.006-8.268-17.658-6.072-4.258.807-7.63 3.025-10.017 6.588-3.394 5.075-4.011 11.731-3.103 16.089 4.807 23.215 14.969 44.716 22.666 47.92 3.26 1.367 7.607 1.21 15.036-10.252a1.68 1.68 0 0 1 2.319-.493c.784.504.997 1.546.493 2.331-4.078 6.285-8.974 12.369-15.126 12.369l-.011-.011Z\"\n fill={palette.lines}\n />\n <path\n d=\"M215.699 255.82c-.47 0-.941-.191-1.266-.583-.078-.09-7.977-9.087-15.17-9.087h-.056c-2.353.012-4.336 1.02-6.062 3.059a1.683 1.683 0 0 1-2.364.202 1.683 1.683 0 0 1-.201-2.364c2.364-2.801 5.266-4.235 8.616-4.258 8.784-.045 17.422 9.826 17.792 10.252a1.684 1.684 0 0 1-.168 2.375 1.64 1.64 0 0 1-1.098.415l-.023-.011Zm-7.697 36.301c-.28 0-.56-.067-.818-.213a1.686 1.686 0 0 1-.65-2.285c5.569-9.938.807-13.871-3.787-17.68-2.521-2.084-4.907-4.056-4.661-6.902.225-2.667 2.712-5.176 8.325-8.403a1.681 1.681 0 1 1 1.681 2.913c-5.636 3.238-6.588 5.008-6.656 5.781-.089 1.098 1.625 2.521 3.451 4.034 4.583 3.787 11.518 9.523 4.583 21.915a1.673 1.673 0 0 1-1.468.863v-.023Zm-62.989-99.709c-.717 0-1.389-.47-1.614-1.198a10.523 10.523 0 0 1-.28-1.166c-.874-5.131 2.588-10.005 7.72-10.879a9.398 9.398 0 0 1 7.742 2.151 1.686 1.686 0 0 1-2.196 2.555 6.06 6.06 0 0 0-4.986-1.389c-3.305.56-5.535 3.708-4.963 7.002.045.258.101.516.179.751a1.683 1.683 0 0 1-1.12 2.095 1.8 1.8 0 0 1-.493.067l.011.011Zm128.276-75.598c-4.583 0-8.314-3.731-8.314-8.313 0-4.583 3.731-8.313 8.314-8.313 4.582 0 8.313 3.73 8.313 8.313 0 4.582-3.731 8.313-8.313 8.313Zm0-13.276a4.954 4.954 0 0 0-4.953 4.952 4.954 4.954 0 0 0 4.953 4.952 4.954 4.954 0 0 0 4.952-4.952 4.954 4.954 0 0 0-4.952-4.952Zm-19.496 100.226h-.1a1.682 1.682 0 0 1-1.58-1.782c1.389-23.293 20.783-41.544 44.155-41.544 19.473 0 36.447 12.481 42.24 31.057a1.677 1.677 0 0 1-1.109 2.107 1.677 1.677 0 0 1-2.107-1.109c-5.344-17.165-21.03-28.694-39.024-28.694-21.59 0-39.506 16.862-40.794 38.385a1.682 1.682 0 0 1-1.681 1.58Zm-12.089-111.67a1.4 1.4 0 0 1-.37-.045l-11.551-2.565a1.66 1.66 0 0 1-1.221-1.098 1.655 1.655 0 0 1 .302-1.614l8.134-9.803-13.019-2.095a1.678 1.678 0 0 1-.918-2.846l10.531-10.532a1.671 1.671 0 0 1 2.376 0c.649.66.661 1.725 0 2.375l-8.202 8.202 12.672 2.039c.594.09 1.098.504 1.311 1.064.213.56.101 1.199-.28 1.67l-8.258 9.949 8.874 1.972a1.68 1.68 0 0 1 1.277 2.005 1.683 1.683 0 0 1-1.635 1.311l-.023.011Zm-68.042 68.289a1.663 1.663 0 0 1-1.524-.975c-1.311-2.868-1.994-5.355-2.241-7.484-4.157-.84-8.257-3.63-10.162-9.658-.784-2.498-1.087-4.952-.93-7.283a14.842 14.842 0 0 1-2.812-1.613c-2.812-2.028-4.448-4.717-4.863-8-1.109-8.75 7.025-18.666 7.373-19.092a1.685 1.685 0 0 1 2.364-.224c.717.594.818 1.647.224 2.364-.079.09-7.563 9.221-6.622 16.526.303 2.353 1.445 4.213 3.496 5.692.493.359.974.65 1.445.896a15.674 15.674 0 0 1 5.076-7.764c3.417-2.846 7.63-3.877 10.218-2.498 1.232.649 1.938 1.927 1.927 3.484-.034 3.44-3.294 7.776-7.417 9.86-2.308 1.165-4.728 1.591-7.104 1.277-.022 1.591.213 3.372.841 5.355 1.333 4.247 4.022 6.409 6.901 7.216.348-3.384 1.815-5.479 2.757-6.487 2.33-2.51 5.859-3.563 8.582-2.555 1.893.695 3.07 2.319 3.148 4.325.146 3.832-3.675 7.305-9.086 8.235a13.47 13.47 0 0 1-1.916.202c.291 1.792.919 3.742 1.86 5.815.392.84.022 1.837-.829 2.229a1.739 1.739 0 0 1-.695.157h-.011Zm5.322-17.983c-1.199 0-2.723.561-3.922 1.86-1.098 1.177-1.725 2.734-1.893 4.572a13.605 13.605 0 0 0 1.501-.157c3.552-.616 6.375-2.768 6.297-4.796-.011-.414-.135-.997-.953-1.299a2.92 2.92 0 0 0-1.03-.168v-.012Zm-16.403-9.837c2.039.258 3.787-.28 5.109-.941 3.428-1.737 5.557-5.187 5.58-6.902 0-.157-.012-.425-.135-.493-1.165-.616-3.977.023-6.498 2.118-1.166.975-3.137 3.003-4.045 6.218h-.011Zm105.431-42.398a1.69 1.69 0 0 1-1.188-.493 1.67 1.67 0 0 1 0-2.376l7.574-7.574a1.67 1.67 0 0 1 2.375 0c.65.661.661 1.726 0 2.376l-7.574 7.574a1.69 1.69 0 0 1-1.187.493Zm-2.017-12.601a1.69 1.69 0 0 1-1.188-.493 1.67 1.67 0 0 1 0-2.375l7.294-7.294a1.67 1.67 0 0 1 2.375 0c.65.661.662 1.725 0 2.375l-7.293 7.294a1.69 1.69 0 0 1-1.188.493Zm88.165 42.094c-1.423 0-2.879-.213-4.336-.65-2.42-.729-4.526-2.23-6.263-4.146a17.099 17.099 0 0 1-7.328 1.95c-9.052.257-13.075-7.115-13.96-11.07a1.68 1.68 0 0 1 1.277-2.005 1.68 1.68 0 0 1 2.006 1.266c.09.369 2.106 8.739 10.577 8.447a13.455 13.455 0 0 0 5.389-1.31c-1.67-2.667-2.745-5.726-3.137-8.549-.493-3.597.235-6.196 2.061-7.35 1.065-.661 2.902-1.087 5.658.717 3.843 2.532 5.434 6.196 4.336 10.073-.638 2.252-2.084 4.302-4.044 5.938 1.266 1.311 2.745 2.319 4.392 2.812 4.773 1.434 8.257-.37 10.33-2.14 3.316-2.812 4.65-6.689 4.47-8.067a1.678 1.678 0 0 1 1.446-1.882c.918-.135 1.759.526 1.882 1.445.358 2.711-1.692 7.72-5.625 11.058-2.677 2.275-5.826 3.451-9.131 3.451v.012Zm-11.686-20.627a.539.539 0 0 0-.235.045c-.381.235-.863 1.557-.516 4.044.325 2.342 1.233 4.93 2.622 7.171 1.446-1.255 2.454-2.734 2.868-4.179.684-2.432-.336-4.627-2.946-6.353-.885-.582-1.457-.74-1.77-.74l-.023.012Zm-221.762 28.11c2.608-2.839 3.38-6.372 1.726-7.892-1.655-1.519-5.109-.449-7.717 2.391-2.607 2.839-3.38 6.373-1.725 7.892 1.654 1.519 5.109.449 7.716-2.391Z\"\n fill={palette.lines}\n />\n <path\n d=\"M114.963 131.871c-1.187 0-2.263-.358-3.092-1.12-1.244-1.143-1.692-2.98-1.244-5.053.392-1.782 1.401-3.63 2.868-5.221 3.283-3.574 7.72-4.672 10.095-2.488 2.376 2.185 1.67 6.689-1.613 10.275-2.14 2.33-4.773 3.607-7.003 3.607h-.011Zm1.009-9.12c-1.042 1.143-1.793 2.476-2.051 3.664-.19.863-.101 1.546.235 1.86.706.638 3.194.056 5.345-2.286s2.521-4.874 1.826-5.523c-.706-.639-3.193-.056-5.344 2.285h-.011Z\"\n fill={palette.lines}\n />\n <path\n d=\"M130.705 146.358c-1.187 0-2.263-.358-3.092-1.12l-15.753-14.487a1.682 1.682 0 0 1 2.274-2.476l15.753 14.487c.695.638 3.194.056 5.345-2.286 2.151-2.341 2.521-4.874 1.826-5.523l-15.753-14.487a1.681 1.681 0 1 1 2.274-2.476l15.753 14.486c2.376 2.185 1.659 6.689-1.624 10.263-2.14 2.331-4.773 3.608-7.003 3.608v.011Zm133.318 13.154a17.92 17.92 0 0 1-3.149-.28c-6.308-1.12-10.677-5.188-9.949-9.255.381-2.106 2.005-3.787 4.594-4.739 2.274-.84 5.097-1.02 7.943-.504 6.308 1.12 10.678 5.187 9.95 9.254-.381 2.107-2.006 3.787-4.594 4.74-1.423.526-3.07.784-4.795.784Zm-3.698-11.697c-1.333 0-2.599.19-3.652.583-1.401.515-2.286 1.299-2.443 2.173-.336 1.86 2.689 4.549 7.227 5.356 2.241.403 4.504.269 6.196-.348 1.4-.515 2.285-1.299 2.442-2.173.336-1.86-2.689-4.549-7.226-5.356a14.23 14.23 0 0 0-2.555-.224l.011-.011Z\"\n fill={palette.lines}\n />\n <path\n d=\"M250.678 162.53c-.1 0-.201 0-.302-.022a1.677 1.677 0 0 1-1.356-1.95l1.905-10.599a1.684 1.684 0 0 1 1.949-1.356 1.677 1.677 0 0 1 1.356 1.95l-1.905 10.599a1.676 1.676 0 0 1-1.647 1.389v-.011Zm17.771 11.269c-.101 0-.202 0-.303-.022a1.677 1.677 0 0 1-1.356-1.95l3.306-18.431a1.684 1.684 0 0 1 1.949-1.355 1.676 1.676 0 0 1 1.356 1.949l-3.305 18.431a1.678 1.678 0 0 1-1.647 1.389v-.011Zm-27.327-32.967a1.67 1.67 0 0 1-1.546-1.031l-5.233-12.391a1.661 1.661 0 0 1 0-1.289c.168-.414.493-.739.908-.918l25.332-10.689a1.68 1.68 0 0 1 2.196.896l5.233 12.392c.179.414.179.874 0 1.288-.168.415-.493.74-.908.919l-25.332 10.689a1.7 1.7 0 0 1-.65.134Zm-3.025-13.176 3.921 9.288 22.24-9.377-3.921-9.289-22.24 9.378Zm-6.891 29.578c-.426 0-.841-.157-1.165-.47l-12.291-11.899-6.297 6.498a1.67 1.67 0 0 1-2.375.034 1.67 1.67 0 0 1-.034-2.375l7.462-7.709a1.68 1.68 0 0 1 2.375-.033l13.501 13.075a1.67 1.67 0 0 1 .034 2.375 1.7 1.7 0 0 1-1.21.516v-.012Zm-46.945 21.455c-.426 0-.841-.157-1.166-.47a1.672 1.672 0 0 1-.033-2.376l14.857-15.338a1.67 1.67 0 0 1 2.375-.034c.672.65.683 1.715.033 2.376l-14.856 15.338a1.699 1.699 0 0 1-1.21.515v-.011Zm147.67-14.599c-.291 0-.582-.078-.84-.224l-20.672-11.932a1.683 1.683 0 0 1-.616-2.297l11.932-20.672a1.706 1.706 0 0 1 1.02-.784 1.701 1.701 0 0 1 1.277.168l20.672 11.932a1.683 1.683 0 0 1 .616 2.297l-11.932 20.672a1.703 1.703 0 0 1-1.02.784 1.925 1.925 0 0 1-.437.056Zm-18.375-14.229 17.759 10.252 10.252-17.759-17.759-10.252-10.252 17.759Zm-152.465 15.736h-.056l-15.653-.47a1.708 1.708 0 0 1-1.434-.886 1.696 1.696 0 0 1 .045-1.68l8.235-13.322c.314-.515.885-.851 1.479-.795a1.703 1.703 0 0 1 1.434.885l7.417 13.792a1.7 1.7 0 0 1-.044 1.681 1.689 1.689 0 0 1-1.435.795h.012Zm-12.695-3.742 9.838.291-4.661-8.661-5.177 8.37Zm142.08-6.875a1.69 1.69 0 0 1-1.457-.84l-11.114-19.26a1.666 1.666 0 0 1 0-1.68 1.687 1.687 0 0 1 1.456-.841h22.24a1.69 1.69 0 0 1 1.457.841 1.67 1.67 0 0 1 0 1.68l-11.115 19.26c-.302.516-.851.84-1.456.84h-.011Zm-8.213-19.259 8.213 14.218 8.212-14.218h-16.425Z\"\n fill={palette.lines}\n />\n <path d=\"m198.109 134.477 18.476 24.761-30.689 3.619 12.213-28.38Z\" fill={palette.lines} />\n <path\n d=\"M185.897 164.536a1.671 1.671 0 0 1-1.345-.672 1.69 1.69 0 0 1-.202-1.669l12.202-28.391c.235-.549.75-.93 1.344-1.009a1.654 1.654 0 0 1 1.546.661l18.487 24.761a1.69 1.69 0 0 1 .202 1.67c-.235.549-.751.93-1.345 1.008l-30.688 3.63c-.067 0-.134.011-.201.011Zm12.593-26.733-9.904 23.036 24.906-2.947-15.002-20.1v.011Zm117.554 116.906c-4.941 0-10.655-1.065-17.165-3.855a1.69 1.69 0 0 1-.885-2.207 1.688 1.688 0 0 1 2.207-.885c24.447 10.498 36.077-5.019 36.559-5.692a1.685 1.685 0 0 1 2.342-.381c.75.538.918 1.591.381 2.342-.101.146-7.899 10.678-23.451 10.678h.012Z\"\n fill={palette.lines}\n />\n <path\n d=\"M198.277 198.441c0 .896-.056 1.77-.145 2.633-20.089-1.972-35.854-5.143-47.047-8.022 2.443-10.611 11.944-18.521 23.283-18.521 13.198 0 23.909 10.7 23.909 23.91Z\"\n fill={palette.shapes2}\n />\n <path\n d=\"M253.961 168.822a15.8 15.8 0 0 1-2.073 7.865l-14.43-8.335-8.101 14.027c-4.482-2.846-7.462-7.854-7.462-13.557 0-8.862 7.171-16.033 16.033-16.033 8.863 0 16.033 7.171 16.033 16.033Z\"\n fill={palette.shapes1}\n />\n <path\n d=\"M154.043 449.909a1.76 1.76 0 0 1-.784-.19 1.68 1.68 0 0 1-.695-2.275c2.824-5.344 5.468-10.162 8.034-14.834 21.164-38.576 29.926-54.541 3.428-121.71-15.551-39.416-21.243-70.149-23.282-88.994-1.972-18.162-1.053-28.885-.773-31.417a2.363 2.363 0 0 1 0-.571c.123-.852.963-1.457 1.792-1.446.359.012.695.146.975.359.706.246 3.025.964 10.577 2.902 13.602 3.496 28.738 6.072 44.984 7.663 17.681 1.726 36.347 2.23 55.483 1.468 23.025-.885 47.147-3.596 71.695-8.056a464.258 464.258 0 0 0 11.384-2.196 553.362 553.362 0 0 0 15.394-3.327 565.684 565.684 0 0 0 7.249-1.714c.46-.112.941-.023 1.334.246.392.269.649.684.717 1.154.045.336 1.098 8.302-3.608 29.187l42.912 86.148c.224.46.235.986.022 1.457a1.697 1.697 0 0 1-1.12.93l-30.812 7.663c-.056 37.702-2.677 71.404-30.733 73.107-9.893.605-33.052 2.006-55.437-4.033-27.473-7.406-44.772-23.428-51.427-47.618a1.674 1.674 0 0 1 1.176-2.061 1.675 1.675 0 0 1 2.062 1.176c6.319 22.957 22.822 38.184 49.062 45.265 21.86 5.893 44.638 4.515 54.363 3.921 25.467-1.546 27.584-34.497 27.584-71.056a1.69 1.69 0 0 1 1.278-1.636l30.049-7.473-42.251-84.815a1.682 1.682 0 0 1-.134-1.121c3.417-15.002 3.809-23.282 3.776-26.688-1.782.426-3.552.84-5.311 1.244a595.78 595.78 0 0 1-15.473 3.35c-3.72.762-7.574 1.501-11.451 2.207-24.705 4.493-48.984 7.227-72.165 8.112-19.283.75-38.106.257-55.942-1.491-16.415-1.602-31.719-4.212-45.5-7.753-4.269-1.098-7.395-1.938-9.311-2.498-.706 9.624-1.838 51.718 23.977 117.172 27.069 68.637 17.456 86.16-3.619 124.557-2.555 4.661-5.199 9.467-8.011 14.789a1.683 1.683 0 0 1-1.49.896h.022Z\"\n fill={palette.lines}\n />\n <path\n d=\"M217.985 203.765a1.683 1.683 0 0 1-1.456-2.521l19.517-33.826a1.71 1.71 0 0 1 1.02-.784 1.701 1.701 0 0 1 1.277.168l22.756 13.143a1.681 1.681 0 0 1 .616 2.296 1.673 1.673 0 0 1-2.297.617l-21.299-12.302-18.677 32.368a1.683 1.683 0 0 1-1.457.841Z\"\n fill={palette.lines}\n />\n </svg>\n );\n};\n\nexport default ThinkingMedium;\n"],"mappings":";;AAMA,IAAMA,kBAAsD,EAAE,OAAO,eAAe,YAAY;CAC9F,MAAM,iBAA0B;AAC9B,UAAQ,OAAR;GACE,KAAK,YACH,QAAO;IACL,OAAO;IACP,SAAS;IACT,SAAS;IACV;GACH,KAAK,SACH,QAAO;IACL,OAAO;IACP,SAAS;IACT,SAAS;IACV;GACH,QACE,QAAO;IACL,OAAO;IACP,SAAS;IACT,SAAS;IACV;;KAEH;AAEJ,QACE,qBAAC,OAAA;EAAI,GAAI;EAAe,SAAS,YAAY;;GAC1C;GACD,oBAAC,QAAA;IAAK,GAAE;IAAoD,MAAM,QAAQ;KAAS;GACnF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IAAK,GAAE;IAAyD,MAAM,QAAQ;KAAW;GAC1F,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IAAK,GAAE;IAA4D,MAAM,QAAQ;KAAS;GAC3F,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;;GACE;;AAIV,IAAA,yBAAe"}
package/lib/components/Button/styles.module.scss CHANGED
@@ -94,9 +94,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
94
94
  }
95
95
 
96
96
  :disabled > & {
97
- @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
98
- color: palette.$neutral700;
99
- }
97
+ color: palette.$neutral700;
100
98
  }
101
99
  }
102
100
 
package/lib/components/Checkbox/styles.module.scss CHANGED
@@ -458,3 +458,7 @@ $padding-clickable-area-left: 8px;
458
458
  margin-top: -$padding-clickable-area-top-bottom;
459
459
  padding-left: calc(2.8rem + $padding-clickable-area-left);
460
460
  }
461
+
462
+ .checkbox-afterlabelchildren-wrapper {
463
+ padding-top: $padding-clickable-area-top-bottom;
464
+ }
package/lib/components/Checkbox/styles.module.scss.d.ts CHANGED
@@ -17,6 +17,7 @@ export type Styles = {
17
17
  'checkbox__icon-wrapper--on-grey': string;
18
18
  'checkbox__icon-wrapper--on-invalid': string;
19
19
  'checkbox__icon-wrapper--on-white': string;
20
+ 'checkbox-afterlabelchildren-wrapper': string;
20
21
  'checkbox-errors': string;
21
22
  'checkbox-label': string;
22
23
  'checkbox-label__large--checked': string;
package/lib/components/Drawer/styles.module.scss CHANGED
@@ -73,15 +73,8 @@
73
73
 
74
74
  &__header {
75
75
  display: flex;
76
- align-items: center;
77
76
  justify-content: space-between;
78
-
79
- // legg til padding for å gi plass til close button
80
- padding: var(--core-space-xs) 2.75rem var(--core-space-xs) var(--core-space-2xs);
81
-
82
- @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
83
- padding: var(--core-space-xs) 2.75rem var(--core-space-xs) var(--core-space-xs);
84
- }
77
+ padding: var(--core-space-xs);
85
78
 
86
79
  @include breakpoints.tiny-screens-media-query {
87
80
  padding: var(--core-space-4xs) 0;
@@ -89,22 +82,12 @@
89
82
  align-items: flex-start;
90
83
  }
91
84
 
92
- &--no-close-button {
93
- padding: var(--core-space-xs) var(--core-space-2xs);
94
-
95
- @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
96
- padding: var(--core-space-xs);
97
- }
85
+ &__title {
86
+ margin-top: 0.5rem !important;
98
87
  }
99
88
 
100
89
  &__close-button {
101
- position: absolute;
102
- top: 0;
103
- right: 0;
104
-
105
- @include breakpoints.tiny-screens-media-query {
106
- position: relative;
107
- }
90
+ align-self: flex-start;
108
91
  }
109
92
  }
110
93
 
package/lib/components/Drawer/styles.module.scss.d.ts CHANGED
@@ -12,7 +12,7 @@ export type Styles = {
12
12
  drawer__footer: string;
13
13
  drawer__header: string;
14
14
  'drawer__header__close-button': string;
15
- 'drawer__header--no-close-button': string;
15
+ drawer__header__title: string;
16
16
  drawer__overlay: string;
17
17
  };
18
18
 
package/lib/components/ExpanderHierarchy/Expander.d.ts CHANGED
@@ -13,6 +13,8 @@ export interface ExpanderProps extends ExpanderHierarchyCommonProps {
13
13
  testId?: string;
14
14
  /** Adds custom classes to the element. */
15
15
  className?: string;
16
+ /** ref that is placed on the li element */
17
+ ref?: React.RefObject<HTMLLIElement>;
16
18
  }
17
19
  export type ExpanderType = React.FC<ExpanderProps>;
18
20
  declare const Expander: ExpanderType;
package/lib/components/ExpanderHierarchy/ExpanderHierarchy.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { default as React } from 'react';
2
- import { ExpanderType } from './Expander';
3
2
  import { HeadingTags } from './utils';
3
+ import { ExpanderType } from './Expander';
4
4
  export interface ExpanderHierarchyCommonProps {
5
5
  /** Changes the underlying element of the expander title. Default: h2. */
6
6
  htmlMarkup?: HeadingTags;
package/lib/components/ExpanderHierarchy/index.js CHANGED
@@ -50,10 +50,11 @@ const getHeadingTag = (htmlMarkup) => {
50
50
  default: return "h2";
51
51
  }
52
52
  };
53
- var Expander = ({ title, htmlMarkup = "h2", level = 1, print, expanded = false, onExpand, children, testId, className }) => {
53
+ var Expander = ({ title, htmlMarkup = "h2", level = 1, print, expanded = false, onExpand, children, testId, className, ref }) => {
54
54
  const contentClasses = classNames(styles.expander__content, (level === 1 || level === 2) && styles[`expander__content--${level}`], level > 2 && styles[`expander__content--3-and-lower`]);
55
55
  return /* @__PURE__ */ jsxs("li", {
56
56
  className: classNames(styles.expander, className),
57
+ ref,
57
58
  children: [/* @__PURE__ */ jsx(ExpanderButton_default, {
58
59
  htmlMarkup,
59
60
  level,
package/lib/components/ExpanderHierarchy/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["ExpanderButton: React.FC<ExpanderButtonProps>","Expander: ExpanderType","ExpanderHierarchy: ExpanderHierarchyCompound"],"sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx","../../../src/components/ExpanderHierarchy/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n expanded: boolean;\n onExpand?: (isExpanded: boolean) => void;\n children: string;\n testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n const handleClick = (): void => {\n setIsExpanded(!isExpanded);\n };\n\n const CustomTag = htmlMarkup;\n\n const buttonClasses = classNames(\n styles.expander__button,\n level > 1 && styles[`expander__button--2-and-lower`],\n print && styles['expander__button--print']\n );\n\n const titleClasses = classNames(\n styles.expander__title,\n (level === 1 || level === 2 || level === 3) && styles[`expander__title--${level}`],\n level > 3 && styles[`expander__title--4-and-lower`],\n isExpanded && styles['expander__title--expanded'],\n print && styles['expander__title--print']\n );\n\n const iconClasses = classNames(\n styles.expander__icon,\n level > 1 && styles[`expander__icon--2-and-lower`],\n level > 2 && styles[`expander__icon--3-and-lower`]\n );\n\n return (\n <CustomTag className={titleClasses}>\n <button\n type=\"button\"\n onClick={handleClick}\n className={buttonClasses}\n aria-expanded={isExpanded}\n ref={refObject}\n data-testid={testId}\n data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n >\n {children}\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n </button>\n </CustomTag>\n );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n switch (htmlMarkup) {\n case 'h2':\n return 'h3';\n case 'h3':\n return 'h4';\n case 'h4':\n return 'h5';\n case 'h5':\n return 'h6';\n case 'h6':\n return 'h6';\n default:\n return 'h2';\n }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy, { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n /** Sets the trigger title */\n title: string;\n /** Opens or closes the expander */\n expanded?: boolean;\n /** Called when expander is open/closed. */\n onExpand?: (isExpanded: boolean) => void;\n /** Sets the expanded content */\n children?: React.ReactNode;\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n /** Adds custom classes to the element. */\n className?: string;\n}\n\nexport type ExpanderType = React.FC<ExpanderProps>;\n\nconst Expander: ExpanderType = ({\n title,\n htmlMarkup = 'h2',\n level = 1,\n print,\n expanded = false,\n onExpand,\n children,\n testId,\n className,\n}: ExpanderProps) => {\n const contentClasses = classNames(\n styles.expander__content,\n (level === 1 || level === 2) && styles[`expander__content--${level}`],\n level > 2 && styles[`expander__content--3-and-lower`]\n );\n\n return (\n <li className={classNames(styles.expander, className)}>\n <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n {title}\n </ExpanderButton>\n <div className={contentClasses}>\n {React.Children.map(children, child =>\n isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n : child\n )}\n </div>\n </li>\n );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Expander, { ExpanderProps, ExpanderType } from './Expander';\nimport { HeadingTags } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n /** Changes the underlying element of the expander title. Default: h2. */\n htmlMarkup?: HeadingTags;\n /** Expand all children when printing. */\n print?: boolean;\n /** Expander nesting level. Should not be set manually. */\n level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n children: React.ReactNode;\n /** Sets the data-testid attribute on the expander list. */\n testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n htmlMarkup = 'h2',\n level = 1,\n print,\n children,\n testId,\n}: ExpanderHierarchyProps) => {\n const listClasses = classNames(\n styles.expanderhierarchy,\n level === 2 && styles[`expanderhierarchy--${level}`],\n level > 2 && styles[`expanderhierarchy--3-and-lower`]\n );\n\n return (\n <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n {React.Children.map(children, child =>\n isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n )}\n </ul>\n );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n","import ExpanderHierarchy from './ExpanderHierarchy';\nexport * from './ExpanderHierarchy';\nexport default ExpanderHierarchy;\n"],"mappings":";;;;;;;;;;;;AAqBA,IAAMA,kBAAiD,EAAE,aAAa,MAAM,QAAQ,GAAG,OAAO,UAAU,UAAU,UAAU,aAAa;CACvI,MAAM,EAAE,WAAW,cAAc,kBAAqC;CACtE,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,SAAS;CAEjE,MAAM,oBAA0B;AAC9B,gBAAc,CAAC,WAAW;;CAG5B,MAAM,YAAY;CAElB,MAAM,gBAAgB,WACpB,OAAO,kBACP,QAAQ,KAAK,OAAO,kCACpB,SAAS,OAAO,2BACjB;CAED,MAAM,eAAe,WACnB,OAAO,kBACN,UAAU,KAAK,UAAU,KAAK,UAAU,MAAM,OAAO,oBAAoB,UAC1E,QAAQ,KAAK,OAAO,iCACpB,cAAc,OAAO,8BACrB,SAAS,OAAO,0BACjB;CAED,MAAM,cAAc,WAClB,OAAO,gBACP,QAAQ,KAAK,OAAO,gCACpB,QAAQ,KAAK,OAAO,+BACrB;AAED,QACE,oBAAC,WAAA;EAAU,WAAW;YACpB,qBAAC,UAAA;GACC,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,KAAK;GACL,eAAa;GACb,oBAAkB,YAAY;cAE7B,UACD,oBAAC,cAAA;IAAK,SAAS,aAAa,oBAAY;IAAwB;IAAW,WAAW;IAAa,MAAM,SAAS;KAAU,CAAA;IACrH;GACC;;AAIhB,IAAA,yBAAe;ACnEf,MAAa,iBAAiB,eAA0C;AACtE,SAAQ,YAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,QACE,QAAO;;;ACab,IAAMC,YAA0B,EAC9B,OACA,aAAa,MACb,QAAQ,GACR,OACA,WAAW,OACX,UACA,UACA,QACA,gBACmB;CACnB,MAAM,iBAAiB,WACrB,OAAO,oBACN,UAAU,KAAK,UAAU,MAAM,OAAO,sBAAsB,UAC7D,QAAQ,KAAK,OAAO,kCACrB;AAED,QACE,qBAAC,MAAA;EAAG,WAAW,WAAW,OAAO,UAAU,UAAU;aACnD,oBAAC,wBAAA;GAA2B;GAAmB;GAAc;GAAiB;GAAoB;GAAkB;aACjH;IACc,EACjB,oBAAC,OAAA;GAAI,WAAW;aACb,MAAM,SAAS,IAAI,WAAU,UAC5B,YAAoC,OAAO,4BAAkB,GACzD,MAAM,aAAa,OAAO;IAAE,YAAY,cAAc,WAAW;IAAE,OAAO,QAAQ;IAAG;IAAO,CAAC,GAC7F,MACL;IACG,CAAA;GACH;;AAIT,IAAA,mBAAe;AC/Bf,IAAMC,qBAAgD,EACpD,aAAa,MACb,QAAQ,GACR,OACA,UACA,aAC4B;AAO5B,QACE,oBAAC,MAAA;EAAG,WAPc,WAClB,SAAO,mBACP,UAAU,KAAK,SAAO,sBAAsB,UAC5C,QAAQ,KAAK,SAAO,kCACrB;EAG6B,eAAa;EAAQ,oBAAkB,YAAY;YAC5E,MAAM,SAAS,IAAI,WAAU,UAC5B,YAA2B,OAAO,iBAAS,GAAG,MAAM,aAAa,OAAO;GAAE;GAAY;GAAO;GAAO,CAAC,GAAG,MACzG;GACE;;AAIT,kBAAkB,WAAW;AAE7B,IAAA,8BAAe;ACpDf,IAAA,4BAAe"}
1
+ {"version":3,"file":"index.js","names":["ExpanderButton: React.FC<ExpanderButtonProps>","Expander: ExpanderType","ExpanderHierarchy: ExpanderHierarchyCompound"],"sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx","../../../src/components/ExpanderHierarchy/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n expanded: boolean;\n onExpand?: (isExpanded: boolean) => void;\n children: string;\n testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n const handleClick = (): void => {\n setIsExpanded(!isExpanded);\n };\n\n const CustomTag = htmlMarkup;\n\n const buttonClasses = classNames(\n styles.expander__button,\n level > 1 && styles[`expander__button--2-and-lower`],\n print && styles['expander__button--print']\n );\n\n const titleClasses = classNames(\n styles.expander__title,\n (level === 1 || level === 2 || level === 3) && styles[`expander__title--${level}`],\n level > 3 && styles[`expander__title--4-and-lower`],\n isExpanded && styles['expander__title--expanded'],\n print && styles['expander__title--print']\n );\n\n const iconClasses = classNames(\n styles.expander__icon,\n level > 1 && styles[`expander__icon--2-and-lower`],\n level > 2 && styles[`expander__icon--3-and-lower`]\n );\n\n return (\n <CustomTag className={titleClasses}>\n <button\n type=\"button\"\n onClick={handleClick}\n className={buttonClasses}\n aria-expanded={isExpanded}\n ref={refObject}\n data-testid={testId}\n data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n >\n {children}\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n </button>\n </CustomTag>\n );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n switch (htmlMarkup) {\n case 'h2':\n return 'h3';\n case 'h3':\n return 'h4';\n case 'h4':\n return 'h5';\n case 'h5':\n return 'h6';\n case 'h6':\n return 'h6';\n default:\n return 'h2';\n }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy, { type ExpanderHierarchyCommonProps, type ExpanderHierarchyProps } from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n /** Sets the trigger title */\n title: string;\n /** Opens or closes the expander */\n expanded?: boolean;\n /** Called when expander is open/closed. */\n onExpand?: (isExpanded: boolean) => void;\n /** Sets the expanded content */\n children?: React.ReactNode;\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n /** Adds custom classes to the element. */\n className?: string;\n /** ref that is placed on the li element */\n ref?: React.RefObject<HTMLLIElement>;\n}\n\nexport type ExpanderType = React.FC<ExpanderProps>;\n\nconst Expander: ExpanderType = ({\n title,\n htmlMarkup = 'h2',\n level = 1,\n print,\n expanded = false,\n onExpand,\n children,\n testId,\n className,\n ref,\n}: ExpanderProps) => {\n const contentClasses = classNames(\n styles.expander__content,\n (level === 1 || level === 2) && styles[`expander__content--${level}`],\n level > 2 && styles[`expander__content--3-and-lower`]\n );\n\n return (\n <li className={classNames(styles.expander, className)} ref={ref}>\n <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n {title}\n </ExpanderButton>\n <div className={contentClasses}>\n {React.Children.map(children, child =>\n isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n : child\n )}\n </div>\n </li>\n );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HeadingTags } from './utils';\n\nimport Expander, { type ExpanderProps, type ExpanderType } from './Expander';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n /** Changes the underlying element of the expander title. Default: h2. */\n htmlMarkup?: HeadingTags;\n /** Expand all children when printing. */\n print?: boolean;\n /** Expander nesting level. Should not be set manually. */\n level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n children: React.ReactNode;\n /** Sets the data-testid attribute on the expander list. */\n testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n htmlMarkup = 'h2',\n level = 1,\n print,\n children,\n testId,\n}: ExpanderHierarchyProps) => {\n const listClasses = classNames(\n styles.expanderhierarchy,\n level === 2 && styles[`expanderhierarchy--${level}`],\n level > 2 && styles[`expanderhierarchy--3-and-lower`]\n );\n\n return (\n <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n {React.Children.map(children, child =>\n isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n )}\n </ul>\n );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n","import ExpanderHierarchy from './ExpanderHierarchy';\nexport * from './ExpanderHierarchy';\nexport default ExpanderHierarchy;\n"],"mappings":";;;;;;;;;;;;AAqBA,IAAMA,kBAAiD,EAAE,aAAa,MAAM,QAAQ,GAAG,OAAO,UAAU,UAAU,UAAU,aAAa;CACvI,MAAM,EAAE,WAAW,cAAc,kBAAqC;CACtE,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,SAAS;CAEjE,MAAM,oBAA0B;AAC9B,gBAAc,CAAC,WAAW;;CAG5B,MAAM,YAAY;CAElB,MAAM,gBAAgB,WACpB,OAAO,kBACP,QAAQ,KAAK,OAAO,kCACpB,SAAS,OAAO,2BACjB;CAED,MAAM,eAAe,WACnB,OAAO,kBACN,UAAU,KAAK,UAAU,KAAK,UAAU,MAAM,OAAO,oBAAoB,UAC1E,QAAQ,KAAK,OAAO,iCACpB,cAAc,OAAO,8BACrB,SAAS,OAAO,0BACjB;CAED,MAAM,cAAc,WAClB,OAAO,gBACP,QAAQ,KAAK,OAAO,gCACpB,QAAQ,KAAK,OAAO,+BACrB;AAED,QACE,oBAAC,WAAA;EAAU,WAAW;YACpB,qBAAC,UAAA;GACC,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,KAAK;GACL,eAAa;GACb,oBAAkB,YAAY;cAE7B,UACD,oBAAC,cAAA;IAAK,SAAS,aAAa,oBAAY;IAAwB;IAAW,WAAW;IAAa,MAAM,SAAS;KAAU,CAAA;IACrH;GACC;;AAIhB,IAAA,yBAAe;ACnEf,MAAa,iBAAiB,eAA0C;AACtE,SAAQ,YAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,QACE,QAAO;;;ACeb,IAAMC,YAA0B,EAC9B,OACA,aAAa,MACb,QAAQ,GACR,OACA,WAAW,OACX,UACA,UACA,QACA,WACA,UACmB;CACnB,MAAM,iBAAiB,WACrB,OAAO,oBACN,UAAU,KAAK,UAAU,MAAM,OAAO,sBAAsB,UAC7D,QAAQ,KAAK,OAAO,kCACrB;AAED,QACE,qBAAC,MAAA;EAAG,WAAW,WAAW,OAAO,UAAU,UAAU;EAAO;aAC1D,oBAAC,wBAAA;GAA2B;GAAmB;GAAc;GAAiB;GAAoB;GAAkB;aACjH;IACc,EACjB,oBAAC,OAAA;GAAI,WAAW;aACb,MAAM,SAAS,IAAI,WAAU,UAC5B,YAAoC,OAAO,4BAAkB,GACzD,MAAM,aAAa,OAAO;IAAE,YAAY,cAAc,WAAW;IAAE,OAAO,QAAQ;IAAG;IAAO,CAAC,GAC7F,MACL;IACG,CAAA;GACH;;AAIT,IAAA,mBAAe;ACjCf,IAAMC,qBAAgD,EACpD,aAAa,MACb,QAAQ,GACR,OACA,UACA,aAC4B;AAO5B,QACE,oBAAC,MAAA;EAAG,WAPc,WAClB,SAAO,mBACP,UAAU,KAAK,SAAO,sBAAsB,UAC5C,QAAQ,KAAK,SAAO,kCACrB;EAG6B,eAAa;EAAQ,oBAAkB,YAAY;YAC5E,MAAM,SAAS,IAAI,WAAU,UAC5B,YAA2B,OAAO,iBAAS,GAAG,MAAM,aAAa,OAAO;GAAE;GAAY;GAAO;GAAO,CAAC,GAAG,MACzG;GACE;;AAIT,kBAAkB,WAAW;AAE7B,IAAA,8BAAe;ACrDf,IAAA,4BAAe"}
package/lib/components/HelpTriggerIcon/HelpSign.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import { default as React } from 'react';
2
- import { HelpTriggerWeights } from '../HelpTriggerIcon';
1
+ import { HelpTriggerWeights, HelpTriggerIconSizes } from '../HelpTriggerIcon';
3
2
  export interface HelpSignProps {
4
3
  color?: string;
5
4
  weight?: HelpTriggerWeights;
5
+ size?: HelpTriggerIconSizes;
6
6
  }
7
7
  declare const HelpSign: React.FC<HelpSignProps>;
8
8
  export default HelpSign;
package/lib/components/HelpTriggerInline/styles.module.scss CHANGED
@@ -14,6 +14,7 @@ $outline-xl-width: 2.5px;
14
14
  display: inline;
15
15
  color: var(--color-help-graphics-normal);
16
16
  cursor: pointer;
17
+ text-align: start;
17
18
  text-decoration: none;
18
19
  background-color: transparent;
19
20
  outline: none;
package/lib/components/Illustrations/IllustrationNames.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/
2
- export declare const IllustrationList: readonly ["BabyMobile", "Child", "Doctor", "FacialRecognitionFingerprint", "GiveBabyFood", "HealthcarePersonnel", "ReadLetters", "Stroller", "Support2"];
2
+ export declare const IllustrationList: readonly ["BabyMobile", "Child", "Doctor", "FacialRecognitionFingerprint", "GiveBabyFood", "HealthcarePersonnel", "ReadLetters", "Stork", "Stroller", "Support2", "Thinking"];
3
3
  export interface IllustrationSize {
4
4
  small?: string;
5
5
  medium?: string;
package/lib/components/Illustrations/Stork.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { default as React } from 'react';
2
+ import { SvgIllustrationProps } from '../Illustration';
3
+ export interface Palette {
4
+ lines: string;
5
+ stork: string;
6
+ blob: string;
7
+ beak: string;
8
+ bag: string;
9
+ }
10
+ declare const Stork: React.FC<SvgIllustrationProps>;
11
+ export default Stork;
package/lib/components/Illustrations/Stork.js ADDED
@@ -0,0 +1,16 @@
1
+ import { t as getIllustration } from "../../utils.js";
2
+ import { t as StorkMedium_default } from "../../StorkMedium.js";
3
+ import { jsx } from "react/jsx-runtime";
4
+ var Stork = ({ size = 512, color, ...rest }) => {
5
+ return getIllustration({
6
+ size,
7
+ medium: /* @__PURE__ */ jsx(StorkMedium_default, {
8
+ color,
9
+ ...rest
10
+ })
11
+ });
12
+ };
13
+ var Stork_default = Stork;
14
+ export { Stork_default as default };
15
+
16
+ //# sourceMappingURL=Stork.js.map
package/lib/components/Illustrations/Stork.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Stork.js","names":["Stork: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/Stork.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { SvgIllustrationProps } from '../Illustration';\n\nimport StorkMedium from './StorkMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n lines: string;\n stork: string;\n blob: string;\n beak: string;\n bag: string;\n}\n\nconst Stork: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n const medium = <StorkMedium color={color} {...rest} />;\n\n return getIllustration({ size, medium });\n};\n\nexport default Stork;\n"],"mappings":";;;AAeA,IAAMA,SAAyC,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGhF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,qBAAA;GAAmB;GAAO,GAAI;IAAQ;EAEf,CAAC;;AAG1C,IAAA,gBAAe"}
package/lib/components/Illustrations/StorkMedium.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { default as React } from 'react';
2
+ import { BaseSvgIllustrationProps } from '../Illustration';
3
+ declare const StorkMedium: React.FC<BaseSvgIllustrationProps>;
4
+ export default StorkMedium;
package/lib/components/Illustrations/StorkMedium.js ADDED
@@ -0,0 +1,2 @@
1
+ import { t as StorkMedium_default } from "../../StorkMedium.js";
2
+ export { StorkMedium_default as default };
package/lib/components/Illustrations/Thinking.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { default as React } from 'react';
2
+ import { SvgIllustrationProps } from '../Illustration';
3
+ export interface Palette {
4
+ lines: string;
5
+ shapes1: string;
6
+ shapes2: string;
7
+ }
8
+ declare const Thinking: React.FC<SvgIllustrationProps>;
9
+ export default Thinking;
package/lib/components/Illustrations/Thinking.js ADDED
@@ -0,0 +1,16 @@
1
+ import { t as getIllustration } from "../../utils.js";
2
+ import { t as ThinkingMedium_default } from "../../ThinkingMedium.js";
3
+ import { jsx } from "react/jsx-runtime";
4
+ var Thinking = ({ size = 512, color, ...rest }) => {
5
+ return getIllustration({
6
+ size,
7
+ medium: /* @__PURE__ */ jsx(ThinkingMedium_default, {
8
+ color,
9
+ ...rest
10
+ })
11
+ });
12
+ };
13
+ var Thinking_default = Thinking;
14
+ export { Thinking_default as default };
15
+
16
+ //# sourceMappingURL=Thinking.js.map
package/lib/components/Illustrations/Thinking.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Thinking.js","names":["Thinking: React.FC<SvgIllustrationProps>"],"sources":["../../../src/components/Illustrations/Thinking.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { SvgIllustrationProps } from '../Illustration';\n\nimport ThinkingMedium from './ThinkingMedium';\nimport { getIllustration } from '../Illustration/utils';\n\nexport interface Palette {\n lines: string;\n shapes1: string;\n shapes2: string;\n}\n\nconst Thinking: React.FC<SvgIllustrationProps> = ({ size = 512, color, ...rest }) => {\n const medium = <ThinkingMedium color={color} {...rest} />;\n\n return getIllustration({ size, medium });\n};\n\nexport default Thinking;\n"],"mappings":";;;AAaA,IAAMA,YAA4C,EAAE,OAAO,KAAK,OAAO,GAAG,WAAW;AAGnF,QAAO,gBAAgB;EAAE;EAAM,QAFhB,oBAAC,wBAAA;GAAsB;GAAO,GAAI;IAAQ;EAElB,CAAC;;AAG1C,IAAA,mBAAe"}
package/lib/components/Illustrations/ThinkingMedium.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { default as React } from 'react';
2
+ import { BaseSvgIllustrationProps } from '../Illustration';
3
+ declare const ThinkingMedium: React.FC<BaseSvgIllustrationProps>;
4
+ export default ThinkingMedium;
package/lib/components/Illustrations/ThinkingMedium.js ADDED
@@ -0,0 +1,2 @@
1
+ import { t as ThinkingMedium_default } from "../../ThinkingMedium.js";
2
+ export { ThinkingMedium_default as default };
package/lib/components/Label/Label.d.ts CHANGED
@@ -37,9 +37,11 @@ export interface LabelProps {
37
37
  sublabelWrapperClassName?: string;
38
38
  /** Sets the data-testid attribute. */
39
39
  testId?: string;
40
+ /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */
41
+ afterLabelChildrenClassName?: string;
40
42
  }
41
43
  export declare const getLabelText: (label: React.ReactNode) => string;
42
44
  export declare const renderLabel: (label: React.ReactNode, inputId: string, onColor: FormOnColor, markup?: LabelTags) => React.ReactNode;
43
- export declare const renderLabelAsParent: (label: React.ReactNode, children: React.ReactNode, inputId: string, onColor: FormOnColor, labelClassName?: string, labelTextClassName?: string, sublabelWrapperClassName?: string, large?: boolean, markup?: LabelTags) => React.ReactNode;
45
+ export declare const renderLabelAsParent: (label: React.ReactNode, children: React.ReactNode, inputId: string, onColor: FormOnColor, labelClassName?: string, labelTextClassName?: string, sublabelWrapperClassName?: string, large?: boolean, markup?: LabelTags, afterLabelChildrenClassName?: string) => React.ReactNode;
44
46
  declare const Label: FunctionComponent<LabelProps>;
45
47
  export default Label;
package/lib/components/Label/styles.module.scss CHANGED
@@ -19,7 +19,7 @@
19
19
 
20
20
  &--after-label-children {
21
21
  display: flex;
22
- align-items: flex-end;
22
+ align-items: flex-start;
23
23
  }
24
24
  }
25
25
 
package/lib/components/RadioButton/styles.module.scss CHANGED
@@ -447,3 +447,7 @@ $padding-clickable-area-left: 8px;
447
447
  margin-top: -$padding-clickable-area-top-bottom;
448
448
  padding-left: calc(2.8rem + $padding-clickable-area-left);
449
449
  }
450
+
451
+ .radiobutton-afterlabelchildren-wrapper {
452
+ padding-top: $padding-clickable-area-top-bottom;
453
+ }
package/lib/components/RadioButton/styles.module.scss.d.ts CHANGED
@@ -25,6 +25,7 @@ export type Styles = {
25
25
  'radio-button-wrapper__large--invalid': string;
26
26
  'radio-button-wrapper__large--on-blueberry': string;
27
27
  'radio-button-wrapper__large--selected': string;
28
+ 'radiobutton-afterlabelchildren-wrapper': string;
28
29
  'radiobutton-sublabel-wrapper': string;
29
30
  };
30
31
 
package/lib/components/ServiceMessage/ServiceMessage.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { default as React } from 'react';
2
1
  import { AnchorLinkTargets } from '../AnchorLink';
3
2
  import { NotificationPanelVariants } from '../NotificationPanel';
3
+ export type ServiceMessageRoles = 'alert' | 'region' | 'auto' | 'none';
4
4
  export interface ServiceMessageProps {
5
5
  /** Sets a label for the notification panel. */
6
6
  label: string;
@@ -24,6 +24,8 @@ export interface ServiceMessageProps {
24
24
  closeBtnText?: string;
25
25
  /** Changes the visual representation. */
26
26
  variant?: NotificationPanelVariants;
27
+ /** Sets the role of the service message - default: auto, will decide based on variant */
28
+ messageRole?: ServiceMessageRoles;
27
29
  /** Sets the data-testid attribute. */
28
30
  testId?: string;
29
31
  }
package/lib/components/ServiceMessage/index.js CHANGED
@@ -12,7 +12,7 @@ import { t as ChevronDown_default } from "../../ChevronDown.js";
12
12
  import { t as ChevronUp_default } from "../../ChevronUp.js";
13
13
  import { i as renderElementHeader } from "../../ElementHeader.js";
14
14
  import { t as Forward_default } from "../../Forward.js";
15
- import React, { useId, useState } from "react";
15
+ import { useId, useState } from "react";
16
16
  import classNames from "classnames";
17
17
  import { jsx, jsxs } from "react/jsx-runtime";
18
18
  import styles from "./styles.module.scss";
@@ -123,11 +123,11 @@ var Content = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnTe
123
123
  })
124
124
  });
125
125
  };
126
- var ServiceMessage = ({ label, dismissable = true, onDismiss, info, extraInfo, urlTitle, url, target = "_self", closeBtnText = "fjern melding", expanderOpenFromStart = false, variant = "error", testId }) => {
126
+ var ServiceMessage = ({ label, dismissable = true, onDismiss, info, extraInfo, urlTitle, url, target = "_self", closeBtnText = "fjern melding", expanderOpenFromStart = false, variant = "error", messageRole = "auto", testId }) => {
127
127
  const [isExpanded, setIsExpanded] = useState(expanderOpenFromStart);
128
128
  const labelId = useId();
129
129
  const hasExpander = !!info || !!extraInfo;
130
- const ariaRole = variant === "error" ? "alert" : "region";
130
+ const ariaRole = messageRole === "auto" ? variant === "error" ? "alert" : "region" : messageRole === "none" ? void 0 : messageRole;
131
131
  const ariaLabelAttributes = getAriaLabelAttributes({
132
132
  label,
133
133
  id: labelId
package/lib/components/ServiceMessage/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["Label: React.FC<LabelProps>","Content: React.FC<ContentProps>","ServiceMessage: React.FC<ServiceMessageProps>"],"sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx","../../../src/components/ServiceMessage/index.ts"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport { renderElementHeader } from '../ElementHeader/ElementHeader';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n label: string;\n variant: NotificationPanelVariants;\n id: string;\n hasExpander: boolean;\n isExpanded: boolean;\n dismissable: boolean;\n onExpand: () => void;\n onDismiss?: () => void;\n closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n const breakpoint = useBreakpoint();\n const { isHovered, refObject } = usePseudoClasses<HTMLDivElement>();\n\n const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n const labelContainerClasses = classNames(\n styles['service-message__label-container'],\n styles[`service-message__label-container--${variant}`],\n hasExpander && styles[`service-message__label-container--has-expander`]\n );\n\n const elementHeader = renderElementHeader(label, {\n titleHtmlMarkup: 'span',\n isHovered,\n size: 'compact',\n parentType: 'expanderlist',\n chevronIcon: hasExpander ? (isExpanded ? ChevronUp : ChevronDown) : undefined,\n icon: <NotificationBadge variant={variant} size={iconSize} isHovered={hasExpander && isHovered} />,\n closeButton:\n !hasExpander && dismissable ? (\n <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n ) : undefined,\n });\n\n return (\n <div className={labelContainerClasses} ref={refObject}>\n <div className={styles['service-message__container']}>\n <div className={styles['service-message__row']}>\n <div className={styles['service-message__col']}>\n <div className={styles['service-message__label']}>\n {hasExpander ? (\n <h1 className={styles['service-message__title']} id={id}>\n <button type=\"button\" className={styles['service-message__toggle']} onClick={onExpand} aria-expanded={isExpanded}>\n {elementHeader}\n </button>\n </h1>\n ) : (\n <h1 className={styles['service-message__title']} id={id}>\n {elementHeader}\n </h1>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\ninterface ContentProps {\n info?: string;\n extraInfo?: string;\n urlTitle?: string;\n url?: string;\n target?: AnchorLinkTargets;\n dismissable: boolean;\n onDismiss?: () => void;\n closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n const { refObject: readMoreRef, isHovered: readMoreHoverRefIsHovered } = usePseudoClasses<HTMLAnchorElement>();\n const { refObject: closeButtonRef, isHovered: closeButtonIsHovered } = usePseudoClasses<HTMLButtonElement>();\n\n const hasUrl = url && urlTitle;\n\n return (\n <div className={styles['service-message__container']}>\n <div className={styles['service-message__row']}>\n <div className={styles['service-message__col']}>\n <div className={styles['service-message__content']}>\n {info && <p className={styles['service-message__info']}>{info}</p>}\n {extraInfo && (\n <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n )}\n <div className={styles['service-message__actions']}>\n {hasUrl && (\n <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n {urlTitle}\n <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n </a>\n )}\n\n {dismissable && (\n <button\n ref={closeButtonRef}\n className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n aria-label={closeBtnText}\n onClick={onDismiss}\n >\n {closeBtnText}\n <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n </button>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport interface ServiceMessageProps {\n /** Sets a label for the notification panel. */\n label: string;\n /** String displayed in service-message when expanded */\n info?: string;\n /** String displayed in service-message when expanded, with a smaller font */\n extraInfo?: string;\n /** function that runs on dismiss */\n onDismiss?: () => void;\n /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n dismissable?: boolean;\n /** Makes expander be open from start. */\n expanderOpenFromStart?: boolean;\n /** Name that describes a url-link for the user*/\n urlTitle?: string;\n /** Url for further information*/\n url?: string;\n /** Sets target for the anchorlink to the url*/\n target?: AnchorLinkTargets;\n /** Text on close-button in service messages. */\n closeBtnText?: string;\n /** Changes the visual representation. */\n variant?: NotificationPanelVariants;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n label,\n dismissable = true,\n onDismiss,\n info,\n extraInfo,\n urlTitle,\n url,\n target = '_self',\n closeBtnText = 'fjern melding',\n expanderOpenFromStart = false,\n variant = 'error',\n testId,\n}) => {\n const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n const labelId = useId();\n const hasExpander = !!info || !!extraInfo;\n\n const ariaRole = variant === 'error' ? 'alert' : 'region';\n const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n const handleClick = (): void => {\n if (hasExpander) setIsExpanded(!isExpanded);\n };\n\n const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n return (\n <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n <Label\n label={label}\n variant={variant}\n id={labelId}\n hasExpander={hasExpander}\n isExpanded={isExpanded}\n dismissable={dismissable}\n onExpand={handleClick}\n onDismiss={onDismiss}\n closeBtnText={closeBtnText}\n />\n {hasExpander && isExpanded && (\n <Content\n info={info}\n extraInfo={extraInfo}\n urlTitle={urlTitle}\n url={url}\n target={target}\n dismissable={dismissable}\n onDismiss={onDismiss}\n closeBtnText={closeBtnText}\n />\n )}\n </div>\n );\n};\n\nexport default ServiceMessage;\n","import ServiceMessage from './ServiceMessage';\nexport * from './ServiceMessage';\nexport default ServiceMessage;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["Label: React.FC<LabelProps>","Content: React.FC<ContentProps>","ServiceMessage: React.FC<ServiceMessageProps>"],"sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx","../../../src/components/ServiceMessage/index.ts"],"sourcesContent":["import { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AnchorLinkTargets } from '../AnchorLink';\nimport type { NotificationPanelVariants } from '../NotificationPanel';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport { renderElementHeader } from '../ElementHeader/ElementHeader';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Forward from '../Icons/Forward';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n label: string;\n variant: NotificationPanelVariants;\n id: string;\n hasExpander: boolean;\n isExpanded: boolean;\n dismissable: boolean;\n onExpand: () => void;\n onDismiss?: () => void;\n closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n const breakpoint = useBreakpoint();\n const { isHovered, refObject } = usePseudoClasses<HTMLDivElement>();\n\n const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n const labelContainerClasses = classNames(\n styles['service-message__label-container'],\n styles[`service-message__label-container--${variant}`],\n hasExpander && styles[`service-message__label-container--has-expander`]\n );\n\n const elementHeader = renderElementHeader(label, {\n titleHtmlMarkup: 'span',\n isHovered,\n size: 'compact',\n parentType: 'expanderlist',\n chevronIcon: hasExpander ? (isExpanded ? ChevronUp : ChevronDown) : undefined,\n icon: <NotificationBadge variant={variant} size={iconSize} isHovered={hasExpander && isHovered} />,\n closeButton:\n !hasExpander && dismissable ? (\n <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n ) : undefined,\n });\n\n return (\n <div className={labelContainerClasses} ref={refObject}>\n <div className={styles['service-message__container']}>\n <div className={styles['service-message__row']}>\n <div className={styles['service-message__col']}>\n <div className={styles['service-message__label']}>\n {hasExpander ? (\n <h1 className={styles['service-message__title']} id={id}>\n <button type=\"button\" className={styles['service-message__toggle']} onClick={onExpand} aria-expanded={isExpanded}>\n {elementHeader}\n </button>\n </h1>\n ) : (\n <h1 className={styles['service-message__title']} id={id}>\n {elementHeader}\n </h1>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\ninterface ContentProps {\n info?: string;\n extraInfo?: string;\n urlTitle?: string;\n url?: string;\n target?: AnchorLinkTargets;\n dismissable: boolean;\n onDismiss?: () => void;\n closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n const { refObject: readMoreRef, isHovered: readMoreHoverRefIsHovered } = usePseudoClasses<HTMLAnchorElement>();\n const { refObject: closeButtonRef, isHovered: closeButtonIsHovered } = usePseudoClasses<HTMLButtonElement>();\n\n const hasUrl = url && urlTitle;\n\n return (\n <div className={styles['service-message__container']}>\n <div className={styles['service-message__row']}>\n <div className={styles['service-message__col']}>\n <div className={styles['service-message__content']}>\n {info && <p className={styles['service-message__info']}>{info}</p>}\n {extraInfo && (\n <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n )}\n <div className={styles['service-message__actions']}>\n {hasUrl && (\n <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n {urlTitle}\n <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n </a>\n )}\n\n {dismissable && (\n <button\n ref={closeButtonRef}\n className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n aria-label={closeBtnText}\n onClick={onDismiss}\n >\n {closeBtnText}\n <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n </button>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport type ServiceMessageRoles = 'alert' | 'region' | 'auto' | 'none';\n\nexport interface ServiceMessageProps {\n /** Sets a label for the notification panel. */\n label: string;\n /** String displayed in service-message when expanded */\n info?: string;\n /** String displayed in service-message when expanded, with a smaller font */\n extraInfo?: string;\n /** function that runs on dismiss */\n onDismiss?: () => void;\n /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n dismissable?: boolean;\n /** Makes expander be open from start. */\n expanderOpenFromStart?: boolean;\n /** Name that describes a url-link for the user*/\n urlTitle?: string;\n /** Url for further information*/\n url?: string;\n /** Sets target for the anchorlink to the url*/\n target?: AnchorLinkTargets;\n /** Text on close-button in service messages. */\n closeBtnText?: string;\n /** Changes the visual representation. */\n variant?: NotificationPanelVariants;\n /** Sets the role of the service message - default: auto, will decide based on variant */\n messageRole?: ServiceMessageRoles;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n label,\n dismissable = true,\n onDismiss,\n info,\n extraInfo,\n urlTitle,\n url,\n target = '_self',\n closeBtnText = 'fjern melding',\n expanderOpenFromStart = false,\n variant = 'error',\n messageRole = 'auto',\n testId,\n}) => {\n const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n const labelId = useId();\n const hasExpander = !!info || !!extraInfo;\n\n const autoRole = variant === 'error' ? 'alert' : 'region';\n const ariaRole = messageRole === 'auto' ? autoRole : messageRole === 'none' ? undefined : messageRole;\n const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n const handleClick = (): void => {\n if (hasExpander) setIsExpanded(!isExpanded);\n };\n\n const classes = classNames(styles['service-message'], styles[`service-message--${variant}`]);\n\n return (\n <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n <Label\n label={label}\n variant={variant}\n id={labelId}\n hasExpander={hasExpander}\n isExpanded={isExpanded}\n dismissable={dismissable}\n onExpand={handleClick}\n onDismiss={onDismiss}\n closeBtnText={closeBtnText}\n />\n {hasExpander && isExpanded && (\n <Content\n info={info}\n extraInfo={extraInfo}\n urlTitle={urlTitle}\n url={url}\n target={target}\n dismissable={dismissable}\n onDismiss={onDismiss}\n closeBtnText={closeBtnText}\n />\n )}\n </div>\n );\n};\n\nexport default ServiceMessage;\n","import ServiceMessage from './ServiceMessage';\nexport * from './ServiceMessage';\nexport default ServiceMessage;\n"],"mappings":"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"}
package/lib/components/StickyNote/Triangle.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { default as React } from 'react';
2
1
  interface TriangleProps {
3
2
  isHover: boolean;
4
3
  isFocus: boolean;
package/lib/components/StickyNote/index.js CHANGED
@@ -5,7 +5,7 @@ import { t as useIsMobileBreakpoint } from "../../useIsMobileBreakpoint.js";
5
5
  import { t as useIdWithFallback } from "../../useIdWithFallback.js";
6
6
  import { t as getAriaDescribedBy } from "../../accessibility.js";
7
7
  import { t as X_default } from "../../X.js";
8
- import React, { useLayoutEffect, useRef } from "react";
8
+ import React, { useId, useLayoutEffect, useRef } from "react";
9
9
  import classNames from "classnames";
10
10
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
11
11
  import styles from "./styles.module.scss";
@@ -33,6 +33,9 @@ var Close_default = React.forwardRef(function ButtonForwardedRef(props, ref) {
33
33
  });
34
34
  });
35
35
  var Triangle = ({ isHover, isFocus, isActive, isError }) => {
36
+ const uniqueId = useId();
37
+ const maskIdFocus = `${uniqueId}-mask-focus`;
38
+ const maskIdNormal = `${uniqueId}-mask-normal`;
36
39
  const palette = (() => {
37
40
  const colors = {
38
41
  border: "var(--component-stickynote-border-normal)",
@@ -66,7 +69,7 @@ var Triangle = ({ isHover, isFocus, isActive, isError }) => {
66
69
  xmlns: "http://www.w3.org/2000/svg",
67
70
  children: [
68
71
  /* @__PURE__ */ jsx("mask", {
69
- id: "path-1-inside-1_7753_1401",
72
+ id: maskIdFocus,
70
73
  fill: "white",
71
74
  children: /* @__PURE__ */ jsx("path", { d: "M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z" })
72
75
  }),
@@ -77,7 +80,7 @@ var Triangle = ({ isHover, isFocus, isActive, isError }) => {
77
80
  /* @__PURE__ */ jsx("path", {
78
81
  d: "M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z",
79
82
  fill: palette.border,
80
- mask: "url(#path-1-inside-1_7753_1401)"
83
+ mask: `url(#${maskIdFocus})`
81
84
  })
82
85
  ]
83
86
  });
@@ -89,7 +92,7 @@ var Triangle = ({ isHover, isFocus, isActive, isError }) => {
89
92
  xmlns: "http://www.w3.org/2000/svg",
90
93
  children: [
91
94
  /* @__PURE__ */ jsx("mask", {
92
- id: "path-1-inside-1_7717_293537",
95
+ id: maskIdNormal,
93
96
  fill: "white",
94
97
  children: /* @__PURE__ */ jsx("path", { d: "M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z" })
95
98
  }),
@@ -100,7 +103,7 @@ var Triangle = ({ isHover, isFocus, isActive, isError }) => {
100
103
  /* @__PURE__ */ jsx("path", {
101
104
  d: "M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z",
102
105
  fill: palette.border,
103
- mask: "url(#path-1-inside-1_7717_293537)"
106
+ mask: `url(#${maskIdNormal})`
104
107
  })
105
108
  ]
106
109
  });
package/lib/components/StickyNote/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["Triangle: React.FC<TriangleProps>","colors: Palette","svg: React.ReactNode","StickyNote: React.FC<StickyNoteProps>"],"sources":["../../../src/components/StickyNote/Close.tsx","../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx","../../../src/components/StickyNote/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n /** Function is called when user clicks the button */\n onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Sets the aria-label of the button */\n ariaLabel?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\n/*\n Denne er kopiert fra Close-komponent. \n Det er for å kunne ha en egen lokal variant for StickyNote. \n Likt som i Figma.\n */\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n const { testId, ariaLabel = 'Lukk', onClick } = props;\n const { refObject, isHovered } = usePseudoClasses();\n\n const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n const closeClasses = classNames(styles.close);\n\n return (\n <button\n ref={mergeRefs([ref, refObject])}\n data-testid={testId}\n className={closeClasses}\n aria-label={ariaLabel}\n onClick={onClick}\n type=\"button\"\n >\n <span className={classNames(styles['close__inner-container'])}>\n <Icon svgIcon={X} color=\"black\" size={iconSize} isHovered={isHovered} />\n </span>\n </button>\n );\n});\n\nexport default Close;\n","import React from 'react';\n\ninterface TriangleProps {\n isHover: boolean;\n isFocus: boolean;\n isActive: boolean;\n isError: boolean;\n}\n\nexport interface Palette {\n border: string;\n background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ isHover, isFocus, isActive, isError }) => {\n const palette = ((): Palette => {\n const colors: Palette = {\n border: 'var(--component-stickynote-border-normal)',\n background: 'var(--component-stickynote-background-fold-normal-light)',\n };\n\n if (!isError) {\n if (isHover) {\n colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n }\n if (isFocus) {\n colors.border = 'var(--color-action-border-onlight-focus)';\n colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n }\n if (isActive) {\n colors.background = 'var(--component-stickynote-background-fold-normal-dark)';\n }\n } else {\n colors.border = 'var(--component-stickynote-border-error)';\n colors.background = 'var(--component-stickynote-background-fold-error-light)';\n if (isHover) {\n colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n }\n if (isFocus) {\n colors.border = 'var(--color-action-border-onlight-focus)';\n colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n }\n if (isActive) {\n colors.background = 'var(--component-stickynote-background-fold-error-dark)';\n }\n }\n return colors;\n })();\n\n let svg: React.ReactNode;\n\n if (isFocus) {\n svg = (\n <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <mask id=\"path-1-inside-1_7753_1401\" fill=\"white\">\n <path d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\" />\n </mask>\n <path\n d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\"\n fill={palette.background}\n />\n <path\n d=\"M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z\"\n fill={palette.border}\n mask=\"url(#path-1-inside-1_7753_1401)\"\n />\n </svg>\n );\n } else {\n svg = (\n <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <mask id=\"path-1-inside-1_7717_293537\" fill=\"white\">\n <path d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\" />\n </mask>\n <path\n d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\"\n fill={palette.background}\n />\n <path\n d=\"M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z\"\n fill={palette.border}\n mask=\"url(#path-1-inside-1_7717_293537)\"\n />\n </svg>\n );\n }\n\n return <>{svg}</>;\n};\n\nexport default Triangle;\n","import React, { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Close from './Close';\nimport Triangle from './Triangle';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n /** Aria label for the delete/close button */\n arialabelXButton: string;\n /** Activates the error styling */\n error?: boolean;\n /** Error text to show below the note */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /** Text shown under the textarea */\n footerText?: string;\n /** Function run when clicking the delete/close button */\n onXButtonClick?: () => void;\n /** Function run if user clicks the component while it is disabled */\n onClickWhileDisabled?: () => void;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Timestamp shown over the textarea */\n timestamp: string;\n /** Classname for the outer wrapper */\n wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n const {\n wrapperClassName,\n timestamp,\n onXButtonClick,\n arialabelXButton,\n footerText,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n onClickWhileDisabled,\n testId,\n ...textareaProps\n } = props;\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const stickynoteRef = useRef<HTMLDivElement>(null);\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement>(textareaRef);\n const { isHovered, isActive } = usePseudoClasses<HTMLDivElement>(stickynoteRef);\n\n const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n if ((event.target as HTMLElement).closest('button')) {\n return;\n }\n if (textareaProps.disabled) {\n if (onClickWhileDisabled) onClickWhileDisabled();\n return;\n }\n textareaRef.current?.focus();\n };\n\n const resizeTextarea = (): void => {\n const textarea = textareaRef.current;\n if (!textarea) return;\n resizeTarget(textarea);\n };\n\n const resizeTarget = (target: HTMLTextAreaElement): void => {\n // Reset field height\n target.style.height = 'inherit';\n // Set new height\n target.style.height = `${target.scrollHeight}px`;\n };\n\n useLayoutEffect(() => {\n resizeTextarea();\n // Must run after the shadow DOM has been set up to work on microweb\n setTimeout(() => resizeTextarea(), 1000);\n }, []);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n const textarea = e.target as HTMLTextAreaElement;\n resizeTarget(textarea);\n if (textareaProps.onChange) textareaProps.onChange(e);\n };\n\n return (\n <div>\n <div\n data-testid={testId}\n ref={stickynoteRef}\n className={classNames(styles['sticky-note'], wrapperClassName, {\n [styles['sticky-note--focused']]: isTextareaFocused,\n [styles['sticky-note--active']]: isActive,\n [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n [styles['sticky-note--error']]: error,\n })}\n onClick={handleWrapperClick}\n role=\"textbox\"\n tabIndex={-1}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n }\n }}\n >\n <div className={classNames(styles['sticky-note__header'])}>\n {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n </div>\n <textarea\n ref={textareaRef}\n data-testid={`${testId}-textarea`}\n className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n {...textareaProps}\n onChange={handleChange}\n aria-describedby={getAriaDescribedBy(props, errorTextId)}\n />\n <Close onClick={onXButtonClick} ariaLabel={arialabelXButton} testId=\"closeButton\" />\n <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n <div className={classNames(styles['sticky-note__triangle'])}>\n <Triangle isHover={isHovered} isActive={isActive} isFocus={isTextareaFocused} isError={!!error} />\n </div>\n </div>\n {error && (\n <p className={styles['sticky-note__error-text']} id={errorTextId}>\n {errorText}\n </p>\n )}\n </div>\n );\n};\n\nexport default StickyNote;\n","import StickyNote from './StickyNote';\nexport * from './StickyNote';\nexport default StickyNote;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["Triangle: React.FC<TriangleProps>","colors: Palette","svg: React.ReactNode","StickyNote: React.FC<StickyNoteProps>"],"sources":["../../../src/components/StickyNote/Close.tsx","../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx","../../../src/components/StickyNote/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n /** Function is called when user clicks the button */\n onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Sets the aria-label of the button */\n ariaLabel?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\n/*\n Denne er kopiert fra Close-komponent. \n Det er for å kunne ha en egen lokal variant for StickyNote. \n Likt som i Figma.\n */\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n const { testId, ariaLabel = 'Lukk', onClick } = props;\n const { refObject, isHovered } = usePseudoClasses();\n\n const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n const closeClasses = classNames(styles.close);\n\n return (\n <button\n ref={mergeRefs([ref, refObject])}\n data-testid={testId}\n className={closeClasses}\n aria-label={ariaLabel}\n onClick={onClick}\n type=\"button\"\n >\n <span className={classNames(styles['close__inner-container'])}>\n <Icon svgIcon={X} color=\"black\" size={iconSize} isHovered={isHovered} />\n </span>\n </button>\n );\n});\n\nexport default Close;\n","import { useId } from 'react';\n\ninterface TriangleProps {\n isHover: boolean;\n isFocus: boolean;\n isActive: boolean;\n isError: boolean;\n}\n\nexport interface Palette {\n border: string;\n background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ isHover, isFocus, isActive, isError }) => {\n const uniqueId = useId();\n const maskIdFocus = `${uniqueId}-mask-focus`;\n const maskIdNormal = `${uniqueId}-mask-normal`;\n const palette = ((): Palette => {\n const colors: Palette = {\n border: 'var(--component-stickynote-border-normal)',\n background: 'var(--component-stickynote-background-fold-normal-light)',\n };\n\n if (!isError) {\n if (isHover) {\n colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n }\n if (isFocus) {\n colors.border = 'var(--color-action-border-onlight-focus)';\n colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n }\n if (isActive) {\n colors.background = 'var(--component-stickynote-background-fold-normal-dark)';\n }\n } else {\n colors.border = 'var(--component-stickynote-border-error)';\n colors.background = 'var(--component-stickynote-background-fold-error-light)';\n if (isHover) {\n colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n }\n if (isFocus) {\n colors.border = 'var(--color-action-border-onlight-focus)';\n colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n }\n if (isActive) {\n colors.background = 'var(--component-stickynote-background-fold-error-dark)';\n }\n }\n return colors;\n })();\n\n let svg: React.ReactNode;\n\n if (isFocus) {\n svg = (\n <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <mask id={maskIdFocus} fill=\"white\">\n <path d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\" />\n </mask>\n <path\n d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\"\n fill={palette.background}\n />\n <path\n d=\"M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z\"\n fill={palette.border}\n mask={`url(#${maskIdFocus})`}\n />\n </svg>\n );\n } else {\n svg = (\n <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <mask id={maskIdNormal} fill=\"white\">\n <path d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\" />\n </mask>\n <path\n d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\"\n fill={palette.background}\n />\n <path\n d=\"M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z\"\n fill={palette.border}\n mask={`url(#${maskIdNormal})`}\n />\n </svg>\n );\n }\n\n return <>{svg}</>;\n};\n\nexport default Triangle;\n","import React, { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Close from './Close';\nimport Triangle from './Triangle';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n /** Aria label for the delete/close button */\n arialabelXButton: string;\n /** Activates the error styling */\n error?: boolean;\n /** Error text to show below the note */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /** Text shown under the textarea */\n footerText?: string;\n /** Function run when clicking the delete/close button */\n onXButtonClick?: () => void;\n /** Function run if user clicks the component while it is disabled */\n onClickWhileDisabled?: () => void;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Timestamp shown over the textarea */\n timestamp: string;\n /** Classname for the outer wrapper */\n wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n const {\n wrapperClassName,\n timestamp,\n onXButtonClick,\n arialabelXButton,\n footerText,\n error,\n errorText,\n errorTextId: errorTextIdProp,\n onClickWhileDisabled,\n testId,\n ...textareaProps\n } = props;\n const errorTextId = useIdWithFallback(errorTextIdProp);\n const stickynoteRef = useRef<HTMLDivElement>(null);\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement>(textareaRef);\n const { isHovered, isActive } = usePseudoClasses<HTMLDivElement>(stickynoteRef);\n\n const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n if ((event.target as HTMLElement).closest('button')) {\n return;\n }\n if (textareaProps.disabled) {\n if (onClickWhileDisabled) onClickWhileDisabled();\n return;\n }\n textareaRef.current?.focus();\n };\n\n const resizeTextarea = (): void => {\n const textarea = textareaRef.current;\n if (!textarea) return;\n resizeTarget(textarea);\n };\n\n const resizeTarget = (target: HTMLTextAreaElement): void => {\n // Reset field height\n target.style.height = 'inherit';\n // Set new height\n target.style.height = `${target.scrollHeight}px`;\n };\n\n useLayoutEffect(() => {\n resizeTextarea();\n // Must run after the shadow DOM has been set up to work on microweb\n setTimeout(() => resizeTextarea(), 1000);\n }, []);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n const textarea = e.target as HTMLTextAreaElement;\n resizeTarget(textarea);\n if (textareaProps.onChange) textareaProps.onChange(e);\n };\n\n return (\n <div>\n <div\n data-testid={testId}\n ref={stickynoteRef}\n className={classNames(styles['sticky-note'], wrapperClassName, {\n [styles['sticky-note--focused']]: isTextareaFocused,\n [styles['sticky-note--active']]: isActive,\n [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n [styles['sticky-note--error']]: error,\n })}\n onClick={handleWrapperClick}\n role=\"textbox\"\n tabIndex={-1}\n onKeyDown={e => {\n if (e.key === 'Enter' || e.key === ' ') {\n handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n }\n }}\n >\n <div className={classNames(styles['sticky-note__header'])}>\n {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n </div>\n <textarea\n ref={textareaRef}\n data-testid={`${testId}-textarea`}\n className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n {...textareaProps}\n onChange={handleChange}\n aria-describedby={getAriaDescribedBy(props, errorTextId)}\n />\n <Close onClick={onXButtonClick} ariaLabel={arialabelXButton} testId=\"closeButton\" />\n <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n <div className={classNames(styles['sticky-note__triangle'])}>\n <Triangle isHover={isHovered} isActive={isActive} isFocus={isTextareaFocused} isError={!!error} />\n </div>\n </div>\n {error && (\n <p className={styles['sticky-note__error-text']} id={errorTextId}>\n {errorText}\n </p>\n )}\n </div>\n );\n};\n\nexport default StickyNote;\n","import StickyNote from './StickyNote';\nexport * from './StickyNote';\nexport default StickyNote;\n"],"mappings":"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"}