From f87762a4e61270b002b28d07c810d0bd7e6d1f69 Mon Sep 17 00:00:00 2001 From: Felix Habib <33821218+felixhabib@users.noreply.github.com> Date: Tue, 29 Oct 2024 14:35:46 +1100 Subject: [PATCH] =?UTF-8?q?docs:=20Support=20icon=20keyword=20search=20in?= =?UTF-8?q?=20the=20icons=20=E2=80=9CBrowse=E2=80=9D=20tab=20=20(#1629)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../foundations/iconography/IconsBrowse.tsx | 9 +- .../foundations/iconography/iconsKeywords.ts | 171 ++++++++++++++++++ 2 files changed, 177 insertions(+), 3 deletions(-) create mode 100644 site/src/App/routes/foundations/iconography/iconsKeywords.ts diff --git a/site/src/App/routes/foundations/iconography/IconsBrowse.tsx b/site/src/App/routes/foundations/iconography/IconsBrowse.tsx index e14f44246f7..1173c04075f 100644 --- a/site/src/App/routes/foundations/iconography/IconsBrowse.tsx +++ b/site/src/App/routes/foundations/iconography/IconsBrowse.tsx @@ -11,14 +11,16 @@ import { Strong, } from 'braid-src/lib/components'; import { Overlay } from 'braid-src/lib/components/private/Overlay/Overlay'; +import { iconsKeywords } from './iconsKeywords'; import * as icons from 'braid-src/lib/components/icons'; import * as styles from './IconsBrowse.css'; -type IconName = keyof typeof icons; +export type IconName = keyof typeof icons; const iconNames = Object.keys(icons).map((icon) => ({ name: icon as IconName, displayName: icon.replace(/^Icon/, ''), + keywords: iconsKeywords[icon as IconName], })); const IconTile = ({ @@ -90,9 +92,10 @@ export const IconsBrowse = () => { setSearchTerm(searchText); const filteredList = iconNames.filter( - ({ name }) => + ({ name, keywords }) => searchText.length === 0 || - name.toLowerCase().indexOf(searchText.toLowerCase()) > -1, + name.toLowerCase().indexOf(searchText.toLowerCase()) > -1 || + keywords.some((keyword) => keyword.startsWith(searchText)), ); if (filteredList.length === 0) { diff --git a/site/src/App/routes/foundations/iconography/iconsKeywords.ts b/site/src/App/routes/foundations/iconography/iconsKeywords.ts new file mode 100644 index 00000000000..1725cf9c14f --- /dev/null +++ b/site/src/App/routes/foundations/iconography/iconsKeywords.ts @@ -0,0 +1,171 @@ +import type { IconName } from './IconsBrowse'; + +type NonEmptyArray = [T, ...T[]]; + +// Todo - automatically clear keywords array when relevant icon svg is changed +export const iconsKeywords: Record> = { + IconAI: ['gpt', 'artificial', 'smart', 'sparkle', 'stars'], + IconAdd: ['plus'], + IconArrow: ['up', 'down', 'left', 'right'], + IconAttachment: ['paperclip', 'clip', 'file'], + IconBookmark: ['save', 'ribbon'], + IconCareer: ['job', 'work', 'compass', 'safari'], + IconCategory: ['shapes'], + IconCaution: ['alert', 'warning', '!'], + IconChevron: ['down'], + IconClear: ['cross', 'delete', 'remove', 'x'], + IconCompany: ['business', 'building', 'enterprise'], + IconCompose: ['edit', 'pencil', 'paper'], + IconCopy: ['duplicate', 'clone', 'window'], + IconCreditCard: ['credit', 'card', 'debit', 'payment', 'bank'], + IconCritical: ['alert', 'warning', 'error', '!'], + IconDate: ['calendar', 'day', 'month', 'year'], + IconDelete: ['remove', 'trash', 'bin', 'x'], + IconDesktop: ['computer', 'pc', 'monitor', 'screen'], + IconDocument: ['paper', 'file'], + IconDocumentBroken: ['paper', 'file', 'broken'], + IconDownload: ['arrow', 'down', 'save', 'export'], + IconEdit: ['pencil', 'paper', 'pen'], + IconEducation: ['book', 'learning', 'study', 'read'], + IconEnlarge: ['expand', 'fullscreen', 'arrows', 'arrow', 'big'], + IconExperience: ['diamond', 'gem', 'special'], + IconFilter: ['funnel', 'sort', 'sliders', 'adjust'], + IconFlag: ['location', 'marker', 'pin'], + IconGift: ['present', 'box', 'surprise'], + IconGlobe: ['world', 'map', 'earth', 'planet'], + IconGrid: ['layout', 'table', 'box', 'boxes'], + IconHash: ['tag', 'pound', '#'], + IconHeart: ['love', 'like'], + IconHelp: ['question', 'about', '?'], + IconHistory: ['time', 'clock', 'past', 'back', 'rewind'], + IconHome: ['house', 'building'], + IconImage: [ + 'picture', + 'photo', + 'camera', + 'background', + 'wallpaper', + 'landscape', + ], + IconInfo: ['information', 'i', 'circle'], + IconInvoice: ['bill', 'payment', 'receipt'], + IconLanguage: ['translate', 'letters'], + IconLink: ['chain'], + IconLinkBroken: ['brokenlink', 'chain', 'broken', 'error'], + IconList: ['lines', 'queue', 'stack'], + IconLocation: ['pin', 'marker', 'place', 'map', 'gps'], + IconMail: ['envelope', 'letter', 'message'], + IconMessage: ['chat', 'bubble', 'comment'], + IconMinus: ['remove', 'delete', 'subtract', '-'], + IconMobile: ['phone', 'cellphone', 'device', 'iphone', 'android'], + IconMoney: [ + 'cash', + 'dollar', + 'bill', + 'payment', + 'bank', + '$', + 'note', + 'currency', + ], + IconNewWindow: ['window', 'open', 'external', 'link'], + IconNote: ['paper', 'document', 'file'], + IconNotification: ['alert', 'warning', 'bell', 'ring', 'alarm'], + IconOverflow: ['more', 'dots', 'menu'], + IconPeople: ['users', 'group', 'team'], + IconPersonAdd: ['person', 'user', 'add', 'add person', 'plus'], + IconPersonVerified: ['person', 'user', 'verified', 'check', 'tick', 'shield'], + IconPhone: ['call', 'telephone', 'mobile', 'home', 'landline'], + IconPlatformAndroid: ['platform', 'android', 'google', 'mobile', 'phone'], + IconPlatformApple: [ + 'platform', + 'apple', + 'ios', + 'iphone', + 'ipad', + 'mac', + 'mobile', + 'phone', + ], + IconPositive: [ + 'tick', + 'check', + 'success', + 'done', + 'complete', + 'correct', + 'alert', + ], + IconPrint: ['paper', 'document', 'file'], + IconProfile: ['person', 'user', 'account'], + IconPromote: ['announcement', 'stars', 'highlight', 'alert'], + IconRecommended: ['star', 'favourite', 'like', 'love', 'badge'], + IconRefresh: ['reload', 'sync', 'update'], + IconResume: ['cv', 'curriculum vitae', 'paper', 'document'], + IconRocket: ['launch', 'blast', 'space', 'ship'], + IconSearch: ['magnifying glass', 'magnify', 'find', 'look'], + IconSecurity: ['lock', 'protection', 'safe', 'secure'], + IconSend: ['paper', 'plane', 'airmail', 'mail', 'message'], + IconSent: ['reply', 'arrow'], + IconSentiment: [ + 'smiley', + 'face', + 'emoji', + 'mood', + 'negative', + 'neutral', + 'positive', + ], + IconSettings: ['cog', 'gear', 'preferences', 'options'], + IconShare: ['arrow', 'up', 'forward', 'send'], + IconSkills: ['lightning', 'bolt', 'flash'], + IconSocialFacebook: ['social', 'facebook', 'network'], + IconSocialGitHub: ['social', 'github', 'network', 'git', 'code'], + IconSocialInstagram: ['social', 'instagram', 'network'], + IconSocialLinkedIn: ['social', 'linkedin', 'network'], + IconSocialMedium: ['social', 'medium', 'network', 'blog', 'article'], + IconSocialX: ['social', 'twitter', 'network', 'x'], + IconSocialYouTube: ['social', 'youtube', 'network', 'video', 'google'], + IconSort: [ + 'order', + 'filter', + 'funnel', + 'sliders', + 'adjust', + 'arrow', + 'up', + 'down', + 'arrange', + ], + IconStar: ['favourite', 'like', 'love', 'badge'], + IconStatistics: [ + 'chart', + 'graph', + 'analytics', + 'data', + 'trend', + 'up', + 'increase', + ], + IconSubCategory: ['category', 'folder', 'directory', 'arrow', 'sub'], + IconTag: ['label'], + IconThumb: [ + 'up', + 'like', + 'love', + 'positive', + 'success', + 'done', + 'complete', + 'correct', + ], + IconTick: ['check', 'success', 'done', 'complete', 'correct'], + IconTime: ['clock', 'past', 'back', 'rewind'], + IconTip: ['lightbulb', 'idea'], + IconUpload: ['arrow', 'up', 'forward', 'send'], + IconVideo: ['camera', 'movie', 'film', 'play'], + IconVisibility: ['eye', 'show', 'hide'], + IconWorkExperience: ['work', 'experience', 'briefcase', 'case', 'bag'], + IconZoomIn: ['zoom', 'in', 'magnify', 'find', 'look', '+'], + IconZoomOut: ['zoom', 'out', 'magnify', 'find', 'look', '-'], +};