Skin tone emojis (#6840)

Signed-off-by: Abigail Dawson <abigaildawson.dev@gmail.com>

packages/ui/lang/en.json

@@ -73,6 +73,7 @@
     "YYYY": "YYYY",
     "HH": "HH",
     "GettingWorkDone": "Getting work done",
+    "ExpressYourself": "Express yourself",
     "Smileys": "Smileys",
     "Nature": "Nature",
     "Symbols": "Symbols",
@@ -94,4 +95,4 @@
     "UseMaxWidth": "Max width",
     "Sidebar": "Sidebar"
   }
-}
+}

packages/ui/lang/es.json

@@ -73,6 +73,7 @@
     "YYYY": "AAAA",
     "HH": "HH",
     "GettingWorkDone": "Haciendo el trabajo",
+    "ExpressYourself": "Exprésate",
     "Smileys": "Emoticonos",
     "Nature": "Naturaleza",
     "Symbols": "Símbolos",
@@ -94,4 +95,4 @@
     "UseMaxWidth": "Ancho máximo",
     "Sidebar": "Barra lateral"
   }
-}
+}

packages/ui/lang/fr.json

@@ -73,6 +73,7 @@
     "YYYY": "AAAA",
     "HH": "HH",
     "GettingWorkDone": "Faire le travail",
+    "ExpressYourself": "Exprime-toi",
     "Smileys": "Émoticônes",
     "Nature": "Nature",
     "Symbols": "Symboles",
@@ -94,4 +95,4 @@
     "UseMaxWidth": "Largeur maximale",
     "Sidebar": "Barre latérale"
   }
-}
+}

packages/ui/lang/pt.json

@@ -73,6 +73,7 @@
     "YYYY": "AAAA",
     "HH": "HH",
     "GettingWorkDone": "A fazer",
+    "ExpressYourself": "Expressa-te",
     "Smileys": "Emoticons",
     "Nature": "Natureza",
     "Symbols": "Símbolos",
@@ -94,4 +95,4 @@
     "UseMaxWidth": "Largura máxima",
     "Sidebar": "Barra lateral"
   }
-}
+}

packages/ui/lang/ru.json

@@ -73,6 +73,7 @@
     "YYYY": "ГГГГ",
     "HH": "ЧЧ",
     "GettingWorkDone": "Для работы",
+    "ExpressYourself": "Вырази себя",
     "Smileys": "Смайлики",
     "Nature": "Природа",
     "Symbols": "Символы",
@@ -94,4 +95,4 @@
     "UseMaxWidth": "Максимальная ширина",
     "Sidebar": "Боковая панель"
   }
-}
+}

packages/ui/lang/zh.json

@@ -73,6 +73,7 @@
     "YYYY": "年",
     "HH": "小时",
     "GettingWorkDone": "完成工作",
+    "ExpressYourself": "表达自己",
     "Smileys": "表情符号",
     "Nature": "自然",
     "Symbols": "符号",
@@ -94,4 +95,4 @@
     "UseMaxWidth": "使用最大宽度",
     "Sidebar": "侧边栏"
   }
-}
+}

packages/ui/src/components/EmojiPopup.svelte

@@ -12,6 +12,7 @@
   import Places from './icons/Places.svelte'
   import Symbols from './icons/Symbols.svelte'
   import Work from './icons/Work.svelte'
+  import Palette from './icons/Palette.svelte'
 
   import { tooltip } from '../tooltips'
   import { AnySvelteComponent, emojiSP } from '../types'
@@ -50,9 +51,9 @@
         String.fromCodePoint(0x0031, 0xfe0f, 0x20e3),
         String.fromCodePoint(0x0032, 0xfe0f, 0x20e3),
         String.fromCodePoint(0x0033, 0xfe0f, 0x20e3),
-        String.fromCodePoint(0x1f44b, 0x1f3fc),
-        String.fromCodePoint(0x1f44d, 0x1f3fc),
-        String.fromCodePoint(0x1f44c, 0x1f3fc),
+        String.fromCodePoint(0x1f44b),
+        String.fromCodePoint(0x1f44d),
+        String.fromCodePoint(0x1f44c),
         String.fromCodePoint(0x1f525),
         String.fromCodePoint(0x1f680)
       ],
@@ -121,6 +122,19 @@
         ...getEmojis(0x1f532, 0x1f53d)
       ],
       icon: Symbols
+    },
+    {
+      id: 'express',
+      label: plugin.string.ExpressYourself,
+      emojis: [
+        ...generateSkinToneEmojis(0x1f44b),
+        ...generateSkinToneEmojis(0x1f44d),
+        ...generateSkinToneEmojis(0x1f44c),
+        ...generateSkinToneEmojis(0x1f64c),
+        ...generateSkinToneEmojis(0x1f44f),
+        ...generateSkinToneEmojis(0x1f64f)
+      ],
+      icon: Palette
     }
   ]
 
@@ -134,6 +148,13 @@
     })
   }
 
+  function generateSkinToneEmojis (baseEmoji: number): string[] {
+    const skinTones = [0x1f3fb, 0x1f3fc, 0x1f3fd, 0x1f3fe, 0x1f3ff]
+    return skinTones.map((skinTone) => {
+      return String.fromCodePoint(baseEmoji, skinTone)
+    })
+  }
+
   function handleScrollToCategory (categoryId: string) {
     const labelElement = document.getElementById(categoryId)
 

packages/ui/src/components/icons/Palette.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  export let opacity: string = '1'
+</script>
+
+<svg class="svg-{size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g {opacity}>
+    <path
+      d="M2 12.0261C2 17.1723 5.86713 21.413 10.8468 21.9863C11.5816 22.0709 12.2938 21.7576 12.8168 21.2333C13.4703 20.5781 13.4703 19.5159 12.8168 18.8607C12.2938 18.3364 11.8674 17.5541 12.2619 16.9268C13.8385 14.4192 22 20.178 22 12.0261C22 6.48884 17.5228 2 12 2C6.47715 2 2 6.48884 2 12.0261Z"
+      stroke="#1C274C"
+      stroke-width="1.5"
+    /><circle cx="17.5" cy="11.5" r="0.75" stroke="#1C274C" stroke-width="1.5" /><circle
+      cx="6.5"
+      cy="11.5"
+      r="0.75"
+      stroke="#1C274C"
+      stroke-width="1.5"
+    /><path
+      d="M10.335 6.99976C10.335 7.41397 9.99917 7.74976 9.58496 7.74976C9.17075 7.74976 8.83496 7.41397 8.83496 6.99976C8.83496 6.58554 9.17075 6.24976 9.58496 6.24976C9.99917 6.24976 10.335 6.58554 10.335 6.99976Z"
+      stroke="#1C274C"
+      stroke-width="1.5"
+    /><path
+      d="M15.25 7C15.25 7.41421 14.9142 7.75 14.5 7.75C14.0858 7.75 13.75 7.41421 13.75 7C13.75 6.58579 14.0858 6.25 14.5 6.25C14.9142 6.25 15.25 6.58579 15.25 7Z"
+      stroke="#1C274C"
+      stroke-width="1.5"
+    />
+  </g>
+</svg>

packages/ui/src/plugin.ts

@@ -99,6 +99,7 @@ export const uis = plugin(uiId, {
     DueDatePopupOverdueDescription: '' as IntlString,
 
     GettingWorkDone: '' as IntlString,
+    ExpressYourself: '' as IntlString,
     Smileys: '' as IntlString,
     Nature: '' as IntlString,
     Symbols: '' as IntlString,