@helsenorge/designsystem-react 12.2.0 → 12.4.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 (59) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/Checkbox.js +2 -4
  3. package/Checkbox.js.map +1 -1
  4. package/ElementHeader.js +5 -4
  5. package/ElementHeader.js.map +1 -1
  6. package/HighlightPanel.js +23 -3
  7. package/HighlightPanel.js.map +1 -1
  8. package/Input.js +2 -3
  9. package/Input.js.map +1 -1
  10. package/LazyIcon.js +1 -1
  11. package/LazyIcon.js.map +1 -1
  12. package/PanelOld.js.map +1 -1
  13. package/RadioButton.js +1 -1
  14. package/RadioButton.js.map +1 -1
  15. package/Select.js +1 -1
  16. package/Select.js.map +1 -1
  17. package/components/ElementHeader/styles.module.scss +7 -9
  18. package/components/ElementHeader/styles.module.scss.d.ts +2 -1
  19. package/components/FavoriteButton/FavoriteButton.d.ts +19 -0
  20. package/components/FavoriteButton/FavoriteButton.test.d.ts +1 -0
  21. package/components/FavoriteButton/StarIcon.d.ts +4 -0
  22. package/components/FavoriteButton/index.d.ts +3 -0
  23. package/components/FavoriteButton/index.js +204 -0
  24. package/components/FavoriteButton/index.js.map +1 -0
  25. package/components/FavoriteButton/resourceHelper.d.ts +3 -0
  26. package/components/FavoriteButton/stories.module.scss +22 -0
  27. package/components/FavoriteButton/stories.module.scss.d.ts +10 -0
  28. package/components/FavoriteButton/styles.module.scss +40 -0
  29. package/components/FavoriteButton/styles.module.scss.d.ts +9 -0
  30. package/components/HelpPanel/HelpPanel.d.ts +3 -0
  31. package/components/HelpPanel/index.js +12 -2
  32. package/components/HelpPanel/index.js.map +1 -1
  33. package/components/HelpTriggerIcon/styles.module.scss +21 -0
  34. package/components/HighlightPanel/HighlightPanel.d.ts +3 -0
  35. package/components/HighlightPanel/styles.module.scss +26 -4
  36. package/components/HighlightPanel/styles.module.scss.d.ts +4 -0
  37. package/components/Icons/AdditionalIconInformation.d.ts +8 -0
  38. package/components/Icons/AdditionalIconInformation.js +3 -1
  39. package/components/Icons/AdditionalIconInformation.js.map +1 -1
  40. package/components/Icons/Drag.d.ts +4 -0
  41. package/components/Icons/Drag.js +11 -0
  42. package/components/Icons/Drag.js.map +1 -0
  43. package/components/Icons/Edit.d.ts +4 -0
  44. package/components/Icons/Edit.js +31 -0
  45. package/components/Icons/Edit.js.map +1 -0
  46. package/components/Icons/IconNames.d.ts +1 -1
  47. package/components/Icons/IconNames.js +2 -0
  48. package/components/Icons/IconNames.js.map +1 -1
  49. package/components/StatusDot/styles.module.scss +6 -0
  50. package/components/Toggle/Toggle.d.ts +6 -0
  51. package/components/Toggle/index.js +52 -59
  52. package/components/Toggle/index.js.map +1 -1
  53. package/components/Toggle/styles.module.scss +47 -28
  54. package/components/Toggle/styles.module.scss.d.ts +6 -2
  55. package/constants.d.ts +1 -0
  56. package/constants.js +1 -0
  57. package/constants.js.map +1 -1
  58. package/package.json +1 -1
  59. package/resources/HN.Designsystem.FavoriteButton.nb-NO.json.d.ts +6 -0
package/components/Icons/Edit.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Edit.js","sources":["../../../src/components/Icons/Edit.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst Edit: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n const normal = (\n <>\n <path d=\"M23.747 10.244a.75.75 0 0 1 0 1.5h-8.579a5.418 5.418 0 0 0-5.418 5.418V30.8a5.418 5.418 0 0 0 5.418 5.418h13.638a5.418 5.418 0 0 0 5.418-5.418v-8.58a.75.75 0 0 1 1.5 0v8.58a6.918 6.918 0 0 1-6.918 6.918H15.168A6.918 6.918 0 0 1 8.25 30.8V17.162a6.918 6.918 0 0 1 6.918-6.918h8.58Z\" />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M32.083 7.579a4.5 4.5 0 0 1 6.315-.008l.163.168a4.503 4.503 0 0 1-.14 6.241h-.001L26.019 26.333a.752.752 0 0 1-.317.187L18.1 28.765a.75.75 0 0 1-.962-.72v-.006c0-.072.01-.144.031-.213l2.242-7.566.033-.09a.75.75 0 0 1 .159-.23l12.48-12.36.001-.001ZM18.995 26.935l5.223-1.54-3.677-3.677-1.546 5.217Zm1.955-6.222 4.284 4.284 10.13-10.09-4.255-4.255-10.159 10.06ZM37.348 8.64a3 3 0 0 0-4.211.005L31.82 9.95l4.252 4.252 1.29-1.284a3.002 3.002 0 0 0-.013-4.275h-.001Z\"\n />\n </>\n );\n\n const normalHover = (\n <>\n <path d=\"M23.747 10.244a.75.75 0 0 1 0 1.5h-8.579a5.418 5.418 0 0 0-5.418 5.418V30.8a5.418 5.418 0 0 0 5.418 5.418h13.638a5.418 5.418 0 0 0 5.418-5.418v-8.58a.75.75 0 0 1 1.5 0v8.58a6.918 6.918 0 0 1-6.918 6.918H15.168A6.918 6.918 0 0 1 8.25 30.8V17.162a6.918 6.918 0 0 1 6.918-6.918h8.58Z\" />\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M30.083 9.579a4.5 4.5 0 0 1 6.315-.008l.163.168a4.503 4.503 0 0 1-.14 6.241h-.001L24.019 28.333a.752.752 0 0 1-.317.187L16.1 30.765a.75.75 0 0 1-.962-.72v-.006c0-.072.01-.144.031-.213l2.242-7.566.033-.09a.75.75 0 0 1 .159-.23l12.48-12.36.001-.001ZM16.995 28.935l5.223-1.54-3.677-3.677-1.546 5.217Zm1.955-6.222 4.284 4.284 10.13-10.09-4.255-4.255-10.159 10.06ZM35.348 10.64a3 3 0 0 0-4.211.005L29.82 11.95l4.252 4.252 1.29-1.284a3.002 3.002 0 0 0-.013-4.274l-.001-.002Z\"\n />\n </>\n );\n\n return getIcon({ size, isHovered, normal, normalHover });\n};\n\nexport default Edit;\n"],"names":[],"mappings":";;AAIA,MAAM,OAA+B,CAAC,EAAE,MAAM,gBAAkD;AAC9F,QAAM,SACJ,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,GAAE,2RAAA,CAA2R;AAAA,IACnS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,GAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACF;AAGF,QAAM,cACJ,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,GAAE,2RAAA,CAA2R;AAAA,IACnS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,GAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACF;AAGF,SAAO,QAAQ,EAAE,MAAM,WAAW,QAAQ,aAAa;AACzD;"}
package/components/Icons/IconNames.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  /** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/
2
- export declare const IconList: readonly ["ActiveMonitoring", "AcupunctureBack", "AlarmClock", "AlertSignFill", "AlertSignStroke", "Amputation", "Anxiety", "Apple", "Archive", "ArmFlexing", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowUpRight", "Attachment", "Atv", "Avatar", "AwakePersonOnPillow", "Baby", "BandAid", "BeerAndPills", "Bell", "Bike", "BirthControl", "BirthdayCake", "Boat", "Body", "Braille", "Brain", "BreastReconstruction", "BreastRemoval", "Breasts", "BrokenHeart", "BrokenPuzzle", "Bus", "Calendar", "CalendarChange", "CalendarCheck", "CalendarEvent", "CalendarSave", "Cancer", "Candle", "Car", "Carton", "Change", "Check", "CheckFill", "CheckOutline", "Chest", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronsDown", "ChevronsUp", "ChevronUp", "ChildPlaying", "Cigarette", "Coins", "Contacts", "Copy", "CoronaCertificate", "Coronavirus", "Cough", "CreditCard", "CriticalHealthInfo", "Cross", "DataExchange", "DataReceived", "DataSent", "Depression", "DigestiveSystem", "Dizzy", "Documents", "Dog", "DonorCard", "DotActive", "DotAlert", "DotCancelled", "DotHalfDisc", "DotInactive", "DotInfo", "DotLookingGlass", "DotPending", "DotQuestionMark", "DotSuccess", "DotTransparent", "DotWarningTriangle", "Download", "Draft", "Ear", "EarDeaf", "EarHearingAid", "EarNoseThroat", "EarVolume", "EChat", "ElderlyPerson", "Embolization", "EmergencyCall", "EmoticonAnnoyed", "EmoticonDelighted", "EmoticonDisappointed", "EmoticonHappy", "EmoticonMeh", "EmptyBox", "EnterFullScreen", "Envelope", "Epilepsy", "Eraser", "ErrorSignFill", "ErrorSignStroke", "EuropeanHealthCard", "ExitFullScreen", "Eye", "Facebook", "FallingLeaf", "Female", "FemaleDoctor", "Ferry", "File", "Filter", "FingerBleed", "FirstAidKit", "Fish", "FloppyDisk", "Football", "Form", "Forward", "Gallery", "Garden", "GasCan", "GenderIdentity", "Glasses", "GlassWater", "Globe", "Grain", "Graph", "Group", "GroupTwins", "HandsAndHeart", "HandWaving", "HandWithDisease", "HealthcarePerson", "HealthcarePersonell", "HealthClinic", "HealthMeasurements", "HealthWarning", "HearingProtection", "Heart", "HeartHands", "HelpingHand", "HelpSign", "Hemodialysis", "Hiker", "Hipprosthesis", "History", "HivAndAids", "Home", "HomeFill", "Hormone", "Hospital", "Hourglass", "HTMLFile", "ImgFile", "Inbox", "InfoSignFill", "InfoSignStroke", "Instagram", "Intravenous", "JointPain", "Journal", "JpgFile", "Kidney", "KitchenScale", "Kjernejournal", "Laboratory", "LaptopBlog", "LawBook", "LegalDocument", "LightBulb", "List", "Location", "LocationFill", "Lock", "Login", "Logout", "Lungs", "Makeup", "MaleDoctor", "MaleDoctorAndPerson", "MaleDoctorCompact", "MaleDoctorCompactFill", "MaleGenitalia", "Medicine", "MedicineWarning", "MentalHealthAdult", "MentalHealthChild", "Menu", "Microscope", "Minus", "Mirror", "MobilePhone", "MotherHoldingBaby", "MuscleBack", "MuscleLeg", "Mushroom", "Music", "MusselsAndSalt", "NoAccess", "NoEye", "NoFilter", "Notepad", "Osteotomy", "PaintRoller", "PaperPlane", "PatientAndPerson", "Pause", "PdfFile", "Pencil", "PeopleTalking", "Peritonealdialysis", "Person", "PersonalPlan", "PersonAndPatient", "PersonCancel", "PersonInXRayMachine", "PersonOverweight", "PersonRelaxing", "PersonWithBrain", "PersonWithBrokenArm", "PersonWithCrutches", "PersonWithJaw", "PersonWithMagnifyingGlass", "PersonWithSenses", "PersonWorking", "PizzaSlice", "Plane", "Plant", "PlateKnifeFork", "Play", "PlusLarge", "PlusSmall", "PngFile", "Podcast", "PoisonInformation", "Pregnant", "Printer", "Psychosis", "Publication", "Puzzle", "QrCode", "Quarrel", "RadioactiveTreatment", "Radioiodine", "RadioTherapy", "Receipt", "Receptionist", "Recovery", "Referral", "Refresh", "Refund", "Reminder", "Reply", "Rocket", "RtfFile", "Save", "Scale", "ScreenReader", "Search", "SectionSign", "Settings", "SettingsFill", "Sexualorientation", "ShakingHand", "Share", "SharedHealthData", "SharedHealthMeasurements", "Shield", "ShuntOperation", "Skeleton", "Skin", "Snake", "Snapchat", "SortDown", "SortUp", "SpeechBubble", "Spray", "STDs", "StickyNote", "StickyNotes", "Stopwatch", "Sun", "SupportingPerson", "Surgery", "Sweets", "Syringe", "Taxi", "TeddyBear", "Teenagers", "ThinkingAboutBaby", "Ticket", "TimePassing", "Toddler", "Tombstone", "Toolbox", "Tooth", "TotalKneeProsthesis", "Train", "Transplantation", "TrashCan", "TravelRoute", "TreatmentAids", "TriangleX", "Twitter", "Undo", "UniProsthesis", "Upload", "UserOrganization", "Vaccine", "VerticalDots", "VideoCamera", "VideoChat", "Wallet", "Watch", "Website", "Wheelchair", "WheelchairActive", "Window", "WordDocument", "WorkSuitcase", "X", "XmlFile", "XOutline", "YouTube", "Zoom"];
2
+ export declare const IconList: readonly ["ActiveMonitoring", "AcupunctureBack", "AlarmClock", "AlertSignFill", "AlertSignStroke", "Amputation", "Anxiety", "Apple", "Archive", "ArmFlexing", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowUpRight", "Attachment", "Atv", "Avatar", "AwakePersonOnPillow", "Baby", "BandAid", "BeerAndPills", "Bell", "Bike", "BirthControl", "BirthdayCake", "Boat", "Body", "Braille", "Brain", "BreastReconstruction", "BreastRemoval", "Breasts", "BrokenHeart", "BrokenPuzzle", "Bus", "Calendar", "CalendarChange", "CalendarCheck", "CalendarEvent", "CalendarSave", "Cancer", "Candle", "Car", "Carton", "Change", "Check", "CheckFill", "CheckOutline", "Chest", "ChevronDown", "ChevronLeft", "ChevronRight", "ChevronsDown", "ChevronsUp", "ChevronUp", "ChildPlaying", "Cigarette", "Coins", "Contacts", "Copy", "CoronaCertificate", "Coronavirus", "Cough", "CreditCard", "CriticalHealthInfo", "Cross", "DataExchange", "DataReceived", "DataSent", "Depression", "DigestiveSystem", "Dizzy", "Documents", "Dog", "DonorCard", "DotActive", "DotAlert", "DotCancelled", "DotHalfDisc", "DotInactive", "DotInfo", "DotLookingGlass", "DotPending", "DotQuestionMark", "DotSuccess", "DotTransparent", "DotWarningTriangle", "Download", "Draft", "Drag", "Ear", "EarDeaf", "EarHearingAid", "EarNoseThroat", "EarVolume", "EChat", "Edit", "ElderlyPerson", "Embolization", "EmergencyCall", "EmoticonAnnoyed", "EmoticonDelighted", "EmoticonDisappointed", "EmoticonHappy", "EmoticonMeh", "EmptyBox", "EnterFullScreen", "Envelope", "Epilepsy", "Eraser", "ErrorSignFill", "ErrorSignStroke", "EuropeanHealthCard", "ExitFullScreen", "Eye", "Facebook", "FallingLeaf", "Female", "FemaleDoctor", "Ferry", "File", "Filter", "FingerBleed", "FirstAidKit", "Fish", "FloppyDisk", "Football", "Form", "Forward", "Gallery", "Garden", "GasCan", "GenderIdentity", "Glasses", "GlassWater", "Globe", "Grain", "Graph", "Group", "GroupTwins", "HandsAndHeart", "HandWaving", "HandWithDisease", "HealthcarePerson", "HealthcarePersonell", "HealthClinic", "HealthMeasurements", "HealthWarning", "HearingProtection", "Heart", "HeartHands", "HelpingHand", "HelpSign", "Hemodialysis", "Hiker", "Hipprosthesis", "History", "HivAndAids", "Home", "HomeFill", "Hormone", "Hospital", "Hourglass", "HTMLFile", "ImgFile", "Inbox", "InfoSignFill", "InfoSignStroke", "Instagram", "Intravenous", "JointPain", "Journal", "JpgFile", "Kidney", "KitchenScale", "Kjernejournal", "Laboratory", "LaptopBlog", "LawBook", "LegalDocument", "LightBulb", "List", "Location", "LocationFill", "Lock", "Login", "Logout", "Lungs", "Makeup", "MaleDoctor", "MaleDoctorAndPerson", "MaleDoctorCompact", "MaleDoctorCompactFill", "MaleGenitalia", "Medicine", "MedicineWarning", "MentalHealthAdult", "MentalHealthChild", "Menu", "Microscope", "Minus", "Mirror", "MobilePhone", "MotherHoldingBaby", "MuscleBack", "MuscleLeg", "Mushroom", "Music", "MusselsAndSalt", "NoAccess", "NoEye", "NoFilter", "Notepad", "Osteotomy", "PaintRoller", "PaperPlane", "PatientAndPerson", "Pause", "PdfFile", "Pencil", "PeopleTalking", "Peritonealdialysis", "Person", "PersonalPlan", "PersonAndPatient", "PersonCancel", "PersonInXRayMachine", "PersonOverweight", "PersonRelaxing", "PersonWithBrain", "PersonWithBrokenArm", "PersonWithCrutches", "PersonWithJaw", "PersonWithMagnifyingGlass", "PersonWithSenses", "PersonWorking", "PizzaSlice", "Plane", "Plant", "PlateKnifeFork", "Play", "PlusLarge", "PlusSmall", "PngFile", "Podcast", "PoisonInformation", "Pregnant", "Printer", "Psychosis", "Publication", "Puzzle", "QrCode", "Quarrel", "RadioactiveTreatment", "Radioiodine", "RadioTherapy", "Receipt", "Receptionist", "Recovery", "Referral", "Refresh", "Refund", "Reminder", "Reply", "Rocket", "RtfFile", "Save", "Scale", "ScreenReader", "Search", "SectionSign", "Settings", "SettingsFill", "Sexualorientation", "ShakingHand", "Share", "SharedHealthData", "SharedHealthMeasurements", "Shield", "ShuntOperation", "Skeleton", "Skin", "Snake", "Snapchat", "SortDown", "SortUp", "SpeechBubble", "Spray", "STDs", "StickyNote", "StickyNotes", "Stopwatch", "Sun", "SupportingPerson", "Surgery", "Sweets", "Syringe", "Taxi", "TeddyBear", "Teenagers", "ThinkingAboutBaby", "Ticket", "TimePassing", "Toddler", "Tombstone", "Toolbox", "Tooth", "TotalKneeProsthesis", "Train", "Transplantation", "TrashCan", "TravelRoute", "TreatmentAids", "TriangleX", "Twitter", "Undo", "UniProsthesis", "Upload", "UserOrganization", "Vaccine", "VerticalDots", "VideoCamera", "VideoChat", "Wallet", "Watch", "Website", "Wheelchair", "WheelchairActive", "Window", "WordDocument", "WorkSuitcase", "X", "XmlFile", "XOutline", "YouTube", "Zoom"];
3
3
  export type IconName = (typeof IconList)[number];
package/components/Icons/IconNames.js CHANGED
@@ -89,12 +89,14 @@ const IconList = [
89
89
  "DotWarningTriangle",
90
90
  "Download",
91
91
  "Draft",
92
+ "Drag",
92
93
  "Ear",
93
94
  "EarDeaf",
94
95
  "EarHearingAid",
95
96
  "EarNoseThroat",
96
97
  "EarVolume",
97
98
  "EChat",
99
+ "Edit",
98
100
  "ElderlyPerson",
99
101
  "Embolization",
100
102
  "EmergencyCall",
package/components/Icons/IconNames.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IconNames.js","sources":["../../../src/components/Icons/IconNames.ts"],"sourcesContent":["/** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/\n\nexport const IconList = [\n 'ActiveMonitoring',\n 'AcupunctureBack',\n 'AlarmClock',\n 'AlertSignFill',\n 'AlertSignStroke',\n 'Amputation',\n 'Anxiety',\n 'Apple',\n 'Archive',\n 'ArmFlexing',\n 'ArrowDown',\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowUpRight',\n 'Attachment',\n 'Atv',\n 'Avatar',\n 'AwakePersonOnPillow',\n 'Baby',\n 'BandAid',\n 'BeerAndPills',\n 'Bell',\n 'Bike',\n 'BirthControl',\n 'BirthdayCake',\n 'Boat',\n 'Body',\n 'Braille',\n 'Brain',\n 'BreastReconstruction',\n 'BreastRemoval',\n 'Breasts',\n 'BrokenHeart',\n 'BrokenPuzzle',\n 'Bus',\n 'Calendar',\n 'CalendarChange',\n 'CalendarCheck',\n 'CalendarEvent',\n 'CalendarSave',\n 'Cancer',\n 'Candle',\n 'Car',\n 'Carton',\n 'Change',\n 'Check',\n 'CheckFill',\n 'CheckOutline',\n 'Chest',\n 'ChevronDown',\n 'ChevronLeft',\n 'ChevronRight',\n 'ChevronsDown',\n 'ChevronsUp',\n 'ChevronUp',\n 'ChildPlaying',\n 'Cigarette',\n 'Coins',\n 'Contacts',\n 'Copy',\n 'CoronaCertificate',\n 'Coronavirus',\n 'Cough',\n 'CreditCard',\n 'CriticalHealthInfo',\n 'Cross',\n 'DataExchange',\n 'DataReceived',\n 'DataSent',\n 'Depression',\n 'DigestiveSystem',\n 'Dizzy',\n 'Documents',\n 'Dog',\n 'DonorCard',\n 'DotActive',\n 'DotAlert',\n 'DotCancelled',\n 'DotHalfDisc',\n 'DotInactive',\n 'DotInfo',\n 'DotLookingGlass',\n 'DotPending',\n 'DotQuestionMark',\n 'DotSuccess',\n 'DotTransparent',\n 'DotWarningTriangle',\n 'Download',\n 'Draft',\n 'Ear',\n 'EarDeaf',\n 'EarHearingAid',\n 'EarNoseThroat',\n 'EarVolume',\n 'EChat',\n 'ElderlyPerson',\n 'Embolization',\n 'EmergencyCall',\n 'EmoticonAnnoyed',\n 'EmoticonDelighted',\n 'EmoticonDisappointed',\n 'EmoticonHappy',\n 'EmoticonMeh',\n 'EmptyBox',\n 'EnterFullScreen',\n 'Envelope',\n 'Epilepsy',\n 'Eraser',\n 'ErrorSignFill',\n 'ErrorSignStroke',\n 'EuropeanHealthCard',\n 'ExitFullScreen',\n 'Eye',\n 'Facebook',\n 'FallingLeaf',\n 'Female',\n 'FemaleDoctor',\n 'Ferry',\n 'File',\n 'Filter',\n 'FingerBleed',\n 'FirstAidKit',\n 'Fish',\n 'FloppyDisk',\n 'Football',\n 'Form',\n 'Forward',\n 'Gallery',\n 'Garden',\n 'GasCan',\n 'GenderIdentity',\n 'Glasses',\n 'GlassWater',\n 'Globe',\n 'Grain',\n 'Graph',\n 'Group',\n 'GroupTwins',\n 'HandsAndHeart',\n 'HandWaving',\n 'HandWithDisease',\n 'HealthcarePerson',\n 'HealthcarePersonell',\n 'HealthClinic',\n 'HealthMeasurements',\n 'HealthWarning',\n 'HearingProtection',\n 'Heart',\n 'HeartHands',\n 'HelpingHand',\n 'HelpSign',\n 'Hemodialysis',\n 'Hiker',\n 'Hipprosthesis',\n 'History',\n 'HivAndAids',\n 'Home',\n 'HomeFill',\n 'Hormone',\n 'Hospital',\n 'Hourglass',\n 'HTMLFile',\n 'ImgFile',\n 'Inbox',\n 'InfoSignFill',\n 'InfoSignStroke',\n 'Instagram',\n 'Intravenous',\n 'JointPain',\n 'Journal',\n 'JpgFile',\n 'Kidney',\n 'KitchenScale',\n 'Kjernejournal',\n 'Laboratory',\n 'LaptopBlog',\n 'LawBook',\n 'LegalDocument',\n 'LightBulb',\n 'List',\n 'Location',\n 'LocationFill',\n 'Lock',\n 'Login',\n 'Logout',\n 'Lungs',\n 'Makeup',\n 'MaleDoctor',\n 'MaleDoctorAndPerson',\n 'MaleDoctorCompact',\n 'MaleDoctorCompactFill',\n 'MaleGenitalia',\n 'Medicine',\n 'MedicineWarning',\n 'MentalHealthAdult',\n 'MentalHealthChild',\n 'Menu',\n 'Microscope',\n 'Minus',\n 'Mirror',\n 'MobilePhone',\n 'MotherHoldingBaby',\n 'MuscleBack',\n 'MuscleLeg',\n 'Mushroom',\n 'Music',\n 'MusselsAndSalt',\n 'NoAccess',\n 'NoEye',\n 'NoFilter',\n 'Notepad',\n 'Osteotomy',\n 'PaintRoller',\n 'PaperPlane',\n 'PatientAndPerson',\n 'Pause',\n 'PdfFile',\n 'Pencil',\n 'PeopleTalking',\n 'Peritonealdialysis',\n 'Person',\n 'PersonalPlan',\n 'PersonAndPatient',\n 'PersonCancel',\n 'PersonInXRayMachine',\n 'PersonOverweight',\n 'PersonRelaxing',\n 'PersonWithBrain',\n 'PersonWithBrokenArm',\n 'PersonWithCrutches',\n 'PersonWithJaw',\n 'PersonWithMagnifyingGlass',\n 'PersonWithSenses',\n 'PersonWorking',\n 'PizzaSlice',\n 'Plane',\n 'Plant',\n 'PlateKnifeFork',\n 'Play',\n 'PlusLarge',\n 'PlusSmall',\n 'PngFile',\n 'Podcast',\n 'PoisonInformation',\n 'Pregnant',\n 'Printer',\n 'Psychosis',\n 'Publication',\n 'Puzzle',\n 'QrCode',\n 'Quarrel',\n 'RadioactiveTreatment',\n 'Radioiodine',\n 'RadioTherapy',\n 'Receipt',\n 'Receptionist',\n 'Recovery',\n 'Referral',\n 'Refresh',\n 'Refund',\n 'Reminder',\n 'Reply',\n 'Rocket',\n 'RtfFile',\n 'Save',\n 'Scale',\n 'ScreenReader',\n 'Search',\n 'SectionSign',\n 'Settings',\n 'SettingsFill',\n 'Sexualorientation',\n 'ShakingHand',\n 'Share',\n 'SharedHealthData',\n 'SharedHealthMeasurements',\n 'Shield',\n 'ShuntOperation',\n 'Skeleton',\n 'Skin',\n 'Snake',\n 'Snapchat',\n 'SortDown',\n 'SortUp',\n 'SpeechBubble',\n 'Spray',\n 'STDs',\n 'StickyNote',\n 'StickyNotes',\n 'Stopwatch',\n 'Sun',\n 'SupportingPerson',\n 'Surgery',\n 'Sweets',\n 'Syringe',\n 'Taxi',\n 'TeddyBear',\n 'Teenagers',\n 'ThinkingAboutBaby',\n 'Ticket',\n 'TimePassing',\n 'Toddler',\n 'Tombstone',\n 'Toolbox',\n 'Tooth',\n 'TotalKneeProsthesis',\n 'Train',\n 'Transplantation',\n 'TrashCan',\n 'TravelRoute',\n 'TreatmentAids',\n 'TriangleX',\n 'Twitter',\n 'Undo',\n 'UniProsthesis',\n 'Upload',\n 'UserOrganization',\n 'Vaccine',\n 'VerticalDots',\n 'VideoCamera',\n 'VideoChat',\n 'Wallet',\n 'Watch',\n 'Website',\n 'Wheelchair',\n 'WheelchairActive',\n 'Window',\n 'WordDocument',\n 'WorkSuitcase',\n 'X',\n 'XmlFile',\n 'XOutline',\n 'YouTube',\n 'Zoom',\n] as const;\n\nexport type IconName = (typeof IconList)[number];\n"],"names":[],"mappings":"AAEO,MAAM,WAAW;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}
1
+ {"version":3,"file":"IconNames.js","sources":["../../../src/components/Icons/IconNames.ts"],"sourcesContent":["/** AUTO-GENERATED - DO NOT CHANGE MANUALLY **/\n\nexport const IconList = [\n 'ActiveMonitoring',\n 'AcupunctureBack',\n 'AlarmClock',\n 'AlertSignFill',\n 'AlertSignStroke',\n 'Amputation',\n 'Anxiety',\n 'Apple',\n 'Archive',\n 'ArmFlexing',\n 'ArrowDown',\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowUpRight',\n 'Attachment',\n 'Atv',\n 'Avatar',\n 'AwakePersonOnPillow',\n 'Baby',\n 'BandAid',\n 'BeerAndPills',\n 'Bell',\n 'Bike',\n 'BirthControl',\n 'BirthdayCake',\n 'Boat',\n 'Body',\n 'Braille',\n 'Brain',\n 'BreastReconstruction',\n 'BreastRemoval',\n 'Breasts',\n 'BrokenHeart',\n 'BrokenPuzzle',\n 'Bus',\n 'Calendar',\n 'CalendarChange',\n 'CalendarCheck',\n 'CalendarEvent',\n 'CalendarSave',\n 'Cancer',\n 'Candle',\n 'Car',\n 'Carton',\n 'Change',\n 'Check',\n 'CheckFill',\n 'CheckOutline',\n 'Chest',\n 'ChevronDown',\n 'ChevronLeft',\n 'ChevronRight',\n 'ChevronsDown',\n 'ChevronsUp',\n 'ChevronUp',\n 'ChildPlaying',\n 'Cigarette',\n 'Coins',\n 'Contacts',\n 'Copy',\n 'CoronaCertificate',\n 'Coronavirus',\n 'Cough',\n 'CreditCard',\n 'CriticalHealthInfo',\n 'Cross',\n 'DataExchange',\n 'DataReceived',\n 'DataSent',\n 'Depression',\n 'DigestiveSystem',\n 'Dizzy',\n 'Documents',\n 'Dog',\n 'DonorCard',\n 'DotActive',\n 'DotAlert',\n 'DotCancelled',\n 'DotHalfDisc',\n 'DotInactive',\n 'DotInfo',\n 'DotLookingGlass',\n 'DotPending',\n 'DotQuestionMark',\n 'DotSuccess',\n 'DotTransparent',\n 'DotWarningTriangle',\n 'Download',\n 'Draft',\n 'Drag',\n 'Ear',\n 'EarDeaf',\n 'EarHearingAid',\n 'EarNoseThroat',\n 'EarVolume',\n 'EChat',\n 'Edit',\n 'ElderlyPerson',\n 'Embolization',\n 'EmergencyCall',\n 'EmoticonAnnoyed',\n 'EmoticonDelighted',\n 'EmoticonDisappointed',\n 'EmoticonHappy',\n 'EmoticonMeh',\n 'EmptyBox',\n 'EnterFullScreen',\n 'Envelope',\n 'Epilepsy',\n 'Eraser',\n 'ErrorSignFill',\n 'ErrorSignStroke',\n 'EuropeanHealthCard',\n 'ExitFullScreen',\n 'Eye',\n 'Facebook',\n 'FallingLeaf',\n 'Female',\n 'FemaleDoctor',\n 'Ferry',\n 'File',\n 'Filter',\n 'FingerBleed',\n 'FirstAidKit',\n 'Fish',\n 'FloppyDisk',\n 'Football',\n 'Form',\n 'Forward',\n 'Gallery',\n 'Garden',\n 'GasCan',\n 'GenderIdentity',\n 'Glasses',\n 'GlassWater',\n 'Globe',\n 'Grain',\n 'Graph',\n 'Group',\n 'GroupTwins',\n 'HandsAndHeart',\n 'HandWaving',\n 'HandWithDisease',\n 'HealthcarePerson',\n 'HealthcarePersonell',\n 'HealthClinic',\n 'HealthMeasurements',\n 'HealthWarning',\n 'HearingProtection',\n 'Heart',\n 'HeartHands',\n 'HelpingHand',\n 'HelpSign',\n 'Hemodialysis',\n 'Hiker',\n 'Hipprosthesis',\n 'History',\n 'HivAndAids',\n 'Home',\n 'HomeFill',\n 'Hormone',\n 'Hospital',\n 'Hourglass',\n 'HTMLFile',\n 'ImgFile',\n 'Inbox',\n 'InfoSignFill',\n 'InfoSignStroke',\n 'Instagram',\n 'Intravenous',\n 'JointPain',\n 'Journal',\n 'JpgFile',\n 'Kidney',\n 'KitchenScale',\n 'Kjernejournal',\n 'Laboratory',\n 'LaptopBlog',\n 'LawBook',\n 'LegalDocument',\n 'LightBulb',\n 'List',\n 'Location',\n 'LocationFill',\n 'Lock',\n 'Login',\n 'Logout',\n 'Lungs',\n 'Makeup',\n 'MaleDoctor',\n 'MaleDoctorAndPerson',\n 'MaleDoctorCompact',\n 'MaleDoctorCompactFill',\n 'MaleGenitalia',\n 'Medicine',\n 'MedicineWarning',\n 'MentalHealthAdult',\n 'MentalHealthChild',\n 'Menu',\n 'Microscope',\n 'Minus',\n 'Mirror',\n 'MobilePhone',\n 'MotherHoldingBaby',\n 'MuscleBack',\n 'MuscleLeg',\n 'Mushroom',\n 'Music',\n 'MusselsAndSalt',\n 'NoAccess',\n 'NoEye',\n 'NoFilter',\n 'Notepad',\n 'Osteotomy',\n 'PaintRoller',\n 'PaperPlane',\n 'PatientAndPerson',\n 'Pause',\n 'PdfFile',\n 'Pencil',\n 'PeopleTalking',\n 'Peritonealdialysis',\n 'Person',\n 'PersonalPlan',\n 'PersonAndPatient',\n 'PersonCancel',\n 'PersonInXRayMachine',\n 'PersonOverweight',\n 'PersonRelaxing',\n 'PersonWithBrain',\n 'PersonWithBrokenArm',\n 'PersonWithCrutches',\n 'PersonWithJaw',\n 'PersonWithMagnifyingGlass',\n 'PersonWithSenses',\n 'PersonWorking',\n 'PizzaSlice',\n 'Plane',\n 'Plant',\n 'PlateKnifeFork',\n 'Play',\n 'PlusLarge',\n 'PlusSmall',\n 'PngFile',\n 'Podcast',\n 'PoisonInformation',\n 'Pregnant',\n 'Printer',\n 'Psychosis',\n 'Publication',\n 'Puzzle',\n 'QrCode',\n 'Quarrel',\n 'RadioactiveTreatment',\n 'Radioiodine',\n 'RadioTherapy',\n 'Receipt',\n 'Receptionist',\n 'Recovery',\n 'Referral',\n 'Refresh',\n 'Refund',\n 'Reminder',\n 'Reply',\n 'Rocket',\n 'RtfFile',\n 'Save',\n 'Scale',\n 'ScreenReader',\n 'Search',\n 'SectionSign',\n 'Settings',\n 'SettingsFill',\n 'Sexualorientation',\n 'ShakingHand',\n 'Share',\n 'SharedHealthData',\n 'SharedHealthMeasurements',\n 'Shield',\n 'ShuntOperation',\n 'Skeleton',\n 'Skin',\n 'Snake',\n 'Snapchat',\n 'SortDown',\n 'SortUp',\n 'SpeechBubble',\n 'Spray',\n 'STDs',\n 'StickyNote',\n 'StickyNotes',\n 'Stopwatch',\n 'Sun',\n 'SupportingPerson',\n 'Surgery',\n 'Sweets',\n 'Syringe',\n 'Taxi',\n 'TeddyBear',\n 'Teenagers',\n 'ThinkingAboutBaby',\n 'Ticket',\n 'TimePassing',\n 'Toddler',\n 'Tombstone',\n 'Toolbox',\n 'Tooth',\n 'TotalKneeProsthesis',\n 'Train',\n 'Transplantation',\n 'TrashCan',\n 'TravelRoute',\n 'TreatmentAids',\n 'TriangleX',\n 'Twitter',\n 'Undo',\n 'UniProsthesis',\n 'Upload',\n 'UserOrganization',\n 'Vaccine',\n 'VerticalDots',\n 'VideoCamera',\n 'VideoChat',\n 'Wallet',\n 'Watch',\n 'Website',\n 'Wheelchair',\n 'WheelchairActive',\n 'Window',\n 'WordDocument',\n 'WorkSuitcase',\n 'X',\n 'XmlFile',\n 'XOutline',\n 'YouTube',\n 'Zoom',\n] as const;\n\nexport type IconName = (typeof IconList)[number];\n"],"names":[],"mappings":"AAEO,MAAM,WAAW;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}
package/components/StatusDot/styles.module.scss CHANGED
@@ -10,6 +10,7 @@
10
10
  $status-dot-size: 1rem;
11
11
 
12
12
  .statusdot {
13
+ min-height: 1.75rem;
13
14
  position: relative;
14
15
  display: inline-flex;
15
16
  align-items: center;
@@ -29,6 +30,7 @@ $status-dot-size: 1rem;
29
30
  &--active {
30
31
  fill: var(--color-notification-graphics-success);
31
32
  }
33
+
32
34
  &--success#{&}--on-dark,
33
35
  &--active#{&}--on-dark {
34
36
  fill: var(--core-color-kiwi-200);
@@ -41,6 +43,7 @@ $status-dot-size: 1rem;
41
43
  &--pending {
42
44
  fill: var(--color-notification-graphics-warning);
43
45
  }
46
+
44
47
  &--inprocess#{&}--on-dark,
45
48
  &--exception#{&}--on-dark,
46
49
  &--unknown#{&}--on-dark,
@@ -54,6 +57,7 @@ $status-dot-size: 1rem;
54
57
  &--inactive {
55
58
  fill: var(--color-notification-graphics-error);
56
59
  }
60
+
57
61
  &--cancelled#{&}--on-dark,
58
62
  &--alert#{&}--on-dark,
59
63
  &--inactive#{&}--on-dark {
@@ -63,6 +67,7 @@ $status-dot-size: 1rem;
63
67
  &--info {
64
68
  fill: var(--core-color-blueberry-500);
65
69
  }
70
+
66
71
  &--info#{&}--on-dark {
67
72
  fill: var(--core-color-blueberry-200);
68
73
  }
@@ -70,6 +75,7 @@ $status-dot-size: 1rem;
70
75
  &--transparent {
71
76
  fill: var(--color-disabled-border);
72
77
  }
78
+
73
79
  &--transparent#{&}--on-dark,
74
80
  &--group#{&}--on-dark,
75
81
  &--recurring#{&}--on-dark,
package/components/Toggle/Toggle.d.ts CHANGED
@@ -3,6 +3,10 @@ export type LabelText = {
3
3
  text: string;
4
4
  type?: 'subdued' | 'normal';
5
5
  };
6
+ export type StatusTextType = {
7
+ checked: string;
8
+ unchecked: string;
9
+ };
6
10
  export declare enum TogglePosition {
7
11
  left = "left",
8
12
  right = "right"
@@ -19,6 +23,8 @@ export interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputEle
19
23
  label: LabelText[];
20
24
  /** Defines the color of the toggle */
21
25
  onColor?: keyof typeof ToggleOnColor;
26
+ /** A text that is shown under the Toggle switch */
27
+ statusText?: StatusTextType;
22
28
  /** Sets the sublabel of the Toggle */
23
29
  subLabel?: string;
24
30
  /** Sets the position of the toggle relative to the label */
package/components/Toggle/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsxs, jsx, Fragment } from "react/jsx-runtime";
1
+ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
2
  import { useState, useEffect } from "react";
3
3
  import classNames from "classnames";
4
4
  import { AnalyticsId } from "../../constants.js";
@@ -22,6 +22,7 @@ const Toggle = ({
22
22
  label,
23
23
  onChange,
24
24
  onColor = "onwhite",
25
+ statusText,
25
26
  subLabel,
26
27
  togglePosition = "left",
27
28
  testId
@@ -76,14 +77,13 @@ const Toggle = ({
76
77
  setShowToggleAnimation(true);
77
78
  onChange == null ? void 0 : onChange(event);
78
79
  };
79
- const toggleContainerClassNames = classNames(styles["toggle-container"]);
80
- const toggleRowClassNames = classNames(styles["toggle-container__row"], {
81
- [styles["toggle-container__row--right"]]: togglePosition === "right"
82
- /* right */
80
+ const toggleContainerClassNames = classNames(styles["toggle-container"], {
81
+ [styles["toggle-container--position-right"]]: togglePosition === "right",
82
+ [styles["toggle-container--with-status"]]: statusText !== void 0 && statusText !== null
83
83
  });
84
- const subLabelClassNames = classNames(styles["toggle-container__sublabel"], {
85
- [styles["toggle-container__sublabel--toggle-right"]]: togglePosition === "right"
86
- /* right */
84
+ const subLabelClassNames = classNames(styles["toggle-container__sublabel"]);
85
+ const statusTextClassNames = classNames(styles["toggle-container__status"], {
86
+ [styles["toggle-container__status--checked"]]: checkedState
87
87
  });
88
88
  const toggleClassNames = classNames(styles["toggle-container__toggle"], {
89
89
  [styles["toggle-container__toggle--ignore-hover"]]: showToggleAnimation,
@@ -93,62 +93,55 @@ const Toggle = ({
93
93
  const toggleDotClassNames = classNames(styles["toggle-container__toggle__dot"], {
94
94
  [styles["toggle-container__toggle__dot--ignore-hover"]]: showToggleAnimation
95
95
  });
96
- const renderToggle = () => /* @__PURE__ */ jsxs("label", { ref: refObject, className: styles["toggle-container__toggle-group"], children: [
97
- /* @__PURE__ */ jsx(
98
- "input",
99
- {
100
- id: inputId,
101
- type: "checkbox",
102
- checked: checkedState,
103
- onChange: handleChange,
104
- className: styles["toggle-container__input"],
105
- "aria-label": label.map((l) => l.text).join(" "),
106
- "aria-describedby": subLabel ? subLabelId : void 0,
107
- role: "switch"
108
- }
109
- ),
110
- /* @__PURE__ */ jsx("span", { id: toggleId, className: toggleClassNames, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { id: toggleDotId, className: toggleDotClassNames, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
111
- "svg",
112
- {
113
- width: "17",
114
- height: "13",
115
- viewBox: "0 0 17 13",
116
- xmlns: "http://www.w3.org/2000/svg",
117
- className: styles["toggle-container__toggle__dot__icon"],
118
- children: /* @__PURE__ */ jsx("path", { d: "M15 2L6.80839 10.548L2 5.53145", fill: "none", strokeWidth: "3" })
119
- }
120
- ) }) })
96
+ const renderToggle = () => /* @__PURE__ */ jsxs("div", { className: styles["toggle-container__outer-toggle"], children: [
97
+ /* @__PURE__ */ jsxs("label", { ref: refObject, className: classNames(styles["toggle-container__toggle-group"]), children: [
98
+ /* @__PURE__ */ jsx(
99
+ "input",
100
+ {
101
+ id: inputId,
102
+ type: "checkbox",
103
+ checked: checkedState,
104
+ onChange: handleChange,
105
+ className: styles["toggle-container__input"],
106
+ "aria-label": label.map((l) => l.text).join(" "),
107
+ "aria-describedby": `${subLabel ? subLabelId + " " : void 0} ${statusText ? toggleId + "-status" : void 0}`,
108
+ role: "switch"
109
+ }
110
+ ),
111
+ /* @__PURE__ */ jsx("span", { id: toggleId, className: toggleClassNames, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { id: toggleDotId, className: toggleDotClassNames, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
112
+ "svg",
113
+ {
114
+ width: "17",
115
+ height: "13",
116
+ viewBox: "0 0 17 13",
117
+ xmlns: "http://www.w3.org/2000/svg",
118
+ className: styles["toggle-container__toggle__dot__icon"],
119
+ children: /* @__PURE__ */ jsx("path", { d: "M15 2L6.80839 10.548L2 5.53145", fill: "none", strokeWidth: "3" })
120
+ }
121
+ ) }) })
122
+ ] }),
123
+ statusText && /* @__PURE__ */ jsx("span", { className: statusTextClassNames, id: toggleId + "-status", children: checkedState ? statusText.checked : statusText.unchecked })
121
124
  ] });
122
125
  const renderLabelText = () => {
123
- return /* @__PURE__ */ jsx(
124
- "span",
125
- {
126
- id: labelId,
127
- className: classNames(styles["toggle-container__label"], {
128
- [styles["toggle-container__label--toggle-right"]]: togglePosition === "right"
129
- /* right */
130
- }),
131
- children: label.map((labelText) => {
132
- const labelClassNames = classNames({
133
- [styles["toggle-container__label__text--subdued"]]: labelText.type === "subdued"
134
- });
135
- return /* @__PURE__ */ jsx("span", { className: labelClassNames, children: labelText.text }, labelId + labelText.text);
136
- })
137
- }
138
- );
126
+ return /* @__PURE__ */ jsxs("div", { className: styles["toggle-container__outer-label"], children: [
127
+ /* @__PURE__ */ jsx("span", { id: labelId, className: classNames(styles["toggle-container__label"]), children: label.map((labelText) => {
128
+ const labelClassNames = classNames({
129
+ [styles["toggle-container__label__text--subdued"]]: labelText.type === "subdued"
130
+ });
131
+ return /* @__PURE__ */ jsx("span", { className: labelClassNames, children: labelText.text }, labelId + labelText.text);
132
+ }) }),
133
+ subLabel && /* @__PURE__ */ jsx("div", { id: subLabelId, className: subLabelClassNames, children: subLabel })
134
+ ] });
139
135
  };
140
136
  return /* @__PURE__ */ jsxs("div", { className: toggleContainerClassNames, "data-testid": testId, "data-analyticsid": AnalyticsId.Toggle, children: [
141
- /* @__PURE__ */ jsxs("div", { className: toggleRowClassNames, children: [
142
- togglePosition === "left" && /* @__PURE__ */ jsxs(Fragment, { children: [
143
- renderToggle(),
144
- renderLabelText()
145
- ] }),
146
- togglePosition === "right" && /* @__PURE__ */ jsxs(Fragment, { children: [
147
- renderLabelText(),
148
- renderToggle()
149
- ] })
137
+ togglePosition === "left" && /* @__PURE__ */ jsxs(Fragment, { children: [
138
+ renderToggle(),
139
+ renderLabelText()
150
140
  ] }),
151
- subLabel && /* @__PURE__ */ jsx("div", { id: subLabelId, className: subLabelClassNames, children: subLabel })
141
+ togglePosition === "right" && /* @__PURE__ */ jsxs(Fragment, { children: [
142
+ renderLabelText(),
143
+ renderToggle()
144
+ ] })
152
145
  ] });
153
146
  };
154
147
  export {
package/components/Toggle/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n text: string;\n type?: 'subdued' | 'normal';\n};\n\nexport enum TogglePosition {\n left = 'left',\n right = 'right',\n}\n\nexport enum ToggleOnColor {\n onwhite = 'onwhite',\n onneutral = 'onneutral',\n onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n /** Determines if the Toggle is checked */\n checked?: boolean;\n /** Sets the label of the Toggle */\n label: LabelText[];\n /** Defines the color of the toggle */\n onColor?: keyof typeof ToggleOnColor;\n /** Sets the sublabel of the Toggle */\n subLabel?: string;\n /** Sets the position of the toggle relative to the label */\n togglePosition?: keyof typeof TogglePosition;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n checked = false,\n label,\n onChange,\n onColor = ToggleOnColor.onwhite,\n subLabel,\n togglePosition = TogglePosition.left,\n testId,\n}: ToggleProps) => {\n const [checkedState, setCheckedState] = useState(checked);\n const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n const [scope, animate] = useAnimate();\n const inputId = useUuid();\n const toggleId = useUuid();\n const toggleDotId = useUuid();\n const labelId = useUuid();\n const subLabelId = useUuid();\n const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n const showHoveredStyling = isHovered && !showToggleAnimation;\n const isOnWhite = onColor === ToggleOnColor.onwhite;\n\n useEffect(() => {\n if (showToggleAnimation) {\n const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n return (): void => clearTimeout(timer);\n }\n }, [showToggleAnimation]);\n\n useEffect(() => {\n setCheckedState(checked);\n }, [checked]);\n\n useEffect(() => {\n animate('#' + toggleId, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n animate(\n '#' + toggleDotId,\n { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n { duration: 0.2, ease: 'easeInOut' }\n );\n animate('#' + toggleDotId, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n }, [checkedState, showHoveredStyling, isActive]);\n\n const getBackgroundColor = (): string => {\n if (checkedState && isActive) {\n return 'var(--core-color-blueberry-800)';\n } else if (checkedState) {\n return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n } else if (isOnWhite && isActive) {\n return 'var(--core-color-neutral-400)';\n } else if (isOnWhite) {\n return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n } else if (isActive) {\n return 'var(--core-color-neutral-200)';\n } else {\n return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setCheckedState(event.target.checked);\n setShowToggleAnimation(true);\n onChange?.(event);\n };\n\n const toggleContainerClassNames = classNames(styles['toggle-container']);\n\n const toggleRowClassNames = classNames(styles['toggle-container__row'], {\n [styles['toggle-container__row--right']]: togglePosition === TogglePosition.right,\n });\n\n const subLabelClassNames = classNames(styles['toggle-container__sublabel'], {\n [styles['toggle-container__sublabel--toggle-right']]: togglePosition === TogglePosition.right,\n });\n\n const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n });\n\n const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n });\n\n const renderToggle = (): React.ReactElement => (\n <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n <input\n id={inputId}\n type=\"checkbox\"\n checked={checkedState}\n onChange={handleChange}\n className={styles['toggle-container__input']}\n aria-label={label.map(l => l.text).join(' ')}\n aria-describedby={subLabel ? subLabelId : undefined}\n role=\"switch\"\n />\n <span id={toggleId} className={toggleClassNames} aria-hidden=\"true\">\n <span id={toggleDotId} className={toggleDotClassNames} aria-hidden=\"true\">\n <svg\n width=\"17\"\n height=\"13\"\n viewBox=\"0 0 17 13\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={styles['toggle-container__toggle__dot__icon']}\n >\n <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n </svg>\n </span>\n </span>\n </label>\n );\n\n const renderLabelText = (): React.ReactElement => {\n return (\n <span\n id={labelId}\n className={classNames(styles['toggle-container__label'], {\n [styles['toggle-container__label--toggle-right']]: togglePosition === TogglePosition.right,\n })}\n >\n {label.map(labelText => {\n const labelClassNames = classNames({\n [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n });\n\n return (\n <span key={labelId + labelText.text} className={labelClassNames}>\n {labelText.text}\n </span>\n );\n })}\n </span>\n );\n };\n\n return (\n <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n <div className={toggleRowClassNames}>\n {togglePosition === TogglePosition.left && (\n <>\n {renderToggle()}\n {renderLabelText()}\n </>\n )}\n {togglePosition === TogglePosition.right && (\n <>\n {renderLabelText()}\n {renderToggle()}\n </>\n )}\n </div>\n {subLabel && (\n <div id={subLabelId} className={subLabelClassNames}>\n {subLabel}\n </div>\n )}\n </div>\n );\n};\n\nexport default Toggle;\n"],"names":["TogglePosition","ToggleOnColor"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport styles from './styles.module.scss';\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n text: string;\n type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n checked: string;\n unchecked: string;\n};\n\nexport enum TogglePosition {\n left = 'left',\n right = 'right',\n}\n\nexport enum ToggleOnColor {\n onwhite = 'onwhite',\n onneutral = 'onneutral',\n onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n /** Determines if the Toggle is checked */\n checked?: boolean;\n /** Sets the label of the Toggle */\n label: LabelText[];\n /** Defines the color of the toggle */\n onColor?: keyof typeof ToggleOnColor;\n /** A text that is shown under the Toggle switch */\n statusText?: StatusTextType;\n /** Sets the sublabel of the Toggle */\n subLabel?: string;\n /** Sets the position of the toggle relative to the label */\n togglePosition?: keyof typeof TogglePosition;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n checked = false,\n label,\n onChange,\n onColor = ToggleOnColor.onwhite,\n statusText,\n subLabel,\n togglePosition = TogglePosition.left,\n testId,\n}: ToggleProps) => {\n const [checkedState, setCheckedState] = useState(checked);\n const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n const [scope, animate] = useAnimate();\n const inputId = useUuid();\n const toggleId = useUuid();\n const toggleDotId = useUuid();\n const labelId = useUuid();\n const subLabelId = useUuid();\n const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n const showHoveredStyling = isHovered && !showToggleAnimation;\n const isOnWhite = onColor === ToggleOnColor.onwhite;\n\n useEffect(() => {\n if (showToggleAnimation) {\n const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n return (): void => clearTimeout(timer);\n }\n }, [showToggleAnimation]);\n\n useEffect(() => {\n setCheckedState(checked);\n }, [checked]);\n\n useEffect(() => {\n animate('#' + toggleId, { background: getBackgroundColor() }, { duration: 0.2, ease: 'easeInOut' });\n animate(\n '#' + toggleDotId,\n { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n { duration: 0.2, ease: 'easeInOut' }\n );\n animate('#' + toggleDotId, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n }, [checkedState, showHoveredStyling, isActive]);\n\n const getBackgroundColor = (): string => {\n if (checkedState && isActive) {\n return 'var(--core-color-blueberry-800)';\n } else if (checkedState) {\n return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n } else if (isOnWhite && isActive) {\n return 'var(--core-color-neutral-400)';\n } else if (isOnWhite) {\n return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n } else if (isActive) {\n return 'var(--core-color-neutral-200)';\n } else {\n return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n setCheckedState(event.target.checked);\n setShowToggleAnimation(true);\n onChange?.(event);\n };\n\n const toggleContainerClassNames = classNames(styles['toggle-container'], {\n [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n });\n\n const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n const statusTextClassNames = classNames(styles['toggle-container__status'], {\n [styles['toggle-container__status--checked']]: checkedState,\n });\n\n const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n });\n\n const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n });\n\n const renderToggle = (): React.ReactElement => (\n <div className={styles['toggle-container__outer-toggle']}>\n <label ref={refObject} className={classNames(styles['toggle-container__toggle-group'])}>\n <input\n id={inputId}\n type=\"checkbox\"\n checked={checkedState}\n onChange={handleChange}\n className={styles['toggle-container__input']}\n aria-label={label.map(l => l.text).join(' ')}\n aria-describedby={`${subLabel ? subLabelId + ' ' : undefined} ${statusText ? toggleId + '-status' : undefined}`}\n role=\"switch\"\n />\n <span id={toggleId} className={toggleClassNames} aria-hidden=\"true\">\n <span id={toggleDotId} className={toggleDotClassNames} aria-hidden=\"true\">\n <svg\n width=\"17\"\n height=\"13\"\n viewBox=\"0 0 17 13\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className={styles['toggle-container__toggle__dot__icon']}\n >\n <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\n </svg>\n </span>\n </span>\n </label>\n {statusText && (\n <span className={statusTextClassNames} id={toggleId + '-status'}>\n {checkedState ? statusText.checked : statusText.unchecked}\n </span>\n )}\n </div>\n );\n\n const renderLabelText = (): React.ReactElement => {\n return (\n <div className={styles['toggle-container__outer-label']}>\n <span id={labelId} className={classNames(styles['toggle-container__label'])}>\n {label.map(labelText => {\n const labelClassNames = classNames({\n [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n });\n\n return (\n <span key={labelId + labelText.text} className={labelClassNames}>\n {labelText.text}\n </span>\n );\n })}\n </span>\n {subLabel && (\n <div id={subLabelId} className={subLabelClassNames}>\n {subLabel}\n </div>\n )}\n </div>\n );\n };\n\n return (\n <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n {togglePosition === TogglePosition.left && (\n <>\n {renderToggle()}\n {renderLabelText()}\n </>\n )}\n {togglePosition === TogglePosition.right && (\n <>\n {renderLabelText()}\n {renderToggle()}\n </>\n )}\n </div>\n );\n};\n\nexport default Toggle;\n"],"names":["TogglePosition","ToggleOnColor"],"mappings":"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"}
package/components/Toggle/styles.module.scss CHANGED
@@ -1,16 +1,36 @@
1
1
  @use 'sass:map';
2
2
  @use '../../scss/spacers' as spacers;
3
- @use '../../scss/palette' as palette;
4
3
  @use '../../scss/font-settings' as font-settings;
5
4
  @use '../../scss/font-mixins' as fonts;
6
5
  @use '../../scss/breakpoints' as breakpoints;
7
6
  @import '../../scss/supernova/styles/colors.css';
8
7
 
9
8
  .toggle-container {
10
- display: flex;
11
- flex-direction: column;
9
+ $toggle-container: &;
10
+
11
+ display: grid;
12
+ grid-template: 'toggle label' auto / min-content auto;
13
+ column-gap: spacers.getSpacer(xs);
12
14
  max-width: 43.5rem;
13
15
 
16
+ &--position-right {
17
+ grid-template: 'label toggle' auto / auto min-content;
18
+ }
19
+
20
+ &--with-status {
21
+ --status-column-size: 5.5rem;
22
+
23
+ grid-template: 'toggle label' auto / var(--status-column-size) auto;
24
+
25
+ &.toggle-container--position-right {
26
+ grid-template: 'label toggle' auto / auto var(--status-column-size);
27
+ }
28
+
29
+ @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
30
+ --status-column-size: 6.25rem;
31
+ }
32
+ }
33
+
14
34
  &__row {
15
35
  display: flex;
16
36
  align-items: center;
@@ -21,61 +41,60 @@
21
41
  }
22
42
  }
23
43
 
44
+ &__outer-label {
45
+ grid-area: label;
46
+ margin-top: 0.5rem;
47
+ }
48
+
49
+ &__outer-toggle {
50
+ grid-area: toggle;
51
+ display: flex;
52
+ flex-direction: column;
53
+ align-items: center;
54
+ gap: 0.375rem;
55
+ }
56
+
24
57
  &__label {
25
58
  @include fonts.label;
26
59
 
27
60
  color: var(--core-color-neutral-900);
28
- margin-left: spacers.getSpacer(xs);
29
-
30
- @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
31
- margin-left: spacers.getSpacer(s);
32
- }
33
61
 
34
62
  &__text--subdued {
35
63
  @include fonts.label-subdued;
36
64
  }
37
-
38
- &--toggle-right {
39
- margin-left: 0;
40
- margin-right: spacers.getSpacer(xs);
41
-
42
- @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
43
- margin-right: spacers.getSpacer(s);
44
- }
45
- }
46
65
  }
47
66
 
48
67
  &__sublabel {
49
- --sublabel-mobile-margin: 3.9rem;
50
- --sublabel-desktop-margin: 4.1rem;
51
-
68
+ grid-area: sublabel;
52
69
  font-size: font-settings.$font-size-xs;
53
70
  line-height: 1.25rem;
54
71
  color: var(--core-color-neutral-800);
55
- margin-left: var(--sublabel-mobile-margin);
56
72
  text-align: left;
57
73
 
58
74
  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
59
75
  font-size: font-settings.$font-size-sm;
60
76
  line-height: font-settings.$lineheight-size-xs;
61
77
  text-align: left;
62
- margin-left: var(--sublabel-desktop-margin);
63
78
  }
79
+ }
64
80
 
65
- &--toggle-right {
66
- margin-left: 0;
67
- margin-right: var(--sublabel-mobile-margin);
81
+ &__status {
82
+ @include fonts.sublabel;
68
83
 
69
- @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
70
- margin-right: var(--sublabel-desktop-margin);
71
- }
84
+ word-break: break-all;
85
+
86
+ &--checked {
87
+ color: var(--color-action-text-onlight);
72
88
  }
73
89
  }
74
90
 
75
91
  &__toggle-group {
92
+ grid-area: input;
93
+ place-self: center;
76
94
  display: flex;
77
95
  align-items: center;
78
96
  cursor: pointer;
97
+ min-height: 2.75rem;
79
98
  }
80
99
 
81
100
  &__toggle {
package/components/Toggle/styles.module.scss.d.ts CHANGED
@@ -3,11 +3,13 @@ export type Styles = {
3
3
  'toggle-container__input': string;
4
4
  'toggle-container__label': string;
5
5
  'toggle-container__label__text--subdued': string;
6
- 'toggle-container__label--toggle-right': string;
6
+ 'toggle-container__outer-label': string;
7
+ 'toggle-container__outer-toggle': string;
7
8
  'toggle-container__row': string;
8
9
  'toggle-container__row--right': string;
10
+ 'toggle-container__status': string;
11
+ 'toggle-container__status--checked': string;
9
12
  'toggle-container__sublabel': string;
10
- 'toggle-container__sublabel--toggle-right': string;
11
13
  'toggle-container__toggle': string;
12
14
  'toggle-container__toggle__dot': string;
13
15
  'toggle-container__toggle__dot__icon': string;
@@ -15,6 +17,8 @@ export type Styles = {
15
17
  'toggle-container__toggle--ignore-hover': string;
16
18
  'toggle-container__toggle--on-white': string;
17
19
  'toggle-container__toggle-group': string;
20
+ 'toggle-container--position-right': string;
21
+ 'toggle-container--with-status': string;
18
22
  };
19
23
 
20
24
  export type ClassNames = keyof Styles;
package/constants.d.ts CHANGED
@@ -69,6 +69,7 @@ export declare enum AnalyticsId {
69
69
  ExpanderList = "expander-list",
70
70
  ExpanderListExpander = "expander-list-expander",
71
71
  EyebrowHeader = "eyebrow-header",
72
+ FavoriteButton = "favorite-button",
72
73
  FormGroup = "form-group",
73
74
  FormLayout = "form-layout",
74
75
  HelpBubble = "help-bubble",
package/constants.js CHANGED
@@ -47,6 +47,7 @@ var AnalyticsId = /* @__PURE__ */ ((AnalyticsId2) => {
47
47
  AnalyticsId2["ExpanderList"] = "expander-list";
48
48
  AnalyticsId2["ExpanderListExpander"] = "expander-list-expander";
49
49
  AnalyticsId2["EyebrowHeader"] = "eyebrow-header";
50
+ AnalyticsId2["FavoriteButton"] = "favorite-button";
50
51
  AnalyticsId2["FormGroup"] = "form-group";
51
52
  AnalyticsId2["FormLayout"] = "form-layout";
52
53
  AnalyticsId2["HelpBubble"] = "help-bubble";
package/constants.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n XXSmall = 24,\n XSmall = 38,\n Small = 48,\n Medium = 64,\n Large = 80,\n XLarge = 130,\n}\n\nexport enum ZIndex {\n OverlayScreen = 1300000,\n PopOver = 11000,\n LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n autoFocus?: boolean;\n disabled?: boolean;\n form?: string;\n formAction?: string;\n formEncType?: string;\n formMethod?: string;\n formNoValidate?: boolean;\n formTarget?: string;\n name?: string;\n type?: 'submit' | 'reset' | 'button' | string;\n value?: string | string[] | number;\n id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n download?: string;\n href?: string;\n hrefLang?: string;\n media?: string;\n ping?: string;\n rel?: AnchorTarget;\n target?: string;\n referrerPolicy?:\n | ''\n | 'same-origin'\n | 'no-referrer'\n | 'no-referrer-when-downgrade'\n | 'origin'\n | 'origin-when-cross-origin'\n | 'strict-origin'\n | 'strict-origin-when-cross-origin'\n | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n onwhite = 'onwhite',\n ongrey = 'ongrey',\n onblueberry = 'onblueberry',\n ondark = 'ondark',\n oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n medium = 'medium',\n large = 'large',\n}\n\nexport enum AnalyticsId {\n AnchorLink = 'anchor-link',\n ArticleTeaser = 'article-teaser',\n Avatar = 'avatar',\n Badge = 'badge',\n Button = 'button',\n Checkbox = 'checkbox',\n Chip = 'chip',\n Close = 'close',\n DictionaryTrigger = 'dictionary-trigger',\n Drawer = 'Drawer',\n Dropdown = 'dropdown',\n Duolist = 'duolist',\n EmptyState = 'empty-state',\n Expander = 'expander',\n ExpanderHierarchy = 'expander-hierarchy',\n ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n ExpanderList = 'expander-list',\n ExpanderListExpander = 'expander-list-expander',\n EyebrowHeader = 'eyebrow-header',\n FormGroup = 'form-group',\n FormLayout = 'form-layout',\n HelpBubble = 'help-bubble',\n HelpDrawer = 'help-drawer',\n HelpExpanderInline = 'help-expander-inline',\n HelpExpanderStandalone = 'help-expander-standalone',\n HelpTooltip = 'help-tooltip',\n HelpTriggerIcon = 'help-trigger-icon',\n HelpTriggerInline = 'help-trigger-inline',\n HelpTriggerStandalone = 'help-trigger-standalone',\n HighlightPanel = 'highlight-panel',\n Icon = 'icon',\n Illustration = 'Illustration',\n InfoTeaser = 'info-teaser',\n Input = 'input',\n Label = 'label',\n Link = 'link',\n LinkList = 'link-list',\n List = 'list',\n Loader = 'loader',\n Logo = 'logo',\n Modal = 'modal',\n NotificationPanel = 'notification-panel',\n PanelOld = 'panel',\n PanelList = 'panel-list',\n PopMenu = 'pop-menu',\n PopOver = 'pop-over',\n Portal = 'portal',\n PromoPanel = 'promo-panel',\n RadioButton = 'radio-button',\n Select = 'select',\n SharingStatus = 'sharing-status',\n Slider = 'slider',\n Spacer = 'spacer',\n StatusDot = 'status-dot',\n Step = 'step',\n StepButtons = 'step-buttons',\n Stepper = 'stepper',\n Sublabel = 'sublabel',\n Table = 'table',\n Tag = 'tag',\n TagList = 'tag-list',\n Textarea = 'textarea',\n Tile = 'tile',\n Title = 'title',\n Toggle = 'toggle',\n Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n Enter = 'Enter',\n Escape = 'Escape',\n ArrowDown = 'ArrowDown',\n ArrowUp = 'ArrowUp',\n ArrowRight = 'ArrowRight',\n ArrowLeft = 'ArrowLeft',\n Home = 'Home',\n End = 'End',\n Space = ' ',\n Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n NORWEGIAN = 'nb-NO',\n NORWEGIAN_NYNORSK = 'nn-NO',\n ENGLISH = 'en-GB',\n SAMI_NORTHERN = 'se-NO',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey","LanguageLocales"],"mappings":"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"}
1
+ {"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n XXSmall = 24,\n XSmall = 38,\n Small = 48,\n Medium = 64,\n Large = 80,\n XLarge = 130,\n}\n\nexport enum ZIndex {\n OverlayScreen = 1300000,\n PopOver = 11000,\n LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n autoFocus?: boolean;\n disabled?: boolean;\n form?: string;\n formAction?: string;\n formEncType?: string;\n formMethod?: string;\n formNoValidate?: boolean;\n formTarget?: string;\n name?: string;\n type?: 'submit' | 'reset' | 'button' | string;\n value?: string | string[] | number;\n id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n download?: string;\n href?: string;\n hrefLang?: string;\n media?: string;\n ping?: string;\n rel?: AnchorTarget;\n target?: string;\n referrerPolicy?:\n | ''\n | 'same-origin'\n | 'no-referrer'\n | 'no-referrer-when-downgrade'\n | 'origin'\n | 'origin-when-cross-origin'\n | 'strict-origin'\n | 'strict-origin-when-cross-origin'\n | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n onwhite = 'onwhite',\n ongrey = 'ongrey',\n onblueberry = 'onblueberry',\n ondark = 'ondark',\n oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n medium = 'medium',\n large = 'large',\n}\n\nexport enum AnalyticsId {\n AnchorLink = 'anchor-link',\n ArticleTeaser = 'article-teaser',\n Avatar = 'avatar',\n Badge = 'badge',\n Button = 'button',\n Checkbox = 'checkbox',\n Chip = 'chip',\n Close = 'close',\n DictionaryTrigger = 'dictionary-trigger',\n Drawer = 'Drawer',\n Dropdown = 'dropdown',\n Duolist = 'duolist',\n EmptyState = 'empty-state',\n Expander = 'expander',\n ExpanderHierarchy = 'expander-hierarchy',\n ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n ExpanderList = 'expander-list',\n ExpanderListExpander = 'expander-list-expander',\n EyebrowHeader = 'eyebrow-header',\n FavoriteButton = 'favorite-button',\n FormGroup = 'form-group',\n FormLayout = 'form-layout',\n HelpBubble = 'help-bubble',\n HelpDrawer = 'help-drawer',\n HelpExpanderInline = 'help-expander-inline',\n HelpExpanderStandalone = 'help-expander-standalone',\n HelpTooltip = 'help-tooltip',\n HelpTriggerIcon = 'help-trigger-icon',\n HelpTriggerInline = 'help-trigger-inline',\n HelpTriggerStandalone = 'help-trigger-standalone',\n HighlightPanel = 'highlight-panel',\n Icon = 'icon',\n Illustration = 'Illustration',\n InfoTeaser = 'info-teaser',\n Input = 'input',\n Label = 'label',\n Link = 'link',\n LinkList = 'link-list',\n List = 'list',\n Loader = 'loader',\n Logo = 'logo',\n Modal = 'modal',\n NotificationPanel = 'notification-panel',\n PanelOld = 'panel',\n PanelList = 'panel-list',\n PopMenu = 'pop-menu',\n PopOver = 'pop-over',\n Portal = 'portal',\n PromoPanel = 'promo-panel',\n RadioButton = 'radio-button',\n Select = 'select',\n SharingStatus = 'sharing-status',\n Slider = 'slider',\n Spacer = 'spacer',\n StatusDot = 'status-dot',\n Step = 'step',\n StepButtons = 'step-buttons',\n Stepper = 'stepper',\n Sublabel = 'sublabel',\n Table = 'table',\n Tag = 'tag',\n TagList = 'tag-list',\n Textarea = 'textarea',\n Tile = 'tile',\n Title = 'title',\n Toggle = 'toggle',\n Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n Enter = 'Enter',\n Escape = 'Escape',\n ArrowDown = 'ArrowDown',\n ArrowUp = 'ArrowUp',\n ArrowRight = 'ArrowRight',\n ArrowLeft = 'ArrowLeft',\n Home = 'Home',\n End = 'End',\n Space = ' ',\n Tab = 'Tab',\n}\n\nexport enum LanguageLocales {\n NORWEGIAN = 'nb-NO',\n NORWEGIAN_NYNORSK = 'nn-NO',\n ENGLISH = 'en-GB',\n SAMI_NORTHERN = 'se-NO',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey","LanguageLocales"],"mappings":"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"}
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "git+https://github.com/helsenorge/designsystem.git"
8
8
  },
9
9
  "homepage": "https://helsenorge.design",
10
- "version": "12.2.0",
10
+ "version": "12.4.0",
11
11
  "author": "Helsenorge",
12
12
  "license": "MIT",
13
13
  "dependencies": {
package/resources/HN.Designsystem.FavoriteButton.nb-NO.json.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ declare const _default: {
2
+ "ariaLabel": "Favorittmarkering"
3
+ }
4
+ ;
5
+
6
+ export default _default;