From 9070a826d773506855b2fedf347d1fbe6f6c96cd Mon Sep 17 00:00:00 2001 From: Ravi Lingineni Date: Thu, 19 Sep 2024 10:39:41 -0700 Subject: [PATCH 1/4] add new icons --- .../foundations/iconography/ICON_DATA.json | 84 ++++++++++++ docs/public/icons-diff.html | 127 +++++++++++++++++- docs/public/vr-icons-diff.html | 127 +++++++++++++++++- .../src/classic/ic_gift_gestalt.svg | 1 + .../src/classic/ic_indent_gestalt.svg | 1 + .../src/classic/ic_kakao-talk_gestalt.svg | 1 + .../classic/ic_list-numbered-rtl_gestalt.svg | 1 + .../src/classic/ic_list-numbered_gestalt.svg | 1 + .../src/classic/ic_outdent_gestalt.svg | 1 + .../src/classic/ic_pincode_gestalt.svg | 1 + .../src/classic/ic_snapchat_gestalt.svg | 1 + .../src/classic/ic_telegram_gestalt.svg | 1 + .../src/classic/ic_viber_gestalt.svg | 1 + .../src/classic/index.ts | 20 +++ .../src/vr-theme/ic_vr_gift_gestalt.svg | 1 + .../src/vr-theme/ic_vr_indent_gestalt.svg | 1 + .../src/vr-theme/ic_vr_kakao-talk_gestalt.svg | 1 + .../ic_vr_list-numbered-rtl_gestalt.svg | 1 + .../vr-theme/ic_vr_list-numbered_gestalt.svg | 1 + .../src/vr-theme/ic_vr_outdent_gestalt.svg | 1 + .../src/vr-theme/ic_vr_pincode_gestalt.svg | 1 + .../src/vr-theme/ic_vr_snapchat_gestalt.svg | 1 + .../src/vr-theme/ic_vr_telegram_gestalt.svg | 1 + .../src/vr-theme/ic_vr_viber_gestalt.svg | 1 + .../src/vr-theme/index.ts | 20 +++ packages/gestalt/src/icons-vr-theme/gift.svg | 1 + .../gestalt/src/icons-vr-theme/indent.svg | 1 + packages/gestalt/src/icons-vr-theme/index.ts | 20 +++ .../gestalt/src/icons-vr-theme/kakao-talk.svg | 1 + .../src/icons-vr-theme/list-numbered-rtl.svg | 1 + .../src/icons-vr-theme/list-numbered.svg | 1 + .../gestalt/src/icons-vr-theme/outdent.svg | 1 + .../gestalt/src/icons-vr-theme/pincode.svg | 1 + .../gestalt/src/icons-vr-theme/snapchat.svg | 1 + .../gestalt/src/icons-vr-theme/telegram.svg | 1 + packages/gestalt/src/icons-vr-theme/viber.svg | 1 + packages/gestalt/src/icons/gift.svg | 1 + packages/gestalt/src/icons/indent.svg | 1 + packages/gestalt/src/icons/index.ts | 20 +++ packages/gestalt/src/icons/kakao-talk.svg | 1 + .../gestalt/src/icons/list-numbered-rtl.svg | 1 + packages/gestalt/src/icons/list-numbered.svg | 1 + packages/gestalt/src/icons/outdent.svg | 1 + packages/gestalt/src/icons/pincode.svg | 1 + packages/gestalt/src/icons/snapchat.svg | 1 + packages/gestalt/src/icons/telegram.svg | 1 + packages/gestalt/src/icons/viber.svg | 1 + 47 files changed, 446 insertions(+), 12 deletions(-) create mode 100644 packages/gestalt-icons-android/src/classic/ic_gift_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/classic/ic_indent_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/classic/ic_kakao-talk_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/classic/ic_list-numbered-rtl_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/classic/ic_list-numbered_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/classic/ic_outdent_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/classic/ic_pincode_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/classic/ic_snapchat_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/classic/ic_telegram_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/classic/ic_viber_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/vr-theme/ic_vr_gift_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/vr-theme/ic_vr_indent_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/vr-theme/ic_vr_kakao-talk_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/vr-theme/ic_vr_list-numbered-rtl_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/vr-theme/ic_vr_list-numbered_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/vr-theme/ic_vr_outdent_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/vr-theme/ic_vr_pincode_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/vr-theme/ic_vr_snapchat_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/vr-theme/ic_vr_telegram_gestalt.svg create mode 100644 packages/gestalt-icons-android/src/vr-theme/ic_vr_viber_gestalt.svg create mode 100644 packages/gestalt/src/icons-vr-theme/gift.svg create mode 100644 packages/gestalt/src/icons-vr-theme/indent.svg create mode 100644 packages/gestalt/src/icons-vr-theme/kakao-talk.svg create mode 100644 packages/gestalt/src/icons-vr-theme/list-numbered-rtl.svg create mode 100644 packages/gestalt/src/icons-vr-theme/list-numbered.svg create mode 100644 packages/gestalt/src/icons-vr-theme/outdent.svg create mode 100644 packages/gestalt/src/icons-vr-theme/pincode.svg create mode 100644 packages/gestalt/src/icons-vr-theme/snapchat.svg create mode 100644 packages/gestalt/src/icons-vr-theme/telegram.svg create mode 100644 packages/gestalt/src/icons-vr-theme/viber.svg create mode 100644 packages/gestalt/src/icons/gift.svg create mode 100644 packages/gestalt/src/icons/indent.svg create mode 100644 packages/gestalt/src/icons/kakao-talk.svg create mode 100644 packages/gestalt/src/icons/list-numbered-rtl.svg create mode 100644 packages/gestalt/src/icons/list-numbered.svg create mode 100644 packages/gestalt/src/icons/outdent.svg create mode 100644 packages/gestalt/src/icons/pincode.svg create mode 100644 packages/gestalt/src/icons/snapchat.svg create mode 100644 packages/gestalt/src/icons/telegram.svg create mode 100644 packages/gestalt/src/icons/viber.svg diff --git a/docs/pages/foundations/iconography/ICON_DATA.json b/docs/pages/foundations/iconography/ICON_DATA.json index c8316d22b5..49cfbe0fc9 100644 --- a/docs/pages/foundations/iconography/ICON_DATA.json +++ b/docs/pages/foundations/iconography/ICON_DATA.json @@ -815,6 +815,12 @@ "description": "Indicates a GIF media", "keywords": ["media", "animated", "image"] }, + { + "name": "gift", + "categories": ["Reactions and ratings"], + "description": "Indicates a gift feature or concept.", + "keywords": ["present", "celebrate", "birthday", "box"] + }, { "name": "globe", "categories": ["Toggle"], @@ -946,6 +952,12 @@ "description": "Indicates a legal statement of ownership/authorship", "keywords": [] }, + { + "name": "indent", + "categories": ["Text"], + "description": "Indicates a text indent.", + "keywords": ["formatting"] + }, { "name": "info-circle", "categories": ["Utility and tools"], @@ -982,6 +994,12 @@ "description": "Indicates the ability to see or take action on an invoice", "keywords": ["receipt", "billing", "payment"] }, + { + "name": "kakao-talk", + "categories": ["Brand"], + "description": "Indicates Kakao Talk service or feature.", + "keywords": ["message"] + }, { "name": "key", "categories": ["Utility and tools"], @@ -1012,6 +1030,12 @@ "description": "Indicates service-amp is available", "keywords": ["flash", "service", "bolt", "lightening"] }, + { + "name": "line-logo", + "categories": ["Brand"], + "description": "Indicates Line service or feature.", + "keywords": ["message"] + }, { "name": "link", "categories": ["Utility and tools"], @@ -1030,6 +1054,18 @@ "description": "Indicates the ability to try a lipstick color", "keywords": ["mouth", "lipstick"] }, + { + "name": "list-numbered", + "categories": ["Text"], + "description": "Indicates the ability to add a numbered list in a left to right language.", + "keywords": ["numbers", "bullets"] + }, + { + "name": "list-numbered-rtl", + "categories": ["Text"], + "description": "Indicates the ability to add a numbered list in a right to left language.", + "keywords": ["numbers", "bullets"] + }, { "name": "live", "categories": ["Utility and tools"], @@ -1162,6 +1198,12 @@ "description": "Indicates the ability to mute the audio", "keywords": ["sound", "off", "audio", "volume"] }, + { + "name": "outdent", + "categories": ["Text"], + "description": "Indicates a text outdent.", + "keywords": ["formatting"] + }, { "name": "overlay-text", "categories": ["Text"], @@ -1228,6 +1270,12 @@ "description": "Indicates the ability to hide a pin", "keywords": [] }, + { + "name": "pincode", + "categories": ["Utility and tools"], + "description": "Indicates the ability to scan and open a Pincode.", + "keywords": ["scan", "code"] + }, { "name": "pinterest", "categories": ["Social", "Utility and tools"], @@ -1258,6 +1306,12 @@ "description": "Indicates help is available", "keywords": ["help", "support"] }, + { + "name": "reddit", + "categories": ["Brand"], + "description": "Indicates Reddit service or feature.", + "keywords": ["social", "media"] + }, { "name": "refresh", "categories": ["Utility and tools"], @@ -1427,6 +1481,12 @@ "description": "Indicates the ability to select skintones", "keywords": [] }, + { + "name": "skype", + "categories": ["Brand"], + "description": "Indicates Skype service or feature.", + "keywords": ["message"] + }, { "name": "smiley", "categories": ["Reactions and ratings"], @@ -1439,6 +1499,12 @@ "description": "Indicates an unselected mild happy reaction", "keywords": ["happy"] }, + { + "name": "snapchat", + "categories": ["Brand"], + "description": "Indicates SnapChat service or feature.", + "keywords": ["social", "media"] + }, { "name": "sort-ascending", "categories": ["Arrows"], @@ -1566,6 +1632,12 @@ "focus" ] }, + { + "name": "telegram", + "categories": ["Brand"], + "description": "Indicates Telegram service or feature.", + "keywords": ["message"] + }, { "name": "terms", "categories": ["Utility and tools"], @@ -1680,6 +1752,12 @@ "description": "Indicates the ability to upload a feed, usually for ad conversions", "keywords": ["conversions", "api"] }, + { + "name": "viber", + "categories": ["Brand"], + "description": "Indicates Viber service or feature.", + "keywords": ["message"] + }, { "name": "video-advance-10-seconds", "categories": ["Media controls"], @@ -1728,6 +1806,12 @@ "description": "Indicates an external link or domain", "keywords": ["external", "link", "new window"] }, + { + "name": "wechat", + "categories": ["Brand"], + "description": "Indicates WeChat service or feature.", + "keywords": ["message"] + }, { "name": "whats-app", "categories": ["Social"], diff --git a/docs/public/icons-diff.html b/docs/public/icons-diff.html index ad16cb6dda..d8cf74f376 100644 --- a/docs/public/icons-diff.html +++ b/docs/public/icons-diff.html @@ -15582,7 +15582,7 @@
New Icons
- 0 icons appear in the + 11 icons appear in the Figma filerepo.
-
+
+
+
+ + + +
+
gift.svg
+
+
+
+ + + +
+
indent.svg
+
+
+
+ + + +
+
kakao-talk.svg
+
+
+
+ + + +
+
list-numbered-ltr.svg
+
+
+
+ + + +
+
list-numbered-rtl.svg
+
+
+
+ + + +
+
list-numbered.svg
+
+
+
+ + + +
+
outdent.svg
+
+
+
+ + + +
+
pincode.svg
+
+
+
+ + + +
+
snapchat.svg
+
+
+
+ + + +
+
telegram.svg
+
+
+
+ + + +
+
viber.svg
+
+
Stats
-
Last Update: Fri Sep 06 2024 12:13:56 PM
+
Last Update: Thu Sep 19 2024 10:26:06 AM
Current SVG icons file count: 368
Current SVG icon total size (bytes): 136258
-
New SVG icon file count: 368
-
New SVG icon total size (bytes): 134789
+
New SVG icon file count: 379
+
New SVG icon total size (bytes): 142669
Missing icons:
-
New icons:
+
+ New icons:
gift.svg, indent.svg, kakao-talk.svg, + list-numbered-ltr.svg, list-numbered-rtl.svg, list-numbered.svg, + outdent.svg, pincode.svg, snapchat.svg, telegram.svg, viber.svg +
diff --git a/docs/public/vr-icons-diff.html b/docs/public/vr-icons-diff.html index cdfc28a215..5168ad4b1a 100644 --- a/docs/public/vr-icons-diff.html +++ b/docs/public/vr-icons-diff.html @@ -15474,7 +15474,7 @@
New Icons
- 0 icons appear in the + 11 icons appear in the Figma filerepo.
-
+
+
+
+ + + +
+
gift.svg
+
+
+
+ + + +
+
indent.svg
+
+
+
+ + + +
+
kakao-talk.svg
+
+
+
+ + + +
+
list-numbered-ltr.svg
+
+
+
+ + + +
+
list-numbered-rtl.svg
+
+
+
+ + + +
+
list-numbered.svg
+
+
+
+ + + +
+
outdent.svg
+
+
+
+ + + +
+
pincode.svg
+
+
+
+ + + +
+
snapchat.svg
+
+
+
+ + + +
+
telegram.svg
+
+
+
+ + + +
+
viber.svg
+
+
Stats
-
Last Update: Fri Sep 06 2024 12:13:56 PM
+
Last Update: Thu Sep 19 2024 10:26:06 AM
Current SVG icons file count: 368
Current SVG icon total size (bytes): 137801
-
New SVG icon file count: 368
-
New SVG icon total size (bytes): 137890
+
New SVG icon file count: 379
+
New SVG icon total size (bytes): 145748
Missing icons:
-
New icons:
+
+ New icons:
gift.svg, indent.svg, kakao-talk.svg, + list-numbered-ltr.svg, list-numbered-rtl.svg, list-numbered.svg, + outdent.svg, pincode.svg, snapchat.svg, telegram.svg, viber.svg +
diff --git a/packages/gestalt-icons-android/src/classic/ic_gift_gestalt.svg b/packages/gestalt-icons-android/src/classic/ic_gift_gestalt.svg new file mode 100644 index 0000000000..8a660bd66d --- /dev/null +++ b/packages/gestalt-icons-android/src/classic/ic_gift_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/classic/ic_indent_gestalt.svg b/packages/gestalt-icons-android/src/classic/ic_indent_gestalt.svg new file mode 100644 index 0000000000..e8da97811e --- /dev/null +++ b/packages/gestalt-icons-android/src/classic/ic_indent_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/classic/ic_kakao-talk_gestalt.svg b/packages/gestalt-icons-android/src/classic/ic_kakao-talk_gestalt.svg new file mode 100644 index 0000000000..9ae30acbc3 --- /dev/null +++ b/packages/gestalt-icons-android/src/classic/ic_kakao-talk_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/classic/ic_list-numbered-rtl_gestalt.svg b/packages/gestalt-icons-android/src/classic/ic_list-numbered-rtl_gestalt.svg new file mode 100644 index 0000000000..945111f2a3 --- /dev/null +++ b/packages/gestalt-icons-android/src/classic/ic_list-numbered-rtl_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/classic/ic_list-numbered_gestalt.svg b/packages/gestalt-icons-android/src/classic/ic_list-numbered_gestalt.svg new file mode 100644 index 0000000000..f26996ac0d --- /dev/null +++ b/packages/gestalt-icons-android/src/classic/ic_list-numbered_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/classic/ic_outdent_gestalt.svg b/packages/gestalt-icons-android/src/classic/ic_outdent_gestalt.svg new file mode 100644 index 0000000000..8d116763e1 --- /dev/null +++ b/packages/gestalt-icons-android/src/classic/ic_outdent_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/classic/ic_pincode_gestalt.svg b/packages/gestalt-icons-android/src/classic/ic_pincode_gestalt.svg new file mode 100644 index 0000000000..a595633d33 --- /dev/null +++ b/packages/gestalt-icons-android/src/classic/ic_pincode_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/classic/ic_snapchat_gestalt.svg b/packages/gestalt-icons-android/src/classic/ic_snapchat_gestalt.svg new file mode 100644 index 0000000000..19f89df465 --- /dev/null +++ b/packages/gestalt-icons-android/src/classic/ic_snapchat_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/classic/ic_telegram_gestalt.svg b/packages/gestalt-icons-android/src/classic/ic_telegram_gestalt.svg new file mode 100644 index 0000000000..6350959126 --- /dev/null +++ b/packages/gestalt-icons-android/src/classic/ic_telegram_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/classic/ic_viber_gestalt.svg b/packages/gestalt-icons-android/src/classic/ic_viber_gestalt.svg new file mode 100644 index 0000000000..ab24fe7f40 --- /dev/null +++ b/packages/gestalt-icons-android/src/classic/ic_viber_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/classic/index.ts b/packages/gestalt-icons-android/src/classic/index.ts index fb12b29716..7ba1282914 100644 --- a/packages/gestalt-icons-android/src/classic/index.ts +++ b/packages/gestalt-icons-android/src/classic/index.ts @@ -164,6 +164,7 @@ import gauge from './ic_gauge_gestalt.svg'; import ghost from './ic_ghost_gestalt.svg'; import gif from './ic_gif_gestalt.svg'; import gifVisual from './ic_gif-visual_gestalt.svg'; +import gift from './ic_gift_gestalt.svg'; import globe from './ic_globe_gestalt.svg'; import globeChecked from './ic_globe-checked_gestalt.svg'; import gmail from './ic_gmail_gestalt.svg'; @@ -183,12 +184,14 @@ import homeFill from './ic_home-fill_gestalt.svg'; import ideaPin from './ic_idea-pin_gestalt.svg'; import imagePortrait from './ic_image-portrait_gestalt.svg'; import impressum from './ic_impressum_gestalt.svg'; +import indent from './ic_indent_gestalt.svg'; import infoCircle from './ic_info-circle_gestalt.svg'; import information from './ic_information_gestalt.svg'; import insightsAudience from './ic_insights-audience_gestalt.svg'; import insightsConversion from './ic_insights-conversion_gestalt.svg'; import instagram from './ic_instagram_gestalt.svg'; import invoice from './ic_invoice_gestalt.svg'; +import kakaoTalk from './ic_kakao-talk_gestalt.svg'; import key from './ic_key_gestalt.svg'; import knoop from './ic_knoop_gestalt.svg'; import labFlask from './ic_lab-flask_gestalt.svg'; @@ -199,6 +202,8 @@ import lightningBoltCircle from './ic_lightning-bolt-circle_gestalt.svg'; import link from './ic_link_gestalt.svg'; import linkBroken from './ic_link-broken_gestalt.svg'; import lips from './ic_lips_gestalt.svg'; +import listNumbered from './ic_list-numbered_gestalt.svg'; +import listNumberedRtl from './ic_list-numbered-rtl_gestalt.svg'; import location from './ic_location_gestalt.svg'; import lock from './ic_lock_gestalt.svg'; import logoLarge from './ic_logo-large_gestalt.svg'; @@ -225,6 +230,7 @@ import mute from './ic_mute_gestalt.svg'; import muteFill from './ic_mute-fill_gestalt.svg'; import orientationLandscape from './ic_orientation-landscape_gestalt.svg'; import orientationPortrait from './ic_orientation-portrait_gestalt.svg'; +import outdent from './ic_outdent_gestalt.svg'; import outlook from './ic_outlook_gestalt.svg'; import overlayText from './ic_overlay-text_gestalt.svg'; import overlayTextOutline from './ic_overlay-text-outline_gestalt.svg'; @@ -243,6 +249,7 @@ import personMagnifyingGlass from './ic_person-magnifying-glass_gestalt.svg'; import phone from './ic_phone_gestalt.svg'; import pin from './ic_pin_gestalt.svg'; import pinHide from './ic_pin-hide_gestalt.svg'; +import pincode from './ic_pincode_gestalt.svg'; import pinterest from './ic_pinterest_gestalt.svg'; import play from './ic_play_gestalt.svg'; import protect from './ic_protect_gestalt.svg'; @@ -283,6 +290,7 @@ import shuffles from './ic_shuffles_gestalt.svg'; import skintone from './ic_skintone_gestalt.svg'; import slide from './ic_slide_gestalt.svg'; import smiley from './ic_smiley_gestalt.svg'; +import snapchat from './ic_snapchat_gestalt.svg'; import sortAscending from './ic_sort-ascending_gestalt.svg'; import sortDescending from './ic_sort-descending_gestalt.svg'; import sound from './ic_sound_gestalt.svg'; @@ -315,6 +323,7 @@ import table from './ic_table_gestalt.svg'; import tag from './ic_tag_gestalt.svg'; import tagStar from './ic_tag-star_gestalt.svg'; import target from './ic_target_gestalt.svg'; +import telegram from './ic_telegram_gestalt.svg'; import template from './ic_template_gestalt.svg'; import terms from './ic_terms_gestalt.svg'; import text from './ic_text_gestalt.svg'; @@ -342,6 +351,7 @@ import trending from './ic_trending_gestalt.svg'; import undo from './ic_undo_gestalt.svg'; import unlock from './ic_unlock_gestalt.svg'; import uploadFeed from './ic_upload-feed_gestalt.svg'; +import viber from './ic_viber_gestalt.svg'; import videoAdvance10Seconds from './ic_video-advance-10-seconds_gestalt.svg'; import videoCamera from './ic_video-camera_gestalt.svg'; import videoRewind10Seconds from './ic_video-rewind-10-seconds_gestalt.svg'; @@ -534,6 +544,7 @@ const icons = Object.freeze({ 'ghost': ghost, 'gif': gif, 'gif-visual': gifVisual, + 'gift': gift, 'globe': globe, 'globe-checked': globeChecked, 'gmail': gmail, @@ -553,12 +564,14 @@ const icons = Object.freeze({ 'idea-pin': ideaPin, 'image-portrait': imagePortrait, 'impressum': impressum, + 'indent': indent, 'info-circle': infoCircle, 'information': information, 'insights-audience': insightsAudience, 'insights-conversion': insightsConversion, 'instagram': instagram, 'invoice': invoice, + 'kakao-talk': kakaoTalk, 'key': key, 'knoop': knoop, 'lab-flask': labFlask, @@ -569,6 +582,8 @@ const icons = Object.freeze({ 'link': link, 'link-broken': linkBroken, 'lips': lips, + 'list-numbered': listNumbered, + 'list-numbered-rtl': listNumberedRtl, 'location': location, 'lock': lock, 'logo-large': logoLarge, @@ -595,6 +610,7 @@ const icons = Object.freeze({ 'mute-fill': muteFill, 'orientation-landscape': orientationLandscape, 'orientation-portrait': orientationPortrait, + 'outdent': outdent, 'outlook': outlook, 'overlay-text': overlayText, 'overlay-text-outline': overlayTextOutline, @@ -613,6 +629,7 @@ const icons = Object.freeze({ 'phone': phone, 'pin': pin, 'pin-hide': pinHide, + 'pincode': pincode, 'pinterest': pinterest, 'play': play, 'protect': protect, @@ -653,6 +670,7 @@ const icons = Object.freeze({ 'skintone': skintone, 'slide': slide, 'smiley': smiley, + 'snapchat': snapchat, 'sort-ascending': sortAscending, 'sort-descending': sortDescending, 'sound': sound, @@ -685,6 +703,7 @@ const icons = Object.freeze({ 'tag': tag, 'tag-star': tagStar, 'target': target, + 'telegram': telegram, 'template': template, 'terms': terms, 'text': text, @@ -712,6 +731,7 @@ const icons = Object.freeze({ 'undo': undo, 'unlock': unlock, 'upload-feed': uploadFeed, + 'viber': viber, 'video-advance-10-seconds': videoAdvance10Seconds, 'video-camera': videoCamera, 'video-rewind-10-seconds': videoRewind10Seconds, diff --git a/packages/gestalt-icons-android/src/vr-theme/ic_vr_gift_gestalt.svg b/packages/gestalt-icons-android/src/vr-theme/ic_vr_gift_gestalt.svg new file mode 100644 index 0000000000..38a05b5091 --- /dev/null +++ b/packages/gestalt-icons-android/src/vr-theme/ic_vr_gift_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/vr-theme/ic_vr_indent_gestalt.svg b/packages/gestalt-icons-android/src/vr-theme/ic_vr_indent_gestalt.svg new file mode 100644 index 0000000000..a0d7a3e903 --- /dev/null +++ b/packages/gestalt-icons-android/src/vr-theme/ic_vr_indent_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/vr-theme/ic_vr_kakao-talk_gestalt.svg b/packages/gestalt-icons-android/src/vr-theme/ic_vr_kakao-talk_gestalt.svg new file mode 100644 index 0000000000..4cfe7d70ec --- /dev/null +++ b/packages/gestalt-icons-android/src/vr-theme/ic_vr_kakao-talk_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/vr-theme/ic_vr_list-numbered-rtl_gestalt.svg b/packages/gestalt-icons-android/src/vr-theme/ic_vr_list-numbered-rtl_gestalt.svg new file mode 100644 index 0000000000..10d0f66d7b --- /dev/null +++ b/packages/gestalt-icons-android/src/vr-theme/ic_vr_list-numbered-rtl_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/vr-theme/ic_vr_list-numbered_gestalt.svg b/packages/gestalt-icons-android/src/vr-theme/ic_vr_list-numbered_gestalt.svg new file mode 100644 index 0000000000..9e90aa6025 --- /dev/null +++ b/packages/gestalt-icons-android/src/vr-theme/ic_vr_list-numbered_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/vr-theme/ic_vr_outdent_gestalt.svg b/packages/gestalt-icons-android/src/vr-theme/ic_vr_outdent_gestalt.svg new file mode 100644 index 0000000000..040ca8539c --- /dev/null +++ b/packages/gestalt-icons-android/src/vr-theme/ic_vr_outdent_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/vr-theme/ic_vr_pincode_gestalt.svg b/packages/gestalt-icons-android/src/vr-theme/ic_vr_pincode_gestalt.svg new file mode 100644 index 0000000000..8f6e7c06bf --- /dev/null +++ b/packages/gestalt-icons-android/src/vr-theme/ic_vr_pincode_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/vr-theme/ic_vr_snapchat_gestalt.svg b/packages/gestalt-icons-android/src/vr-theme/ic_vr_snapchat_gestalt.svg new file mode 100644 index 0000000000..715b71ad30 --- /dev/null +++ b/packages/gestalt-icons-android/src/vr-theme/ic_vr_snapchat_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/vr-theme/ic_vr_telegram_gestalt.svg b/packages/gestalt-icons-android/src/vr-theme/ic_vr_telegram_gestalt.svg new file mode 100644 index 0000000000..6350959126 --- /dev/null +++ b/packages/gestalt-icons-android/src/vr-theme/ic_vr_telegram_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/vr-theme/ic_vr_viber_gestalt.svg b/packages/gestalt-icons-android/src/vr-theme/ic_vr_viber_gestalt.svg new file mode 100644 index 0000000000..78a72f58cd --- /dev/null +++ b/packages/gestalt-icons-android/src/vr-theme/ic_vr_viber_gestalt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt-icons-android/src/vr-theme/index.ts b/packages/gestalt-icons-android/src/vr-theme/index.ts index c2a2264922..727b683a98 100644 --- a/packages/gestalt-icons-android/src/vr-theme/index.ts +++ b/packages/gestalt-icons-android/src/vr-theme/index.ts @@ -164,6 +164,7 @@ import gauge from './ic_vr_gauge_gestalt.svg'; import ghost from './ic_vr_ghost_gestalt.svg'; import gif from './ic_vr_gif_gestalt.svg'; import gifVisual from './ic_vr_gif-visual_gestalt.svg'; +import gift from './ic_vr_gift_gestalt.svg'; import globe from './ic_vr_globe_gestalt.svg'; import globeChecked from './ic_vr_globe-checked_gestalt.svg'; import gmail from './ic_vr_gmail_gestalt.svg'; @@ -183,12 +184,14 @@ import homeFill from './ic_vr_home-fill_gestalt.svg'; import ideaPin from './ic_vr_idea-pin_gestalt.svg'; import imagePortrait from './ic_vr_image-portrait_gestalt.svg'; import impressum from './ic_vr_impressum_gestalt.svg'; +import indent from './ic_vr_indent_gestalt.svg'; import infoCircle from './ic_vr_info-circle_gestalt.svg'; import information from './ic_vr_information_gestalt.svg'; import insightsAudience from './ic_vr_insights-audience_gestalt.svg'; import insightsConversion from './ic_vr_insights-conversion_gestalt.svg'; import instagram from './ic_vr_instagram_gestalt.svg'; import invoice from './ic_vr_invoice_gestalt.svg'; +import kakaoTalk from './ic_vr_kakao-talk_gestalt.svg'; import key from './ic_vr_key_gestalt.svg'; import knoop from './ic_vr_knoop_gestalt.svg'; import labFlask from './ic_vr_lab-flask_gestalt.svg'; @@ -199,6 +202,8 @@ import lightningBoltCircle from './ic_vr_lightning-bolt-circle_gestalt.svg'; import link from './ic_vr_link_gestalt.svg'; import linkBroken from './ic_vr_link-broken_gestalt.svg'; import lips from './ic_vr_lips_gestalt.svg'; +import listNumbered from './ic_vr_list-numbered_gestalt.svg'; +import listNumberedRtl from './ic_vr_list-numbered-rtl_gestalt.svg'; import location from './ic_vr_location_gestalt.svg'; import lock from './ic_vr_lock_gestalt.svg'; import logoLarge from './ic_vr_logo-large_gestalt.svg'; @@ -225,6 +230,7 @@ import mute from './ic_vr_mute_gestalt.svg'; import muteFill from './ic_vr_mute-fill_gestalt.svg'; import orientationLandscape from './ic_vr_orientation-landscape_gestalt.svg'; import orientationPortrait from './ic_vr_orientation-portrait_gestalt.svg'; +import outdent from './ic_vr_outdent_gestalt.svg'; import outlook from './ic_vr_outlook_gestalt.svg'; import overlayText from './ic_vr_overlay-text_gestalt.svg'; import overlayTextOutline from './ic_vr_overlay-text-outline_gestalt.svg'; @@ -243,6 +249,7 @@ import personMagnifyingGlass from './ic_vr_person-magnifying-glass_gestalt.svg'; import phone from './ic_vr_phone_gestalt.svg'; import pin from './ic_vr_pin_gestalt.svg'; import pinHide from './ic_vr_pin-hide_gestalt.svg'; +import pincode from './ic_vr_pincode_gestalt.svg'; import pinterest from './ic_vr_pinterest_gestalt.svg'; import play from './ic_vr_play_gestalt.svg'; import protect from './ic_vr_protect_gestalt.svg'; @@ -283,6 +290,7 @@ import shuffles from './ic_vr_shuffles_gestalt.svg'; import skintone from './ic_vr_skintone_gestalt.svg'; import slide from './ic_vr_slide_gestalt.svg'; import smiley from './ic_vr_smiley_gestalt.svg'; +import snapchat from './ic_vr_snapchat_gestalt.svg'; import sortAscending from './ic_vr_sort-ascending_gestalt.svg'; import sortDescending from './ic_vr_sort-descending_gestalt.svg'; import sound from './ic_vr_sound_gestalt.svg'; @@ -315,6 +323,7 @@ import table from './ic_vr_table_gestalt.svg'; import tag from './ic_vr_tag_gestalt.svg'; import tagStar from './ic_vr_tag-star_gestalt.svg'; import target from './ic_vr_target_gestalt.svg'; +import telegram from './ic_vr_telegram_gestalt.svg'; import template from './ic_vr_template_gestalt.svg'; import terms from './ic_vr_terms_gestalt.svg'; import text from './ic_vr_text_gestalt.svg'; @@ -342,6 +351,7 @@ import trending from './ic_vr_trending_gestalt.svg'; import undo from './ic_vr_undo_gestalt.svg'; import unlock from './ic_vr_unlock_gestalt.svg'; import uploadFeed from './ic_vr_upload-feed_gestalt.svg'; +import viber from './ic_vr_viber_gestalt.svg'; import videoAdvance10Seconds from './ic_vr_video-advance-10-seconds_gestalt.svg'; import videoCamera from './ic_vr_video-camera_gestalt.svg'; import videoRewind10Seconds from './ic_vr_video-rewind-10-seconds_gestalt.svg'; @@ -534,6 +544,7 @@ const icons = Object.freeze({ 'ghost': ghost, 'gif': gif, 'gif-visual': gifVisual, + 'gift': gift, 'globe': globe, 'globe-checked': globeChecked, 'gmail': gmail, @@ -553,12 +564,14 @@ const icons = Object.freeze({ 'idea-pin': ideaPin, 'image-portrait': imagePortrait, 'impressum': impressum, + 'indent': indent, 'info-circle': infoCircle, 'information': information, 'insights-audience': insightsAudience, 'insights-conversion': insightsConversion, 'instagram': instagram, 'invoice': invoice, + 'kakao-talk': kakaoTalk, 'key': key, 'knoop': knoop, 'lab-flask': labFlask, @@ -569,6 +582,8 @@ const icons = Object.freeze({ 'link': link, 'link-broken': linkBroken, 'lips': lips, + 'list-numbered': listNumbered, + 'list-numbered-rtl': listNumberedRtl, 'location': location, 'lock': lock, 'logo-large': logoLarge, @@ -595,6 +610,7 @@ const icons = Object.freeze({ 'mute-fill': muteFill, 'orientation-landscape': orientationLandscape, 'orientation-portrait': orientationPortrait, + 'outdent': outdent, 'outlook': outlook, 'overlay-text': overlayText, 'overlay-text-outline': overlayTextOutline, @@ -613,6 +629,7 @@ const icons = Object.freeze({ 'phone': phone, 'pin': pin, 'pin-hide': pinHide, + 'pincode': pincode, 'pinterest': pinterest, 'play': play, 'protect': protect, @@ -653,6 +670,7 @@ const icons = Object.freeze({ 'skintone': skintone, 'slide': slide, 'smiley': smiley, + 'snapchat': snapchat, 'sort-ascending': sortAscending, 'sort-descending': sortDescending, 'sound': sound, @@ -685,6 +703,7 @@ const icons = Object.freeze({ 'tag': tag, 'tag-star': tagStar, 'target': target, + 'telegram': telegram, 'template': template, 'terms': terms, 'text': text, @@ -712,6 +731,7 @@ const icons = Object.freeze({ 'undo': undo, 'unlock': unlock, 'upload-feed': uploadFeed, + 'viber': viber, 'video-advance-10-seconds': videoAdvance10Seconds, 'video-camera': videoCamera, 'video-rewind-10-seconds': videoRewind10Seconds, diff --git a/packages/gestalt/src/icons-vr-theme/gift.svg b/packages/gestalt/src/icons-vr-theme/gift.svg new file mode 100644 index 0000000000..38a05b5091 --- /dev/null +++ b/packages/gestalt/src/icons-vr-theme/gift.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons-vr-theme/indent.svg b/packages/gestalt/src/icons-vr-theme/indent.svg new file mode 100644 index 0000000000..a0d7a3e903 --- /dev/null +++ b/packages/gestalt/src/icons-vr-theme/indent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons-vr-theme/index.ts b/packages/gestalt/src/icons-vr-theme/index.ts index 8087fe139b..82699820d5 100644 --- a/packages/gestalt/src/icons-vr-theme/index.ts +++ b/packages/gestalt/src/icons-vr-theme/index.ts @@ -164,6 +164,7 @@ import gauge from './gauge.svg'; import ghost from './ghost.svg'; import gif from './gif.svg'; import gifVisual from './gif-visual.svg'; +import gift from './gift.svg'; import globe from './globe.svg'; import globeChecked from './globe-checked.svg'; import gmail from './gmail.svg'; @@ -183,12 +184,14 @@ import homeFill from './home-fill.svg'; import ideaPin from './idea-pin.svg'; import imagePortrait from './image-portrait.svg'; import impressum from './impressum.svg'; +import indent from './indent.svg'; import infoCircle from './info-circle.svg'; import information from './information.svg'; import insightsAudience from './insights-audience.svg'; import insightsConversion from './insights-conversion.svg'; import instagram from './instagram.svg'; import invoice from './invoice.svg'; +import kakaoTalk from './kakao-talk.svg'; import key from './key.svg'; import knoop from './knoop.svg'; import labFlask from './lab-flask.svg'; @@ -199,6 +202,8 @@ import lightningBoltCircle from './lightning-bolt-circle.svg'; import link from './link.svg'; import linkBroken from './link-broken.svg'; import lips from './lips.svg'; +import listNumbered from './list-numbered.svg'; +import listNumberedRtl from './list-numbered-rtl.svg'; import location from './location.svg'; import lock from './lock.svg'; import logoLarge from './logo-large.svg'; @@ -225,6 +230,7 @@ import mute from './mute.svg'; import muteFill from './mute-fill.svg'; import orientationLandscape from './orientation-landscape.svg'; import orientationPortrait from './orientation-portrait.svg'; +import outdent from './outdent.svg'; import outlook from './outlook.svg'; import overlayText from './overlay-text.svg'; import overlayTextOutline from './overlay-text-outline.svg'; @@ -243,6 +249,7 @@ import personMagnifyingGlass from './person-magnifying-glass.svg'; import phone from './phone.svg'; import pin from './pin.svg'; import pinHide from './pin-hide.svg'; +import pincode from './pincode.svg'; import pinterest from './pinterest.svg'; import play from './play.svg'; import protect from './protect.svg'; @@ -283,6 +290,7 @@ import shuffles from './shuffles.svg'; import skintone from './skintone.svg'; import slide from './slide.svg'; import smiley from './smiley.svg'; +import snapchat from './snapchat.svg'; import sortAscending from './sort-ascending.svg'; import sortDescending from './sort-descending.svg'; import sound from './sound.svg'; @@ -315,6 +323,7 @@ import table from './table.svg'; import tag from './tag.svg'; import tagStar from './tag-star.svg'; import target from './target.svg'; +import telegram from './telegram.svg'; import template from './template.svg'; import terms from './terms.svg'; import text from './text.svg'; @@ -342,6 +351,7 @@ import trending from './trending.svg'; import undo from './undo.svg'; import unlock from './unlock.svg'; import uploadFeed from './upload-feed.svg'; +import viber from './viber.svg'; import videoAdvance10Seconds from './video-advance-10-seconds.svg'; import videoCamera from './video-camera.svg'; import videoRewind10Seconds from './video-rewind-10-seconds.svg'; @@ -534,6 +544,7 @@ const icons = Object.freeze({ 'ghost': ghost, 'gif': gif, 'gif-visual': gifVisual, + 'gift': gift, 'globe': globe, 'globe-checked': globeChecked, 'gmail': gmail, @@ -553,12 +564,14 @@ const icons = Object.freeze({ 'idea-pin': ideaPin, 'image-portrait': imagePortrait, 'impressum': impressum, + 'indent': indent, 'info-circle': infoCircle, 'information': information, 'insights-audience': insightsAudience, 'insights-conversion': insightsConversion, 'instagram': instagram, 'invoice': invoice, + 'kakao-talk': kakaoTalk, 'key': key, 'knoop': knoop, 'lab-flask': labFlask, @@ -569,6 +582,8 @@ const icons = Object.freeze({ 'link': link, 'link-broken': linkBroken, 'lips': lips, + 'list-numbered': listNumbered, + 'list-numbered-rtl': listNumberedRtl, 'location': location, 'lock': lock, 'logo-large': logoLarge, @@ -595,6 +610,7 @@ const icons = Object.freeze({ 'mute-fill': muteFill, 'orientation-landscape': orientationLandscape, 'orientation-portrait': orientationPortrait, + 'outdent': outdent, 'outlook': outlook, 'overlay-text': overlayText, 'overlay-text-outline': overlayTextOutline, @@ -613,6 +629,7 @@ const icons = Object.freeze({ 'phone': phone, 'pin': pin, 'pin-hide': pinHide, + 'pincode': pincode, 'pinterest': pinterest, 'play': play, 'protect': protect, @@ -653,6 +670,7 @@ const icons = Object.freeze({ 'skintone': skintone, 'slide': slide, 'smiley': smiley, + 'snapchat': snapchat, 'sort-ascending': sortAscending, 'sort-descending': sortDescending, 'sound': sound, @@ -685,6 +703,7 @@ const icons = Object.freeze({ 'tag': tag, 'tag-star': tagStar, 'target': target, + 'telegram': telegram, 'template': template, 'terms': terms, 'text': text, @@ -712,6 +731,7 @@ const icons = Object.freeze({ 'undo': undo, 'unlock': unlock, 'upload-feed': uploadFeed, + 'viber': viber, 'video-advance-10-seconds': videoAdvance10Seconds, 'video-camera': videoCamera, 'video-rewind-10-seconds': videoRewind10Seconds, diff --git a/packages/gestalt/src/icons-vr-theme/kakao-talk.svg b/packages/gestalt/src/icons-vr-theme/kakao-talk.svg new file mode 100644 index 0000000000..4cfe7d70ec --- /dev/null +++ b/packages/gestalt/src/icons-vr-theme/kakao-talk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons-vr-theme/list-numbered-rtl.svg b/packages/gestalt/src/icons-vr-theme/list-numbered-rtl.svg new file mode 100644 index 0000000000..10d0f66d7b --- /dev/null +++ b/packages/gestalt/src/icons-vr-theme/list-numbered-rtl.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons-vr-theme/list-numbered.svg b/packages/gestalt/src/icons-vr-theme/list-numbered.svg new file mode 100644 index 0000000000..9e90aa6025 --- /dev/null +++ b/packages/gestalt/src/icons-vr-theme/list-numbered.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons-vr-theme/outdent.svg b/packages/gestalt/src/icons-vr-theme/outdent.svg new file mode 100644 index 0000000000..040ca8539c --- /dev/null +++ b/packages/gestalt/src/icons-vr-theme/outdent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons-vr-theme/pincode.svg b/packages/gestalt/src/icons-vr-theme/pincode.svg new file mode 100644 index 0000000000..8f6e7c06bf --- /dev/null +++ b/packages/gestalt/src/icons-vr-theme/pincode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons-vr-theme/snapchat.svg b/packages/gestalt/src/icons-vr-theme/snapchat.svg new file mode 100644 index 0000000000..715b71ad30 --- /dev/null +++ b/packages/gestalt/src/icons-vr-theme/snapchat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons-vr-theme/telegram.svg b/packages/gestalt/src/icons-vr-theme/telegram.svg new file mode 100644 index 0000000000..6350959126 --- /dev/null +++ b/packages/gestalt/src/icons-vr-theme/telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons-vr-theme/viber.svg b/packages/gestalt/src/icons-vr-theme/viber.svg new file mode 100644 index 0000000000..78a72f58cd --- /dev/null +++ b/packages/gestalt/src/icons-vr-theme/viber.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons/gift.svg b/packages/gestalt/src/icons/gift.svg new file mode 100644 index 0000000000..8a660bd66d --- /dev/null +++ b/packages/gestalt/src/icons/gift.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons/indent.svg b/packages/gestalt/src/icons/indent.svg new file mode 100644 index 0000000000..e8da97811e --- /dev/null +++ b/packages/gestalt/src/icons/indent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons/index.ts b/packages/gestalt/src/icons/index.ts index 8087fe139b..82699820d5 100644 --- a/packages/gestalt/src/icons/index.ts +++ b/packages/gestalt/src/icons/index.ts @@ -164,6 +164,7 @@ import gauge from './gauge.svg'; import ghost from './ghost.svg'; import gif from './gif.svg'; import gifVisual from './gif-visual.svg'; +import gift from './gift.svg'; import globe from './globe.svg'; import globeChecked from './globe-checked.svg'; import gmail from './gmail.svg'; @@ -183,12 +184,14 @@ import homeFill from './home-fill.svg'; import ideaPin from './idea-pin.svg'; import imagePortrait from './image-portrait.svg'; import impressum from './impressum.svg'; +import indent from './indent.svg'; import infoCircle from './info-circle.svg'; import information from './information.svg'; import insightsAudience from './insights-audience.svg'; import insightsConversion from './insights-conversion.svg'; import instagram from './instagram.svg'; import invoice from './invoice.svg'; +import kakaoTalk from './kakao-talk.svg'; import key from './key.svg'; import knoop from './knoop.svg'; import labFlask from './lab-flask.svg'; @@ -199,6 +202,8 @@ import lightningBoltCircle from './lightning-bolt-circle.svg'; import link from './link.svg'; import linkBroken from './link-broken.svg'; import lips from './lips.svg'; +import listNumbered from './list-numbered.svg'; +import listNumberedRtl from './list-numbered-rtl.svg'; import location from './location.svg'; import lock from './lock.svg'; import logoLarge from './logo-large.svg'; @@ -225,6 +230,7 @@ import mute from './mute.svg'; import muteFill from './mute-fill.svg'; import orientationLandscape from './orientation-landscape.svg'; import orientationPortrait from './orientation-portrait.svg'; +import outdent from './outdent.svg'; import outlook from './outlook.svg'; import overlayText from './overlay-text.svg'; import overlayTextOutline from './overlay-text-outline.svg'; @@ -243,6 +249,7 @@ import personMagnifyingGlass from './person-magnifying-glass.svg'; import phone from './phone.svg'; import pin from './pin.svg'; import pinHide from './pin-hide.svg'; +import pincode from './pincode.svg'; import pinterest from './pinterest.svg'; import play from './play.svg'; import protect from './protect.svg'; @@ -283,6 +290,7 @@ import shuffles from './shuffles.svg'; import skintone from './skintone.svg'; import slide from './slide.svg'; import smiley from './smiley.svg'; +import snapchat from './snapchat.svg'; import sortAscending from './sort-ascending.svg'; import sortDescending from './sort-descending.svg'; import sound from './sound.svg'; @@ -315,6 +323,7 @@ import table from './table.svg'; import tag from './tag.svg'; import tagStar from './tag-star.svg'; import target from './target.svg'; +import telegram from './telegram.svg'; import template from './template.svg'; import terms from './terms.svg'; import text from './text.svg'; @@ -342,6 +351,7 @@ import trending from './trending.svg'; import undo from './undo.svg'; import unlock from './unlock.svg'; import uploadFeed from './upload-feed.svg'; +import viber from './viber.svg'; import videoAdvance10Seconds from './video-advance-10-seconds.svg'; import videoCamera from './video-camera.svg'; import videoRewind10Seconds from './video-rewind-10-seconds.svg'; @@ -534,6 +544,7 @@ const icons = Object.freeze({ 'ghost': ghost, 'gif': gif, 'gif-visual': gifVisual, + 'gift': gift, 'globe': globe, 'globe-checked': globeChecked, 'gmail': gmail, @@ -553,12 +564,14 @@ const icons = Object.freeze({ 'idea-pin': ideaPin, 'image-portrait': imagePortrait, 'impressum': impressum, + 'indent': indent, 'info-circle': infoCircle, 'information': information, 'insights-audience': insightsAudience, 'insights-conversion': insightsConversion, 'instagram': instagram, 'invoice': invoice, + 'kakao-talk': kakaoTalk, 'key': key, 'knoop': knoop, 'lab-flask': labFlask, @@ -569,6 +582,8 @@ const icons = Object.freeze({ 'link': link, 'link-broken': linkBroken, 'lips': lips, + 'list-numbered': listNumbered, + 'list-numbered-rtl': listNumberedRtl, 'location': location, 'lock': lock, 'logo-large': logoLarge, @@ -595,6 +610,7 @@ const icons = Object.freeze({ 'mute-fill': muteFill, 'orientation-landscape': orientationLandscape, 'orientation-portrait': orientationPortrait, + 'outdent': outdent, 'outlook': outlook, 'overlay-text': overlayText, 'overlay-text-outline': overlayTextOutline, @@ -613,6 +629,7 @@ const icons = Object.freeze({ 'phone': phone, 'pin': pin, 'pin-hide': pinHide, + 'pincode': pincode, 'pinterest': pinterest, 'play': play, 'protect': protect, @@ -653,6 +670,7 @@ const icons = Object.freeze({ 'skintone': skintone, 'slide': slide, 'smiley': smiley, + 'snapchat': snapchat, 'sort-ascending': sortAscending, 'sort-descending': sortDescending, 'sound': sound, @@ -685,6 +703,7 @@ const icons = Object.freeze({ 'tag': tag, 'tag-star': tagStar, 'target': target, + 'telegram': telegram, 'template': template, 'terms': terms, 'text': text, @@ -712,6 +731,7 @@ const icons = Object.freeze({ 'undo': undo, 'unlock': unlock, 'upload-feed': uploadFeed, + 'viber': viber, 'video-advance-10-seconds': videoAdvance10Seconds, 'video-camera': videoCamera, 'video-rewind-10-seconds': videoRewind10Seconds, diff --git a/packages/gestalt/src/icons/kakao-talk.svg b/packages/gestalt/src/icons/kakao-talk.svg new file mode 100644 index 0000000000..9ae30acbc3 --- /dev/null +++ b/packages/gestalt/src/icons/kakao-talk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons/list-numbered-rtl.svg b/packages/gestalt/src/icons/list-numbered-rtl.svg new file mode 100644 index 0000000000..945111f2a3 --- /dev/null +++ b/packages/gestalt/src/icons/list-numbered-rtl.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons/list-numbered.svg b/packages/gestalt/src/icons/list-numbered.svg new file mode 100644 index 0000000000..f26996ac0d --- /dev/null +++ b/packages/gestalt/src/icons/list-numbered.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons/outdent.svg b/packages/gestalt/src/icons/outdent.svg new file mode 100644 index 0000000000..8d116763e1 --- /dev/null +++ b/packages/gestalt/src/icons/outdent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons/pincode.svg b/packages/gestalt/src/icons/pincode.svg new file mode 100644 index 0000000000..a595633d33 --- /dev/null +++ b/packages/gestalt/src/icons/pincode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons/snapchat.svg b/packages/gestalt/src/icons/snapchat.svg new file mode 100644 index 0000000000..19f89df465 --- /dev/null +++ b/packages/gestalt/src/icons/snapchat.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons/telegram.svg b/packages/gestalt/src/icons/telegram.svg new file mode 100644 index 0000000000..6350959126 --- /dev/null +++ b/packages/gestalt/src/icons/telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/gestalt/src/icons/viber.svg b/packages/gestalt/src/icons/viber.svg new file mode 100644 index 0000000000..ab24fe7f40 --- /dev/null +++ b/packages/gestalt/src/icons/viber.svg @@ -0,0 +1 @@ + \ No newline at end of file From 34cca822873b3dd448e038d1d1b48e47ab7deb7a Mon Sep 17 00:00:00 2001 From: Ravi Lingineni Date: Tue, 17 Sep 2024 15:43:53 -0700 Subject: [PATCH 2/4] wip: Add RTL Icon Swapping --- packages/gestalt/src/Icon.tsx | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/gestalt/src/Icon.tsx b/packages/gestalt/src/Icon.tsx index 1dbc65fa09..01dfaecbf0 100644 --- a/packages/gestalt/src/Icon.tsx +++ b/packages/gestalt/src/Icon.tsx @@ -65,7 +65,8 @@ type Props = { // @ts-expect-error - TS2322 - Type 'string[]' is not assignable to type 'readonly ("replace" | "search" | "link" | "text" | "dash" | "3D" | "3D-move" | "360" | "accessibility" | "ad" | "ad-group" | "add" | "add-circle" | "add-layout" | "add-pin" | "add-section" | ... 317 more ... | "wave")[]'. const IconNames: ReadonlyArray = Object.keys(icons); -const flipOnRtlIconNames = [ +const swapOnRtlIconNames: ReadonlyArray = ['360']; +const flipOnRtlIconNames: ReadonlyArray = [ 'ads-stats', 'ads-overview', 'arrow-back', @@ -81,7 +82,7 @@ const flipOnRtlIconNames = [ 'chevron-right-circle', 'directional-arrow-left', 'directional-arrow-right', - 'flipVertical', + 'flip-vertical', 'hand-pointing', 'link', 'mute', @@ -121,12 +122,32 @@ function Icon({ styles.icon, { [styles.iconBlock]: !inline }, ); + + /** + * Some RTL Icons, we need to swap to a completely new icon because they can't be flipped + * @param iconName + */ + function getFinalIcon(iconName?: keyof typeof icons): keyof typeof icons | undefined { + if (!iconName) { + return undefined; + } + const isRTL = document?.dir === 'rtl'; + + if (isRTL && swapOnRtlIconNames.includes(iconName)) { + return `${iconName}-rtl` as keyof typeof icons; + } + return iconName; + } + const isInExperiment = useInExperiment({ webExperimentName: 'web_gestalt_visualRefresh', mwebExperimentName: 'web_gestalt_visualRefresh', }); + + const iconToUse = getFinalIcon(icon); + const path = - (icon && (isInExperiment ? vrIcons : icons)[icon]) || + (iconToUse && (isInExperiment ? vrIcons : icons)[iconToUse]) || /* eslint-disable-next-line no-underscore-dangle */ (dangerouslySetSvgPath && dangerouslySetSvgPath.__path) || undefined; From af3871e5c268d0b2caa4993a472452b558e4c096 Mon Sep 17 00:00:00 2001 From: Ravi Lingineni Date: Thu, 19 Sep 2024 12:21:28 -0700 Subject: [PATCH 3/4] support list-numbered swaps --- .../rtl_guidelines/iconography.tsx | 30 +++++++++++++------ packages/gestalt/src/Icon.tsx | 18 +++++++---- 2 files changed, 34 insertions(+), 14 deletions(-) diff --git a/docs/pages/foundations/international_design/rtl_guidelines/iconography.tsx b/docs/pages/foundations/international_design/rtl_guidelines/iconography.tsx index eeff6b4403..6044516285 100644 --- a/docs/pages/foundations/international_design/rtl_guidelines/iconography.tsx +++ b/docs/pages/foundations/international_design/rtl_guidelines/iconography.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import cx from 'classnames'; import { Box, Flex, Heading, Icon, Image, Mask, Table, Text } from 'gestalt'; import { DOCS_COPY_MAX_WIDTH_PX } from '../../../../docs-components/consts'; import MainSection from '../../../../docs-components/MainSection'; @@ -22,6 +23,9 @@ export default function FormsLayoutOverview() { 'chevron-small-right', 'directional-arrow-left', 'directional-arrow-right', + 'list-numbered', + 'indent', + 'outdent', 'move-pin', 'reorder-images', 'send', @@ -30,27 +34,35 @@ export default function FormsLayoutOverview() { const generateIconRow = (iconName: IconName) => { if (!iconName) return null; + const swapIcons = ['list-numbered']; + + const shouldSwapIcon = swapIcons.includes(iconName); + return ( {iconName} - - - -
+
+ + +
+ +
+ + ); }; diff --git a/packages/gestalt/src/Icon.tsx b/packages/gestalt/src/Icon.tsx index 01dfaecbf0..8547251660 100644 --- a/packages/gestalt/src/Icon.tsx +++ b/packages/gestalt/src/Icon.tsx @@ -65,7 +65,7 @@ type Props = { // @ts-expect-error - TS2322 - Type 'string[]' is not assignable to type 'readonly ("replace" | "search" | "link" | "text" | "dash" | "3D" | "3D-move" | "360" | "accessibility" | "ad" | "ad-group" | "add" | "add-circle" | "add-layout" | "add-pin" | "add-section" | ... 317 more ... | "wave")[]'. const IconNames: ReadonlyArray = Object.keys(icons); -const swapOnRtlIconNames: ReadonlyArray = ['360']; +const swapOnRtlIconNames: ReadonlyArray = ['list-numbered']; const flipOnRtlIconNames: ReadonlyArray = [ 'ads-stats', 'ads-overview', @@ -84,8 +84,10 @@ const flipOnRtlIconNames: ReadonlyArray = [ 'directional-arrow-right', 'flip-vertical', 'hand-pointing', + 'indent', 'link', 'mute', + 'outdent', 'reorder-images', 'send', 'sound', @@ -127,13 +129,19 @@ function Icon({ * Some RTL Icons, we need to swap to a completely new icon because they can't be flipped * @param iconName */ - function getFinalIcon(iconName?: keyof typeof icons): keyof typeof icons | undefined { + function getFinalIconName(iconName?: keyof typeof icons): keyof typeof icons | undefined { if (!iconName) { return undefined; } - const isRTL = document?.dir === 'rtl'; - if (isRTL && swapOnRtlIconNames.includes(iconName)) { + if (!swapOnRtlIconNames.includes(iconName)) return iconName; + + // As a convention, text direction is defined in `dir` attribute of `html` tag of the document. + // The following check is done under the assuption of that convention. + const isRTL = typeof document === 'undefined' ? false : document?.dir === 'rtl'; + + // return the RTL version of the icon + if (isRTL && `${iconName}-rtl` in icons) { return `${iconName}-rtl` as keyof typeof icons; } return iconName; @@ -144,7 +152,7 @@ function Icon({ mwebExperimentName: 'web_gestalt_visualRefresh', }); - const iconToUse = getFinalIcon(icon); + const iconToUse = getFinalIconName(icon); const path = (iconToUse && (isInExperiment ? vrIcons : icons)[iconToUse]) || From c43379c766743b984d195b1b5270e6f9da0642ce Mon Sep 17 00:00:00 2001 From: Ravi Lingineni Date: Thu, 19 Sep 2024 12:38:38 -0700 Subject: [PATCH 4/4] Update Icon.tsx --- packages/gestalt/src/Icon.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/gestalt/src/Icon.tsx b/packages/gestalt/src/Icon.tsx index 8547251660..b5ad494613 100644 --- a/packages/gestalt/src/Icon.tsx +++ b/packages/gestalt/src/Icon.tsx @@ -136,9 +136,11 @@ function Icon({ if (!swapOnRtlIconNames.includes(iconName)) return iconName; - // As a convention, text direction is defined in `dir` attribute of `html` tag of the document. - // The following check is done under the assuption of that convention. - const isRTL = typeof document === 'undefined' ? false : document?.dir === 'rtl'; + // As a convention, text direction is defined in `dir` attribute of `html` tag of the document + const isRTL = + typeof document === 'undefined' + ? false + : document.querySelector('html')?.getAttribute('dir') === 'rtl'; // return the RTL version of the icon if (isRTL && `${iconName}-rtl` in icons) {