Point mapper
This is the default point mapper dropdown.
This item is designed to allow users to toggle on entire themes using the checkbox or toggle on individual categories within that theme by clicking on them. The checkbox to toggle the entire theme is hidden by default and should be shown when the feature is supported and preferable for the profile admin.
A combo class of "is--toggle-all" needs to be added to the "point-mapper__h1_trigger" to make sure that "point-data__h1_name" does not overlap the toggle.
Facets can be added to both the overall theme or the subcategories below it. Just add the ".is--shown" combo class to the facet item you would like to show.
Tooltips
This tooltip is for use when categories within a theme are within the same vicinity and a user needs to be able to see and interrogate overlapping pins. The colour for each point (.tooltip__cluster-icon) is taken from the category, the initials (.tooltip__cluster-icon_letters) for each pin are taken from the first letter OR two letters of the categories title. eg. Pharmacies (P), Old age homes (OA). IF an icon is required, the .svg-icon is--cluster-icon element is an svg icon that can be changed to represent the category icon - this is hidden by default. The facet (.tootlip__cluster-facet) count is for the number of items in the category within that cluster.
Use the .is--shown or .is--hidden classes are used to hide and show the icon and letters elements that are or are not required. ONLY ONE should be visible at any time.
Utility
Add the .highlight component to any item that has "position: relative" to highlight it in the UI. If you would like to add a notification message, remove the .hidden class from .highlight__notification item inside of .highlight and adjust .highlight message to change the message displayed (default is "Loading...").
Combo classes can be added to adjust the alignment of the notification. Those are as follows: .highlight-notification is--align-left OR is--align-right. AND .highlight-chip is--align-left OR is--align-right.
Rich data panel
This indicator applies to Loading... in the Loading... geographic demarcation. The map currently shows the Loading... geographic demarcation.
The backend does not have to duplicate this component from the styles panel, they can create it by just adding styles to a paragraph.
This is a paragraph with the .profile-indicator__version class. You can adjust this text as you see fit and apply the span .chart-link to apply the block styling for the various items in the description. The example above has .chart-link is--location; .chart-link is--current and chart-link is--version.
By default these .chart-version elements have hover states. If a link style is not required, you can add the class .no-link to remove this hover styling.
Modals
This item is in-place and can be show when needed. The backend can adjust .modal-title, .modal__content and the content within the buttons to adjust the use case for the modal. This item was created to house content for the "Update map to version required to view this data" feature.