Merge pull request #5914 from veroglez/LPD-45714

feat(@clayui/language-picker): LPD-45714 Add security margin
liferay · Jan 22, 2025 · f5719b4 · f5719b4
2 parents 6d44f93 + 9eaf740
commit f5719b4
Show file tree

Hide file tree

Showing 7 changed files with 935 additions and 1 deletion.
diff --git a/packages/clay-core/package.json b/packages/clay-core/package.json
@@ -27,6 +27,7 @@
 		"@clayui/button": "^3.116.0",
 		"@clayui/form": "^3.125.0",
 		"@clayui/icon": "^3.111.0",
+		"@clayui/label": "^3.111.0",
 		"@clayui/layout": "^3.111.0",
 		"@clayui/link": "^3.111.0",
 		"@clayui/loading-indicator": "^3.111.0",

diff --git a/packages/clay-core/src/index.ts b/packages/clay-core/src/index.ts
@@ -24,6 +24,7 @@ export {Picker, Option} from './picker';
 export {FocusTrap} from './focus-trap';
 export {Nav} from './nav';
 export {Body, Cell, Head, Row, Table} from './table';
+export {LanguagePicker} from './language-picker';
 
 // Experimental components
 export * as __EXPERIMENTAL_MENU from './drop-down';

diff --git a/packages/clay-core/src/language-picker/__tests__/__snapshots__/index.tsx.snap b/packages/clay-core/src/language-picker/__tests__/__snapshots__/index.tsx.snap
@@ -0,0 +1,294 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LanguagePicker renders 1`] = `
+<div>
+  <button
+    aria-activedescendant=""
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="Select a language, current language: English (United States)."
+    class="form-control form-control-select form-control-select-secondary"
+    role="combobox"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="inline-item-before"
+    >
+      <svg
+        class="lexicon-icon lexicon-icon-en-us"
+        role="presentation"
+      >
+        <use
+          href="/path/to/svg#en-us"
+        />
+      </svg>
+    </span>
+    <span
+      class="inline-item-before"
+    >
+      en-US
+    </span>
+  </button>
+</div>
+`;
+
+exports[`LanguagePicker renders a class name for the trigger 1`] = `
+<div>
+  <button
+    aria-activedescendant=""
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="Select a language, current language: English (United States)."
+    class="trigger-class form-control form-control-select form-control-select-secondary"
+    role="combobox"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="inline-item-before"
+    >
+      <svg
+        class="lexicon-icon lexicon-icon-en-us"
+        role="presentation"
+      >
+        <use
+          href="/path/to/svg#en-us"
+        />
+      </svg>
+    </span>
+    <span
+      class="inline-item-before"
+    >
+      en-US
+    </span>
+  </button>
+</div>
+`;
+
+exports[`LanguagePicker renders a small picker 1`] = `
+<div>
+  <button
+    aria-activedescendant=""
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="Select a language, current language: English (United States)."
+    class="form-control form-control-select form-control-select-secondary form-control-sm"
+    role="combobox"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="inline-item-before"
+    >
+      <svg
+        class="lexicon-icon lexicon-icon-en-us"
+        role="presentation"
+      >
+        <use
+          href="/path/to/svg#en-us"
+        />
+      </svg>
+    </span>
+    <span
+      class="inline-item-before"
+    >
+      en-US
+    </span>
+  </button>
+</div>
+`;
+
+exports[`LanguagePicker renders hidding the trigger text 1`] = `
+<div>
+  <button
+    aria-activedescendant=""
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="Select a language, current language: English (United States)."
+    class="form-control form-control-select form-control-select-secondary hidden-label"
+    role="combobox"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="inline-item-before"
+    >
+      <svg
+        class="lexicon-icon lexicon-icon-en-us"
+        role="presentation"
+      >
+        <use
+          href="/path/to/svg#en-us"
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`LanguagePicker renders the picker with id 1`] = `
+<div>
+  <button
+    aria-activedescendant=""
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="Select a language, current language: English (United States)."
+    class="form-control form-control-select form-control-select-secondary"
+    id="pickerId"
+    role="combobox"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="inline-item-before"
+    >
+      <svg
+        class="lexicon-icon lexicon-icon-en-us"
+        role="presentation"
+      >
+        <use
+          href="/path/to/svg#en-us"
+        />
+      </svg>
+    </span>
+    <span
+      class="inline-item-before"
+    >
+      en-US
+    </span>
+  </button>
+</div>
+`;
+
+exports[`LanguagePicker renders with a default selected locale 1`] = `
+<div>
+  <button
+    aria-activedescendant=""
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="Select a language, current language: Spanish (Spain)."
+    class="trigger-class form-control form-control-select form-control-select-secondary"
+    role="combobox"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="inline-item-before"
+    >
+      <svg
+        class="lexicon-icon lexicon-icon-es-es"
+        role="presentation"
+      >
+        <use
+          href="/path/to/svg#es-es"
+        />
+      </svg>
+    </span>
+    <span
+      class="inline-item-before"
+    >
+      es-ES
+    </span>
+  </button>
+</div>
+`;
+
+exports[`LanguagePicker renders with a selected locale 1`] = `
+<div>
+  <button
+    aria-activedescendant=""
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="Select a language, current language: French (France)."
+    class="trigger-class form-control form-control-select form-control-select-secondary"
+    role="combobox"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="inline-item-before"
+    >
+      <svg
+        class="lexicon-icon lexicon-icon-fr-fr"
+        role="presentation"
+      >
+        <use
+          href="/path/to/svg#fr-fr"
+        />
+      </svg>
+    </span>
+    <span
+      class="inline-item-before"
+    >
+      fr-FR
+    </span>
+  </button>
+</div>
+`;
+
+exports[`LanguagePicker renders with custom labels 1`] = `
+<div>
+  <button
+    aria-activedescendant=""
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="Trigger Label"
+    class="form-control form-control-select form-control-select-secondary"
+    role="combobox"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="inline-item-before"
+    >
+      <svg
+        class="lexicon-icon lexicon-icon-en-us"
+        role="presentation"
+      >
+        <use
+          href="/path/to/svg#en-us"
+        />
+      </svg>
+    </span>
+    <span
+      class="inline-item-before"
+    >
+      en-US
+    </span>
+  </button>
+</div>
+`;
+
+exports[`LanguagePicker renders with translations 1`] = `
+<div>
+  <button
+    aria-activedescendant=""
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="Select a language, current language: English (United States)."
+    class="form-control form-control-select form-control-select-secondary"
+    role="combobox"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="inline-item-before"
+    >
+      <svg
+        class="lexicon-icon lexicon-icon-en-us"
+        role="presentation"
+      >
+        <use
+          href="/path/to/svg#en-us"
+        />
+      </svg>
+    </span>
+    <span
+      class="inline-item-before"
+    >
+      en-US
+    </span>
+  </button>
+</div>
+`;