feat(ui): own responsive marketing layout APIs

2026-08-24 19:44:26 +05:30
parent 3b402b4e36
commit f9e285b182
15 changed files with 589 additions and 45 deletions
@@ -12,6 +12,8 @@ component Footer {
    items: unknown[] = []
    columns: number = 3
    maxWidth: string = "compact"
+    mobileColumns: number = 2
+    mobileCopyrightAlign: string = "center"
    copyright: string = ""
    copyrightKey: string = ""
    translationPrefix: string = ""
@@ -36,6 +38,7 @@ component Footer {
      data-ui-component="Footer"
      data-size='{size}'
      data-color='{color}'
+      data-mobile-columns='{mobileColumns}' data-mobile-copyright-align='{mobileCopyrightAlign}'
      class='wrn-footer {maxWidth === "full" ? "wrn-footer--width-full" : ""} {class}'
    >
      <div
@@ -531,6 +534,9 @@ component Footer {
    .wrn-footer__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
+    .wrn-footer[data-mobile-columns="1"] .wrn-footer__links { grid-template-columns: 1fr; }
+    .wrn-footer[data-mobile-columns="2"] .wrn-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .wrn-footer[data-mobile-copyright-align="start"] :is(.wrn-footer__copyright-left, .wrn-footer__copyright-right) { justify-content: flex-start; text-align: left; }
    .wrn-footer__bottom,
      .wrn-footer__bottom--slots {
        grid-template-columns: 1fr;