feat(WEB-304): remaning UI from design system primitives

components/Current/Header/LanguageSwitcher/Desktop/desktop.module.css

@@ -1,3 +1,7 @@
+.desktop {
+  display: none;
+}
+
 .container {
   position: relative;
 
@@ -30,6 +34,7 @@
   height: 1px;
   overflow: hidden;
 }
+
 .caret {
   display: inline-block;
   width: 0;
@@ -100,3 +105,9 @@
   outline: 0;
   text-decoration: none;
 }
+
+@media (min-width: 950px) {
+  .desktop {
+    display: block;
+  }
+}

components/Current/Header/LanguageSwitcher/Desktop/index.tsx

@@ -56,42 +56,44 @@ export default function Desktop({
   }
 
   return (
-    <div className={styles.container} ref={divRef}>
-      <button
-        aria-pressed="false"
-        className={styles.languageSwitcher}
-        onClick={toggleOpen}
-      >
-        <svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
-          <use xlinkHref="/_static/img/icons/sprites.svg#icon-globe"></use>
-        </svg>
-        {languages[currentLanguage]}
-        <span className={styles.hiddenAccessible}>Choose language</span>
-        <span className={styles.caret}></span>
-      </button>
-      <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
-        {urlKeys.map((key) => {
-          const url = urls[key as Lang]?.url
-          if (url) {
-            return (
-              <li
-                key={key}
-                className={`${styles.li} ${currentLanguage === key ? styles.active : ""}`}
-              >
-                {urls[key as Lang]?.isExternal ? (
-                  <Link className={styles.link} href={url}>
-                    {languages[key as Lang]}
-                  </Link>
-                ) : (
-                  <a className={styles.link} href={url}>
-                    {languages[key as Lang]}
-                  </a>
-                )}
-              </li>
-            )
-          }
-        })}
-      </ul>
-    </div>
+    <section className={styles.desktop}>
+      <div className={styles.container} ref={divRef}>
+        <button
+          aria-pressed="false"
+          className={styles.toggle}
+          onClick={toggleOpen}
+        >
+          <svg focusable="false" className={styles.icon} viewBox="0 0 32 32">
+            <use xlinkHref="/_static/img/icons/sprites.svg#icon-globe"></use>
+          </svg>
+          {languages[currentLanguage]}
+          <span className={styles.hiddenAccessible}>Choose language</span>
+          <span className={styles.caret}></span>
+        </button>
+        <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
+          {urlKeys.map((key) => {
+            const url = urls[key as Lang]?.url
+            if (url) {
+              return (
+                <li
+                  key={key}
+                  className={`${styles.li} ${currentLanguage === key ? styles.active : ""}`}
+                >
+                  {urls[key as Lang]?.isExternal ? (
+                    <Link className={styles.link} href={url}>
+                      {languages[key as Lang]}
+                    </Link>
+                  ) : (
+                    <a className={styles.link} href={url}>
+                      {languages[key as Lang]}
+                    </a>
+                  )}
+                </li>
+              )
+            }
+          })}
+        </ul>
+      </div>
+    </section>
   )
 }