@deriv-web-design/ui 0.1.21 → 0.1.23

package/block-registry.json

@@ -4261,6 +4261,132 @@
       }
     }
   },
+  "language-select-modal": {
+    "id": "language-select-modal",
+    "name": "Language Select Modal",
+    "component": "LanguageSelectModal",
+    "category": "overlay",
+    "description": "Centred language-picker dialog with a grid of flag-plus-label destination links, built on LinkModal.",
+    "purpose": "Use this template when a page needs a language (or locale) picker dialog — typically opened from a DocumentChips language link — where each option is a flag image plus a label linking to that language's destination.",
+    "keywords": [
+      "language",
+      "locale",
+      "modal",
+      "dialog",
+      "flag",
+      "translation",
+      "document",
+      "regulatory",
+      "overlay",
+      "deriv"
+    ],
+    "sectionType": "language-select-modal",
+    "global": false,
+    "requiredFields": [
+      "open"
+    ],
+    "optionalFields": [
+      "title",
+      "closeLabel",
+      "options",
+      "headingLevel",
+      "container"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 99,
+    "placement": [
+      "overlay"
+    ],
+    "layout": {
+      "alignment": "center",
+      "gridColumns": "2-3",
+      "contentWidth": "narrow",
+      "background": false,
+      "overlay": true
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": false,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "sectionLink": false,
+      "icons": true
+    },
+    "imageRoles": [
+      "flag"
+    ],
+    "defaultValues": {
+      "title": "Select your language",
+      "closeLabel": "Close",
+      "headingLevel": "h2"
+    },
+    "fields": {
+      "closeLabel": {
+        "type": "string",
+        "required": false,
+        "default": "Close",
+        "maxLength": 40
+      },
+      "headingLevel": {
+        "type": "string",
+        "required": false,
+        "default": "h2",
+        "enum": [
+          "h2",
+          "h3"
+        ]
+      },
+      "open": {
+        "type": "boolean",
+        "required": true,
+        "description": "Whether the dialog is rendered. Nothing mounts while false."
+      },
+      "options": {
+        "type": "array",
+        "required": false,
+        "description": "Flag + label destinations. Flag sources are consumer-supplied remote URLs.",
+        "itemFields": {
+          "external": {
+            "type": "boolean",
+            "required": false,
+            "default": true
+          },
+          "flagAlt": {
+            "type": "string",
+            "required": false,
+            "default": ""
+          },
+          "flagSrc": {
+            "type": "url",
+            "required": false,
+            "description": "Remote flag image. Omit for a label-only option."
+          },
+          "href": {
+            "type": "url",
+            "required": true
+          },
+          "id": {
+            "type": "string",
+            "required": false
+          },
+          "label": {
+            "type": "string",
+            "required": true,
+            "maxLength": 80
+          }
+        }
+      },
+      "title": {
+        "type": "string",
+        "required": false,
+        "default": "Select your language",
+        "maxLength": 80
+      }
+    }
+  },
   "leaders": {
     "id": "leaders",
     "name": "Leaders",
@@ -4851,7 +4977,8 @@
     ],
     "variants": [
       "tabs",
-      "single"
+      "single",
+      "toggle"
     ],
     "recommendedPosition": 4,
     "placement": [
@@ -5023,8 +5150,10 @@
         "default": "tabs",
         "enum": [
           "tabs",
-          "single"
-        ]
+          "single",
+          "toggle"
+        ],
+        "description": "`tabs` lists selectable option types; `single` shows one option as a media/copy split; `toggle` shows one option as a single media well whose animation is swapped by an icon switch above the card heading."
       }
     }
   },

package/components.manifest.json

@@ -3037,7 +3037,7 @@
         "variant": {
           "type": "OptionsTypesVariant",
           "required": false,
-          "description": "`tabs` shows a selectable list of option types. `single` shows one option in a media/content split.",
+          "description": "`tabs` shows a selectable list of option types. `single` shows one option in a media/content split. `toggle` shows one option as a single media well whose animation is swapped by an icon switch above the card heading, with the copy beside it. Use it when the animations are two views of the same idea (up/down, before/after) rather than two separate things worth showing at once.",
           "default": "tabs"
         }
       }

package/dist/index.css

@@ -11563,6 +11563,110 @@
   height: 16px;
   flex: 0 0 auto;
 }
+.ot--toggle {
+  --ot-toggle-card-bg: var(--background-surface);
+  --ot-toggle-switch-bg: var(--color-opacity-slate-4);
+  --ot-toggle-switch-radius: var(--radius-md);
+  --ot-toggle-switch-padding: var(--spacing-4);
+  --ot-toggle-option-width: var(--spacing-40);
+  --ot-toggle-option-height: var(--spacing-32);
+  --ot-toggle-option-radius: 0.25rem;
+  --ot-toggle-icon-size: 1.375rem;
+  --ot-toggle-card-max-width: 24.06rem;
+  --ot-toggle-column-gap: var(--spacing-16);
+  --ot-toggle-media-padding: var(--spacing-16);
+  --ot-toggle-copy-padding-inline: var(--spacing-24);
+  --ot-toggle-switch-offset: var(--spacing-16);
+}
+.ot__option--toggle {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  max-width: var(--ot-toggle-card-max-width);
+  margin-inline: auto;
+  background: var(--ot-toggle-card-bg);
+  border-radius: var(--ot-card-radius);
+  overflow: visible;
+}
+.ot__toggle-media {
+  min-width: 0;
+  padding: var(--ot-toggle-media-padding);
+}
+.ot__toggle-pane {
+  min-width: 0;
+}
+.ot__toggle-pane[hidden] {
+  display: none;
+}
+.ot__toggle-side {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+  padding-block: var(--spacing-16) var(--spacing-32);
+  padding-inline: var(--ot-toggle-copy-padding-inline);
+}
+.ot__toggle-switch {
+  display: flex;
+  align-items: center;
+  align-self: center;
+  margin-bottom: var(--ot-toggle-switch-offset);
+  padding: var(--ot-toggle-switch-padding);
+  background: var(--ot-toggle-switch-bg);
+  border-radius: var(--ot-toggle-switch-radius);
+}
+.ot__toggle-option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ot-toggle-option-width);
+  height: var(--ot-toggle-option-height);
+  padding: 0;
+  border: 0;
+  border-radius: var(--ot-toggle-option-radius);
+  background: transparent;
+  color: var(--ot-text);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.ot__toggle-option--active {
+  background: var(--ot-toggle-card-bg);
+}
+.ot__toggle-option:focus-visible {
+  outline: 2px solid var(--ot-focus);
+  outline-offset: 2px;
+}
+.ot__toggle-icon {
+  display: block;
+  width: var(--ot-toggle-icon-size);
+  height: var(--ot-toggle-icon-size);
+  object-fit: contain;
+}
+.ot__toggle-option:has(.ot__toggle-option-label) {
+  width: auto;
+  min-width: var(--ot-toggle-option-width);
+  padding-inline: var(--spacing-16);
+}
+.ot__toggle-option-label {
+  font-family: var(--typography-body-sm-font-family);
+  font-size: var(--typography-body-sm-font-size);
+  font-weight: var(--font-weight-semi-bold);
+  line-height: var(--typography-body-sm-line-height);
+  white-space: nowrap;
+}
+.ot__toggle-title {
+  margin: 0;
+  color: var(--ot-text);
+  font-family: var(--typography-h5-font-family);
+  font-size: var(--typography-h5-font-size);
+  font-weight: var(--typography-h5-font-weight);
+  line-height: var(--typography-h5-line-height);
+}
+.ot__option--toggle .ot__metadata {
+  margin-top: var(--spacing-24);
+}
 @media (min-width: 480px) {
   .ot {
     --ot-stack-gap: var(--spacing-32);
@@ -11617,6 +11721,27 @@
     grid-template-columns: 1fr;
     gap: var(--spacing-48);
   }
+  .ot--toggle {
+    --ot-toggle-switch-offset: var(--spacing-32);
+  }
+  .ot__option--toggle {
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--ot-toggle-column-gap);
+    max-width: none;
+    overflow: hidden;
+  }
+  .ot__toggle-media {
+    flex: 1 1 0;
+    padding: 0;
+  }
+  .ot__toggle-side {
+    flex: 1 1 0;
+    padding: var(--spacing-48);
+  }
+  .ot__toggle-switch {
+    align-self: flex-start;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   .ot__control-icon {