@deriv-web-design/ui 0.1.21 → 0.1.24

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 {
@@ -11858,10 +11983,11 @@
   --dch-doc-background: var(--background-surface);
   --dch-doc-radius: var(--radius-2xl);
   --dch-doc-padding-block: var(--spacing-16);
-  --dch-doc-padding-inline: var(--spacing-16);
+  --dch-doc-padding-inline-start: var(--spacing-16);
+  --dch-doc-padding-inline-end: var(--spacing-16);
   --dch-doc-gap: var(--spacing-8);
   --dch-doc-icon-gap: var(--spacing-8);
-  --dch-doc-icon-size: var(--spacing-24);
+  --dch-doc-icon-size: var(--spacing-48);
   --dch-doc-action-indent: var(--spacing-56);
   --dch-focus-ring-color: var(--border-focus);
   --dch-title-tracking: -0.02rem;
@@ -11924,6 +12050,9 @@
   display: flex;
   min-width: 0;
 }
+.dch__doc-item:only-child {
+  grid-column: 1 / -1;
+}
 .dch__doc {
   display: flex;
   flex-direction: column;
@@ -11933,7 +12062,8 @@
   width: 100%;
   min-width: 0;
   box-sizing: border-box;
-  padding: var(--dch-doc-padding-block) var(--dch-doc-padding-inline);
+  padding-block: var(--dch-doc-padding-block);
+  padding-inline: var(--dch-doc-padding-inline-start) var(--dch-doc-padding-inline-end);
   border-radius: var(--dch-doc-radius);
   background-color: var(--dch-doc-background);
   color: var(--dch-text-color);
@@ -11973,12 +12103,15 @@
 .dch__doc-action {
   display: flex;
   flex-shrink: 0;
+  align-items: center;
+  min-height: var(--typography-body-md-line-height);
   padding-inline-start: var(--dch-doc-action-indent);
 }
 @media (min-width: 768px) {
   :root {
     --dch-padding-inline: var(--spacing-24);
-    --dch-doc-padding-inline: var(--spacing-24);
+    --dch-doc-padding-inline-start: var(--spacing-24);
+    --dch-doc-padding-inline-end: 1.75rem;
     --dch-doc-radius: var(--radius-full);
     --dch-doc-action-indent: var(--spacing-0);
   }
@@ -11998,7 +12131,7 @@
 
 /* components/LinkModal/LinkModal.css */
 :root {
-  --lm-scrim-color: var(--overlay-strong);
+  --lm-scrim-color: rgb(0 0 0 / 72%);
   --lm-scrim-blur: 4px;
   --lm-z-index: 9999;
   --lm-panel-background: var(--background-surface);