@undrr/undrr-mangrove 2.2.0 → 2.4.0

package/scss/Patterns/Content/Publication/publication-record.scss

@@ -0,0 +1,110 @@
+/**
+ * Experimental publication record composition, built on the ArticleStory shell and reading layout.
+ * https://github.com/unisdr/undrr-mangrove/blob/main/stories/Patterns/Content/Publication/PublicationRecord.mdx
+ */
+@use "../../../assets/scss/mixins" as *;
+
+.mg-publication-record {
+  overflow-wrap: anywhere;
+
+  main a:not(.mg-tag) {
+    text-decoration-line: underline;
+  }
+}
+
+.mg-publication-record__layout {
+  max-inline-size: var(--mg-reading-with-contents-width);
+  padding-block-end: var(--mg-spacing-400);
+}
+
+.mg-publication-record__header {
+  margin-block-end: var(--mg-spacing-300);
+
+  h1 {
+    max-inline-size: 49rem;
+  }
+}
+
+.mg-publication-record__metadata {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--mg-spacing-200);
+
+  dt {
+    font-weight: 700;
+    margin-block-end: var(--mg-spacing-50);
+  }
+
+  dd {
+    overflow-wrap: anywhere;
+    margin-inline-start: 0;
+  }
+
+  ul {
+    @include mg-list-unmarked;
+
+    margin-block: 0;
+    padding-inline-start: 0;
+  }
+}
+
+.mg-publication-record__identity {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mg-spacing-200) var(--mg-spacing-300);
+
+  > div {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+}
+
+.mg-publication-record__resources {
+  @include mg-list-unmarked;
+
+  padding-inline-start: 0;
+
+  li {
+    padding-block: var(--mg-spacing-150);
+    border-block-end: 1px solid rgb(var(--mg-color-neutral-200));
+  }
+
+  li:first-child {
+    padding-block-start: var(--mg-spacing-50);
+  }
+
+  p {
+    margin-block: var(--mg-spacing-50) 0;
+  }
+}
+
+.mg-publication-record__reading {
+  align-items: start;
+}
+
+.mg-publication-record__main,
+.mg-publication-record__aside {
+  min-inline-size: 0;
+
+  > * + * {
+    margin-block-start: var(--mg-spacing-300);
+  }
+
+  > :first-child,
+  > section > h2:first-child {
+    margin-block-start: 0;
+  }
+}
+
+.mg-publication-record__cover {
+  margin: 0;
+  max-inline-size: 14rem;
+
+  img {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    padding: 0;
+    border: 1px solid rgb(var(--mg-color-neutral-600) / 0.2);
+  }
+}

package/scss/Patterns/LandingPages/publication-example.scss

@@ -0,0 +1,28 @@
+/**
+ * Publication branding example
+ *
+ * Consumer-owned report expression for the paired Publication page stories.
+ * This is story scaffolding, not an additional component API or theme.
+ *
+ * Full documentation:
+ * https://github.com/PreventionWeb/undrr-mangrove/blob/main/stories/Patterns/LandingPages/PublicationPage.mdx
+ */
+
+// Existing theme token: the report changes its masthead surface, not the
+// theme's interactive colours, fonts, responsive geometry or focus rules.
+.mg-publication-example--branded {
+  --mg-color-hero: var(--mg-color-neutral-900);
+}
+
+// A documented Hero property is set on the component that owns its value.
+// Changing the shared copy-width hook keeps copy and protective veil aligned.
+.mg-publication-example--branded .mg-hero {
+  --mg-hero-overlay-max-width: 44rem;
+}
+
+// The only direct presentation override belongs to consumer-authored prose.
+// It never reaches a shared component's children or interaction states.
+.mg-publication-example--branded .mg-publication-example__intro {
+  border-inline-start: 4px solid rgb(var(--mg-color-interactive));
+  padding-inline-start: var(--mg-spacing-200);
+}

package/scss/assets/scss/_components.scss

@@ -102,3 +102,4 @@
 @use "../../Patterns/RichContent/rich-content" as *;
 @use "../../Patterns/ContentTeaser/content-teaser";
 @use "../../Patterns/ContentCard/content-card";
+@use "../../Components/Dialog/dialog" as *;

package/scss/assets/scss/_variables.scss

@@ -4,7 +4,7 @@
  * Storybook:    https://mangrove.undrr.org/
  * LLMs context: https://mangrove.undrr.org/llms.txt
  * Repository:   https://github.com/PreventionWeb/undrr-mangrove
- * Version: 2.2.0
+ * Version: 2.4.0
  *
  *   ██╗   ██╗███╗   ██╗██████╗ ██████╗ ██████╗
  *   ██║   ██║████╗  ██║██╔══██╗██╔══██╗██╔══██╗