@undrr/undrr-mangrove 2.0.0 → 2.0.1
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.
- package/README.md +9 -5
- package/components/BookCard.js +2 -2
- package/components/Breadcrumbs.js +2 -2
- package/components/Checkbox.js +2 -2
- package/components/Chips.js +2 -2
- package/components/CopyButton.js +2 -2
- package/components/CtaButton.js +2 -2
- package/components/Drawer.js +3 -3
- package/components/Drawer.js.LICENSE.txt +3 -1
- package/components/EmbedContainer.js +2 -2
- package/components/Footer.js +2 -2
- package/components/FormAction.js +2 -2
- package/components/FormErrorSummary.js +2 -2
- package/components/FormGroup.js +2 -2
- package/components/FullWidth.js +2 -2
- package/components/Gallery.js +2 -2
- package/components/Hero.js +2 -2
- package/components/HighlightBox.js +2 -2
- package/components/HorizontalBookCard.js +3 -3
- package/components/HorizontalBookCard.js.LICENSE.txt +3 -1
- package/components/HorizontalCard.js +3 -3
- package/components/HorizontalCard.js.LICENSE.txt +3 -1
- package/components/IconCard.js +3 -3
- package/components/IconCard.js.LICENSE.txt +3 -1
- package/components/Legend.js +2 -2
- package/components/Loader.js +3 -3
- package/components/MegaMenu.js +2 -2
- package/components/Notice.js +2 -2
- package/components/PageHeader.js +2 -2
- package/components/Pager.js +2 -2
- package/components/ProgressBar.js +9 -0
- package/components/ProgressBar.js.LICENSE.txt +9 -0
- package/components/QuoteHighlight.js +3 -3
- package/components/QuoteHighlight.js.LICENSE.txt +3 -1
- package/components/Radio.js +2 -2
- package/components/Range.js +2 -2
- package/components/ScrollContainer.js +2 -2
- package/components/SegmentedControl.js +2 -2
- package/components/Select.js +2 -2
- package/components/ServiceNotice.js +2 -2
- package/components/ShareButtons.js +3 -3
- package/components/ShowMore.js +2 -2
- package/components/SkipLink.js +2 -2
- package/components/StatsCard.js +3 -3
- package/components/StatsCard.js.LICENSE.txt +3 -1
- package/components/SyndicationSearchWidget.js +3 -3
- package/components/Tab.js +2 -2
- package/components/TextCta.js +3 -3
- package/components/TextCta.js.LICENSE.txt +3 -1
- package/components/TextInput.js +2 -2
- package/components/Textarea.js +2 -2
- package/components/Tree.js +2 -2
- package/components/UserFeedback.js +2 -2
- package/components/VerticalCard.js +3 -3
- package/components/VerticalCard.js.LICENSE.txt +3 -1
- package/components/hydrate.js +2 -2
- package/css/style-all.css +110 -90
- package/css/style-all.css.map +1 -1
- package/css/style-delta.css +110 -90
- package/css/style-delta.css.map +1 -1
- package/css/style-gutenberg.css +9 -9
- package/css/style-irp.css +110 -90
- package/css/style-irp.css.map +1 -1
- package/css/style-mcr.css +110 -90
- package/css/style-mcr.css.map +1 -1
- package/css/style-preventionweb.css +110 -90
- package/css/style-preventionweb.css.map +1 -1
- package/css/style.css +110 -90
- package/css/style.css.map +1 -1
- package/docs/EDITORIAL-MANUAL.md +193 -0
- package/docs/llms-editorial-manual.txt +200 -0
- package/docs/llms-page-building.txt +1140 -0
- package/docs/llms-search-widget.txt +765 -0
- package/error-pages/401.html +1 -1
- package/error-pages/403.html +1 -1
- package/error-pages/404.html +1 -1
- package/error-pages/429.html +1 -1
- package/error-pages/500.html +1 -1
- package/error-pages/502.html +1 -1
- package/error-pages/503.html +1 -1
- package/error-pages/504.html +1 -1
- package/error-pages/5xx.html +1 -1
- package/error-pages/challenge.html +1 -1
- package/error-pages/managed-challenge.html +1 -1
- package/js/cite-this.js +352 -0
- package/package.json +6 -1
- package/scss/Atom/BaseTypography/Abbr/abbr.scss +1 -1
- package/scss/Atom/BaseTypography/Blockquote/blockquote.scss +1 -1
- package/scss/Atom/BaseTypography/Cite/cite.scss +1 -1
- package/scss/Atom/BaseTypography/Code/code.scss +1 -1
- package/scss/Atom/BaseTypography/Mark/mark.scss +1 -1
- package/scss/Atom/BaseTypography/Quotation/quotation.scss +1 -1
- package/scss/Atom/BaseTypography/Small/small.scss +1 -1
- package/scss/Atom/Colors/color.scss +1 -1
- package/scss/Atom/EmptyState/empty-state.scss +1 -1
- package/scss/Atom/Icons/_icon-definitions.scss +35 -3
- package/scss/Atom/Icons/icons.scss +1 -1
- package/scss/Atom/Images/AuthorImage/author-image.scss +1 -1
- package/scss/Atom/Images/Image/image.scss +1 -1
- package/scss/Atom/Images/ImageCaptionCredit/image-caption-credit.scss +7 -2
- package/scss/Atom/Images/ImageCredit/image-credit.scss +1 -1
- package/scss/Atom/Layout/Container/container.scss +1 -1
- package/scss/Atom/Layout/Grid/grid.scss +1 -1
- package/scss/Atom/Layout/Spacing/spacing.scss +1 -1
- package/scss/Atom/Logo/logo.scss +1 -1
- package/scss/Atom/Navigation/Breadcrumb/breadcrumb.scss +1 -1
- package/scss/Atom/Navigation/MenuItems/menu-items.scss +1 -1
- package/scss/Atom/ReachElement/Details/details.scss +1 -1
- package/scss/Atom/ReachElement/Figcaption/figcaption.scss +1 -1
- package/scss/Atom/StatusLabel/status-label.scss +1 -1
- package/scss/Atom/Table/table.scss +1 -1
- package/scss/Atom/Tag/tag.scss +1 -1
- package/scss/Atom/Video/video.scss +1 -1
- package/scss/Components/Boilerplate/boilerplate.scss +1 -1
- package/scss/Components/Breadcrumbs/breadcrumbs.scss +1 -1
- package/scss/Components/Buttons/Chips/chips.scss +1 -1
- package/scss/Components/Buttons/CopyButton/copy-button.scss +1 -1
- package/scss/Components/Buttons/CtaButton/buttons.scss +1 -1
- package/scss/Components/Buttons/CtaButton/cta-button.scss +1 -1
- package/scss/Components/Buttons/ShareButtons/share-buttons.scss +90 -1
- package/scss/Components/Cards/Card/card.scss +1 -1
- package/scss/Components/Cards/StatsCard/stats-card.scss +1 -1
- package/scss/Components/CiteThis/cite-this.scss +186 -0
- package/scss/Components/CookieConsentBanner/cookie-consent-banner.scss +1 -1
- package/scss/Components/DataViz/Legend/legend.scss +1 -1
- package/scss/Components/ErrorPages/error-pages.scss +1 -1
- package/scss/Components/Footer/footer.scss +1 -1
- package/scss/Components/Forms/Checkbox/checkbox.scss +1 -1
- package/scss/Components/Forms/FormAction/form-action.scss +1 -1
- package/scss/Components/Forms/FormGroup/form-group.scss +1 -1
- package/scss/Components/Forms/InputFields/input-fields.scss +1 -1
- package/scss/Components/Forms/Radio/radio.scss +1 -1
- package/scss/Components/Forms/Range/range.scss +1 -1
- package/scss/Components/Forms/SegmentedControl/segmented-control.scss +1 -1
- package/scss/Components/Forms/Select/select.scss +1 -1
- package/scss/Components/Forms/TextInput/text-input.scss +1 -1
- package/scss/Components/Forms/Textarea/textarea.scss +1 -1
- package/scss/Components/Forms/_form-base.scss +1 -1
- package/scss/Components/Gallery/gallery.scss +1 -1
- package/scss/Components/Hero/hero.scss +1 -1
- package/scss/Components/HighlightBox/highlight-box.scss +1 -1
- package/scss/Components/MegaMenu/mega-menu.scss +1 -1
- package/scss/Components/MegaMenu/megamenu.scss +1 -1
- package/scss/Components/Navigation/Drawer/drawer.scss +1 -1
- package/scss/Components/Navigation/Tree/tree.scss +1 -1
- package/scss/Components/Notice/notice.scss +1 -1
- package/scss/Components/OnThisPageNav/on-this-page-nav.scss +1 -1
- package/scss/Components/PageHeader/page-header.scss +1 -1
- package/scss/Components/Pager/pager.scss +1 -1
- package/scss/Components/PreviewAccess/preview-access.scss +1 -1
- package/scss/Components/ProgressBar/progress-bar.scss +215 -0
- package/scss/Components/QuoteHighlight/quote-highlight.scss +1 -1
- package/scss/Components/ScrollContainer/scroll-container.scss +1 -1
- package/scss/Components/Snackbar/snackbar.scss +1 -1
- package/scss/Components/SyndicationSearchWidget/_deprecated-teaser-hide.scss +1 -1
- package/scss/Components/SyndicationSearchWidget/syndication-search-widget.scss +1 -1
- package/scss/Components/Tab/tab.scss +1 -1
- package/scss/Components/TableOfContents/table-of-contents.scss +1 -1
- package/scss/Components/TextCta/text-cta.scss +1 -1
- package/scss/Components/TextCta/textcta.scss +1 -1
- package/scss/Components/UserFeedback/user-feedback.scss +1 -1
- package/scss/Molecules/ImageCaption/image-caption.scss +17 -3
- package/scss/Molecules/SectionHeader/section-header.scss +1 -1
- package/scss/Molecules/SectionHeader/sectionheader.scss +1 -1
- package/scss/Patterns/HubHeader/hub-header.scss +1 -1
- package/scss/Patterns/_shared/pattern-demo.scss +1 -1
- package/scss/Utilities/EmbedContainer/embed-container.scss +1 -1
- package/scss/Utilities/FullWidth/full-width.scss +1 -1
- package/scss/Utilities/Loader/loader.scss +55 -12
- package/scss/Utilities/Normalize/normalize.scss +1 -1
- package/scss/Utilities/PagePatterns/page-patterns.scss +1 -1
- package/scss/Utilities/ShowMore/show-more.scss +1 -1
- package/scss/Utilities/SkipLink/skip-link.scss +1 -1
- package/scss/assets/scss/_components.scss +2 -0
- package/scss/assets/scss/_variables.scss +2 -2
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Base styles, icon sizing, font-family setup, and alignment classes for Mangrove icons.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Icons/Icons.mdx
|
|
8
8
|
*/
|
|
9
9
|
// Mangrove Icon System
|
|
10
10
|
// Icons render via CSS mask-image backed by SVG data URIs (Lucide, OCHA, custom sources).
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Circular avatar and author profile photo styling with standardized sizing and object-fit.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/AuthorImage/AuthorImages.mdx
|
|
8
8
|
*/
|
|
9
9
|
/* author image */
|
|
10
10
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Fluid responsive image wrapper and image sizing utilities.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
|
|
8
8
|
*/
|
|
9
9
|
/* img start */
|
|
10
10
|
img,
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Figure, figcaption, caption text, and photo credit metadata presentation styles.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
|
|
8
8
|
*/
|
|
9
9
|
// @import '../../../assets/scss/base';
|
|
10
10
|
|
|
@@ -49,7 +49,8 @@
|
|
|
49
49
|
padding-bottom: 0;
|
|
50
50
|
width: 25%;
|
|
51
51
|
|
|
52
|
-
p
|
|
52
|
+
p,
|
|
53
|
+
:where(.mg-image-caption__text) {
|
|
53
54
|
font-size: var(--mg-font-size-200);
|
|
54
55
|
line-height: 1.4;
|
|
55
56
|
margin-bottom: var(--mg-spacing-50);
|
|
@@ -61,6 +62,10 @@
|
|
|
61
62
|
padding: var(--mg-spacing-50) 0 0 0;
|
|
62
63
|
}
|
|
63
64
|
}
|
|
65
|
+
|
|
66
|
+
.mg-image-caption__text p:last-child {
|
|
67
|
+
margin-bottom: 0;
|
|
68
|
+
}
|
|
64
69
|
}
|
|
65
70
|
}
|
|
66
71
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Subtle attribution and copyright credit line styling for imagery.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Images/ImageCaptionCredit/ImageCaptionCredit.mdx
|
|
8
8
|
*/
|
|
9
9
|
.mg-credits {
|
|
10
10
|
font-size: var(--mg-font-size-200);
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Responsive layout containers with breakpoint-driven max widths (480/900/1164/1440px) and gutter padding.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Layout/Container/Container.mdx
|
|
8
8
|
*/
|
|
9
9
|
// Define your breakpoints if not already defined
|
|
10
10
|
// $mg-breakpoint-mobile: 480px;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Flexible grid system and columnar layout utilities for structured multi-column content.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Layout/Grid/Grid.mdx
|
|
8
8
|
*/
|
|
9
9
|
/* Our custom css grid based on https://stable.visual-framework.dev/components/vf-grid/ */
|
|
10
10
|
g-grid {
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* Margin and padding spacing utility classes mapped to design system spacing tokens.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Layout/Spacing/Spacing.mdx
|
|
8
8
|
*/
|
|
9
9
|
// empty
|
package/scss/Atom/Logo/logo.scss
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* UNDRR and partner logo presentation styles, scaling, and bilingual language variants.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Logo/Logo.mdx
|
|
8
8
|
*/
|
|
9
9
|
.mg-logo {
|
|
10
10
|
display: block;
|
|
@@ -4,6 +4,6 @@
|
|
|
4
4
|
* Foundational breadcrumb list and separator styling (superseded by Components/Breadcrumbs).
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Breadcrumbs/Breadcrumbs.mdx
|
|
8
8
|
*/
|
|
9
9
|
// Retried
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Accessible menu list, navigation item links, and hover/focus interaction states.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Typography/Links/Links.mdx
|
|
8
8
|
*/
|
|
9
9
|
// * menu item row start *//
|
|
10
10
|
.menu li {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Native HTML <details> and <summary> disclosure styling with custom toggle indicators.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
|
|
8
8
|
*/
|
|
9
9
|
/* details tag start */
|
|
10
10
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Typographic styles for HTML <figcaption> elements accompanying figures and media.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/BaseTypography/BaseTypography.mdx
|
|
8
8
|
*/
|
|
9
9
|
/* figure tag start */
|
|
10
10
|
figure {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Compact status indicators and colored badge pills for states (draft, active, archived, etc.).
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/StatusLabel/StatusLabel.mdx
|
|
8
8
|
*/
|
|
9
9
|
// Status label — a workflow status shown as a coloured indicator plus its name.
|
|
10
10
|
// -
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Accessible tabular data styling with striped, bordered, and responsive scrolling variants.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Table/Table.mdx
|
|
8
8
|
*/
|
|
9
9
|
/* table tag start */
|
|
10
10
|
.mg-table {
|
package/scss/Atom/Tag/tag.scss
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Metadata taxonomy tags, clickable topic chips, and keyword labels with active and hover states.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Atom/Tag/Tag.mdx
|
|
8
8
|
*/
|
|
9
9
|
// Compact taxonomy labels. Keep legacy theme overrides and container markup.
|
|
10
10
|
// :where() gives auto-styled children the same specificity as .mg-tag, so
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Responsive HTML5 video element wrapper and aspect ratio scaling.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Utilities/EmbedContainer/EmbedContainer.mdx
|
|
8
8
|
*/
|
|
9
9
|
/* video start */
|
|
10
10
|
video {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Starter scaffold and template styles for authoring new Mangrove components.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Boilerplate/Boilerplate.mdx
|
|
8
8
|
*/
|
|
9
9
|
// Boilerplate component styles
|
|
10
10
|
// We use the 'mg-' prefix for our CSS classes to namespace them
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Accessible hierarchical breadcrumb navigation with chevron separators and current-page semantics.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Breadcrumbs/Breadcrumbs.mdx
|
|
8
8
|
*/
|
|
9
9
|
.mg-breadcrumb {
|
|
10
10
|
font-family: var(--mg-font-family-ui);
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Interactive filter and selection chip buttons with selected/unselected states.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/Chips/Chips.mdx
|
|
8
8
|
*/
|
|
9
9
|
.mg-chip {
|
|
10
10
|
align-items: center;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* One-click copy button with a transient feedback tooltip and aria-live announcements.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/CopyButton/CopyButton.mdx
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
.mg-copy-button {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Legacy stylesheet forwarding to cta-button.scss.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/CtaButton/CtaButton.mdx
|
|
8
8
|
*/
|
|
9
9
|
// buttons.scss — DEPRECATED, use cta-button.scss
|
|
10
10
|
@import "./cta-button";
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Primary, secondary, and tertiary call-to-action button styles with size variants and motion effects.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/CtaButton/CtaButton.mdx
|
|
8
8
|
*/
|
|
9
9
|
// .mg-buttons {
|
|
10
10
|
// margin-bottom: 1em;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Social sharing action bar with platform icons (X/Twitter, LinkedIn, Facebook, Email, Copy Link).
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Buttons/ShareButtons/ShareButtons.mdx
|
|
8
8
|
*/
|
|
9
9
|
.mg-share {
|
|
10
10
|
max-inline-size: mg-rem(400);
|
|
@@ -106,3 +106,92 @@
|
|
|
106
106
|
line-height: 1.5;
|
|
107
107
|
overflow-wrap: anywhere;
|
|
108
108
|
}
|
|
109
|
+
|
|
110
|
+
.mg-share__dialog {
|
|
111
|
+
box-sizing: border-box;
|
|
112
|
+
inline-size: min(calc(100% - 2 * var(--mg-spacing-200)), mg-rem(500));
|
|
113
|
+
max-block-size: calc(100vh - 2 * var(--mg-spacing-200));
|
|
114
|
+
padding: var(--mg-spacing-300);
|
|
115
|
+
border: 0;
|
|
116
|
+
border-block-start: mg-rem(4) solid rgb(var(--mg-color-interactive));
|
|
117
|
+
border-radius: 0;
|
|
118
|
+
background: rgb(var(--mg-color-white));
|
|
119
|
+
color: rgb(var(--mg-color-text));
|
|
120
|
+
box-shadow: 0 mg-rem(8) mg-rem(32) rgb(var(--mg-color-neutral-900) / 0.25);
|
|
121
|
+
overflow: auto;
|
|
122
|
+
|
|
123
|
+
&::backdrop {
|
|
124
|
+
background: var(--mg-color-modal-scrim);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.mg-share__dialog-header {
|
|
129
|
+
display: flex;
|
|
130
|
+
align-items: flex-start;
|
|
131
|
+
justify-content: space-between;
|
|
132
|
+
gap: var(--mg-spacing-150);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.mg-share__dialog-title {
|
|
136
|
+
margin: 0;
|
|
137
|
+
font-family: var(--mg-font-family-ui);
|
|
138
|
+
font-size: var(--mg-font-size-500);
|
|
139
|
+
line-height: 1.2;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.mg-share__dialog-close {
|
|
143
|
+
flex: none;
|
|
144
|
+
inline-size: mg-rem(40);
|
|
145
|
+
block-size: mg-rem(40);
|
|
146
|
+
min-inline-size: mg-rem(40);
|
|
147
|
+
min-block-size: mg-rem(40);
|
|
148
|
+
margin-inline-start: auto;
|
|
149
|
+
color: rgb(var(--mg-color-text));
|
|
150
|
+
|
|
151
|
+
&:hover {
|
|
152
|
+
background: rgb(var(--mg-color-neutral-50));
|
|
153
|
+
color: rgb(var(--mg-color-text));
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.mg-share__dialog-description {
|
|
158
|
+
margin-block: var(--mg-spacing-150);
|
|
159
|
+
font-family: var(--mg-font-family-text);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.mg-share__dialog-content {
|
|
163
|
+
min-inline-size: 0;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.mg-share__dialog-image {
|
|
167
|
+
display: block;
|
|
168
|
+
max-inline-size: 100%;
|
|
169
|
+
max-block-size: mg-rem(220);
|
|
170
|
+
block-size: auto;
|
|
171
|
+
margin-inline: auto;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.mg-share__dialog-url {
|
|
175
|
+
overflow-wrap: anywhere;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.mg-share__dialog-actions,
|
|
179
|
+
.mg-share__dialog-actions-primary {
|
|
180
|
+
display: flex;
|
|
181
|
+
flex-wrap: wrap;
|
|
182
|
+
gap: var(--mg-spacing-100);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.mg-share__dialog-actions {
|
|
186
|
+
justify-content: space-between;
|
|
187
|
+
margin-block-start: var(--mg-spacing-200);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.mg-share__visually-hidden {
|
|
191
|
+
position: absolute;
|
|
192
|
+
inline-size: 1px;
|
|
193
|
+
block-size: 1px;
|
|
194
|
+
overflow: hidden;
|
|
195
|
+
clip-path: inset(50%);
|
|
196
|
+
white-space: nowrap;
|
|
197
|
+
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Card layouts including VerticalCard, HorizontalCard, BookCard, and HorizontalBookCard with responsive media.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Cards/Card/VerticalCard.mdx
|
|
8
8
|
*/
|
|
9
9
|
/* content-card start */
|
|
10
10
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Key metric and statistical callout card with large numeral display and descriptive labels.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Cards/StatsCard/StatsCard.mdx
|
|
8
8
|
*/
|
|
9
9
|
/* Stats Card Component */
|
|
10
10
|
.mg-stats-card {
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cite this (CiteThis)
|
|
3
|
+
*
|
|
4
|
+
* Citation button and dialog with a readable disclosure fallback.
|
|
5
|
+
*
|
|
6
|
+
* Full documentation:
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/CiteThis/CiteThis.mdx
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
.mg-cite-this {
|
|
11
|
+
max-inline-size: 48rem;
|
|
12
|
+
color: rgb(var(--mg-color-neutral-800));
|
|
13
|
+
font-family: var(--mg-font-family-text);
|
|
14
|
+
|
|
15
|
+
&__fallback {
|
|
16
|
+
background: rgb(var(--mg-color-neutral-50));
|
|
17
|
+
border-inline-start: var(--mg-spacing-50) solid
|
|
18
|
+
rgb(var(--mg-color-interactive));
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&__trigger {
|
|
22
|
+
min-block-size: 44px;
|
|
23
|
+
padding: var(--mg-spacing-100) var(--mg-spacing-200);
|
|
24
|
+
background: rgb(var(--mg-color-interactive));
|
|
25
|
+
border: 0;
|
|
26
|
+
border-radius: var(--mg-radius-button);
|
|
27
|
+
color: rgb(var(--mg-color-white));
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
font-family: var(--mg-font-family-text);
|
|
30
|
+
font-size: var(--mg-font-size-300);
|
|
31
|
+
font-weight: 600;
|
|
32
|
+
transition: filter var(--mg-motion-duration-fast)
|
|
33
|
+
var(--mg-motion-easing-standard);
|
|
34
|
+
|
|
35
|
+
&:hover {
|
|
36
|
+
filter: brightness(0.92);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:focus-visible {
|
|
40
|
+
@include mg-focus-ring;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@media (prefers-reduced-motion: reduce) {
|
|
44
|
+
transition: none;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&__dialog {
|
|
49
|
+
inline-size: min(calc(100% - 2rem), 44rem);
|
|
50
|
+
max-block-size: calc(100vh - 2rem);
|
|
51
|
+
padding: 0;
|
|
52
|
+
overflow-y: auto;
|
|
53
|
+
background: rgb(var(--mg-color-white));
|
|
54
|
+
border: 0;
|
|
55
|
+
border-block-start: var(--mg-spacing-50) solid
|
|
56
|
+
rgb(var(--mg-color-interactive));
|
|
57
|
+
border-radius: var(--mg-radius-button);
|
|
58
|
+
color: rgb(var(--mg-color-neutral-800));
|
|
59
|
+
box-shadow: 0 12px 40px rgb(0 0 0 / 0.2);
|
|
60
|
+
|
|
61
|
+
&::backdrop {
|
|
62
|
+
background: var(--mg-color-modal-scrim);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.mg-cite-this__content {
|
|
66
|
+
padding-block: 0 var(--mg-spacing-200);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&__dialog-header {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
justify-content: space-between;
|
|
74
|
+
gap: var(--mg-spacing-200);
|
|
75
|
+
padding: var(--mg-spacing-150) var(--mg-spacing-200) 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&__title {
|
|
79
|
+
margin: 0;
|
|
80
|
+
font-family: var(--mg-font-family-ui);
|
|
81
|
+
font-size: var(--mg-font-size-400);
|
|
82
|
+
line-height: 1.3;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&__close {
|
|
86
|
+
flex-shrink: 0;
|
|
87
|
+
inline-size: 44px;
|
|
88
|
+
block-size: 44px;
|
|
89
|
+
min-inline-size: 44px;
|
|
90
|
+
min-block-size: 44px;
|
|
91
|
+
color: rgb(var(--mg-color-neutral-600));
|
|
92
|
+
|
|
93
|
+
&:hover {
|
|
94
|
+
color: rgb(var(--mg-color-neutral-900));
|
|
95
|
+
background-color: rgb(var(--mg-color-neutral-900) / 0.08);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
&__summary {
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
justify-content: space-between;
|
|
103
|
+
gap: var(--mg-spacing-150);
|
|
104
|
+
min-block-size: 44px;
|
|
105
|
+
padding: var(--mg-spacing-150) var(--mg-spacing-200);
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
font-family: var(--mg-font-family-ui);
|
|
108
|
+
font-size: var(--mg-font-size-400);
|
|
109
|
+
font-weight: 700;
|
|
110
|
+
list-style: none;
|
|
111
|
+
|
|
112
|
+
&::-webkit-details-marker {
|
|
113
|
+
display: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&:focus-visible {
|
|
117
|
+
@include mg-focus-ring-inset;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&::after {
|
|
121
|
+
content: "+";
|
|
122
|
+
font-family: var(--mg-font-family-text);
|
|
123
|
+
font-size: var(--mg-font-size-400);
|
|
124
|
+
font-weight: 400;
|
|
125
|
+
line-height: 1;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&__fallback[open] .mg-cite-this__summary::after {
|
|
130
|
+
content: "−";
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&__content {
|
|
134
|
+
padding: 0 var(--mg-spacing-200) var(--mg-spacing-200);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
&__text {
|
|
138
|
+
margin: 0;
|
|
139
|
+
overflow-wrap: anywhere;
|
|
140
|
+
text-wrap: pretty;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
&__actions {
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
flex-wrap: wrap;
|
|
147
|
+
gap: var(--mg-spacing-150);
|
|
148
|
+
margin-block-start: var(--mg-spacing-150);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&__copy {
|
|
152
|
+
min-block-size: 44px;
|
|
153
|
+
padding: var(--mg-spacing-100) var(--mg-spacing-200);
|
|
154
|
+
background: rgb(var(--mg-color-interactive));
|
|
155
|
+
border: 0;
|
|
156
|
+
border-radius: var(--mg-radius-button);
|
|
157
|
+
color: rgb(var(--mg-color-white));
|
|
158
|
+
cursor: pointer;
|
|
159
|
+
font-family: var(--mg-font-family-text);
|
|
160
|
+
font-size: var(--mg-font-size-300);
|
|
161
|
+
font-weight: 600;
|
|
162
|
+
transition-property: filter, scale;
|
|
163
|
+
transition-duration: var(--mg-motion-duration-fast);
|
|
164
|
+
transition-timing-function: var(--mg-motion-easing-standard);
|
|
165
|
+
|
|
166
|
+
&:hover {
|
|
167
|
+
filter: brightness(0.92);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
&:active {
|
|
171
|
+
scale: 0.96;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
&:focus-visible {
|
|
175
|
+
@include mg-focus-ring;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
@media (prefers-reduced-motion: reduce) {
|
|
179
|
+
transition: none;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
&__status {
|
|
184
|
+
font-size: var(--mg-font-size-250);
|
|
185
|
+
}
|
|
186
|
+
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Fixed bottom GDPR/privacy compliance consent notice with accept/manage preference controls.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/CookieConsentBanner/CookieConsentBanner.mdx
|
|
8
8
|
*/
|
|
9
9
|
// Mangrove theme bridge for the externally loaded vanilla-cookieconsent UI.
|
|
10
10
|
// The CDN stylesheet is appended after the local bundle and declares the same
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Continuous, stepped and categorical legend primitives for maps and charts.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/DataViz/Legend/Legend.mdx
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
.mg-legend {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Branded 404 Not Found and 500 Server Error status page layouts and illustrations.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/ErrorPages/ErrorPage.mdx
|
|
8
8
|
*/
|
|
9
9
|
.mg-error-page {
|
|
10
10
|
min-height: 100vh;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Site-wide mega footer with branding, navigation columns, copyright, and social links.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Footer/Footer.mdx
|
|
8
8
|
*/
|
|
9
9
|
.mg-footer {
|
|
10
10
|
--mg-gutenberg-spacer: 0;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Accessible custom checkbox inputs with focus rings, checked checkmarks, and disabled states.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Checkbox/Checkbox.mdx
|
|
8
8
|
*/
|
|
9
9
|
// Checkbox-specific overrides.
|
|
10
10
|
// Shared form styles live in _form-base.scss (.mg-form-check).
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Button row and submission action container for web forms.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/FormAction/FormAction.mdx
|
|
8
8
|
*/
|
|
9
9
|
.mg-form-action {
|
|
10
10
|
align-items: stretch;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Field wrapper associating labels, hint helper text, form inputs, and inline error validation messages.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/FormGroup/FormGroup.mdx
|
|
8
8
|
*/
|
|
9
9
|
// FormGroup — styled fieldset/legend for grouping related form controls.
|
|
10
10
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Rollup stylesheet for text inputs, select dropdowns, and form control elements.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/TextInput/TextInput.mdx
|
|
8
8
|
*/
|
|
9
9
|
// DEPRECATED — February 2026
|
|
10
10
|
// This file has been replaced by:
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Accessible radio input controls with styled checked indicators and keyboard focus states.
|
|
5
5
|
*
|
|
6
6
|
* Full documentation:
|
|
7
|
-
* https://github.com/
|
|
7
|
+
* https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Components/Forms/Radio/Radio.mdx
|
|
8
8
|
*/
|
|
9
9
|
// Radio-specific overrides.
|
|
10
10
|
// Shared form styles live in _form-base.scss (.mg-form-check).
|