IconPromote: Update semantic icon from sparkles to a megaphone

seek-oss · May 24, 2024 · dd80abf · dd80abf
1 parent 70c0001
commit dd80abf
Show file tree

Hide file tree

Showing 15 changed files with 71 additions and 72 deletions.
diff --git a/.changeset/curvy-students-design.md b/.changeset/curvy-students-design.md
@@ -0,0 +1,14 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - IconPromote
+---
+
+**IconPromote:** Update semantic icon from sparkles to a megaphone
+
+With the introduction of `IconAI` recently adopting the sparkles artwork (aligning with the industry trend), the `IconPromote` semantic is now updated to use a megaphone instead of sparkles.
+
+This change will run through all semantic usages, for example `Alert`, `Notice`, etc.
diff --git a/packages/braid-design-system/icons/promote.svg b/packages/braid-design-system/icons/promote.svg
diff --git a/packages/braid-design-system/src/lib/components/Accordion/Accordion.docs.tsx b/packages/braid-design-system/src/lib/components/Accordion/Accordion.docs.tsx
@@ -9,7 +9,7 @@ import {
   Text,
   TextLink,
   Strong,
-  IconPromote,
+  IconImage,
 } from '../';
 import { Placeholder } from '../../playroom/components';
 import { validSpaceValues } from './Accordion';
@@ -163,21 +163,21 @@ const docs: ComponentDocs = {
             <AccordionItem
               label="Accordion item 1"
               id="accordion_icon_1"
-              icon={<IconPromote />}
+              icon={<IconImage />}
             >
               <Placeholder height={80} />
             </AccordionItem>
             <AccordionItem
               label="Accordion item 2"
               id="accordion_icon_2"
-              icon={<IconPromote />}
+              icon={<IconImage />}
             >
               <Placeholder height={80} />
             </AccordionItem>
             <AccordionItem
               label="Accordion item 3"
               id="accordion_icon_3"
-              icon={<IconPromote />}
+              icon={<IconImage />}
             >
               <Placeholder height={80} />
             </AccordionItem>

diff --git a/packages/braid-design-system/src/lib/components/Accordion/Accordion.gallery.tsx b/packages/braid-design-system/src/lib/components/Accordion/Accordion.gallery.tsx
@@ -5,7 +5,7 @@ import {
   Accordion,
   AccordionItem,
   Badge,
-  IconPromote,
+  IconImage,
   Placeholder,
 } from '../../playroom/components';
 import type { ComponentExample } from 'site/types';
@@ -74,13 +74,13 @@ export const galleryItems: ComponentExample[] = [
     Example: () =>
       source(
         <Accordion size="standard" dividers={false}>
-          <AccordionItem label="Item 1" icon={<IconPromote />}>
+          <AccordionItem label="Item 1" icon={<IconImage />}>
             <Placeholder height={100} />
           </AccordionItem>
-          <AccordionItem label="Item 2" icon={<IconPromote />}>
+          <AccordionItem label="Item 2" icon={<IconImage />}>
             <Placeholder height={100} />
           </AccordionItem>
-          <AccordionItem label="Item 3" icon={<IconPromote />}>
+          <AccordionItem label="Item 3" icon={<IconImage />}>
             <Placeholder height={100} />
           </AccordionItem>
         </Accordion>,

diff --git a/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx b/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import type { ComponentScreenshot } from 'site/types';
-import { AccordionItem, Accordion, Badge, Text, IconPromote, Stack } from '../';
+import { AccordionItem, Accordion, Badge, Text, IconImage, Stack } from '../';
 import { Placeholder } from '../../playroom/components';
 import { Box } from '../Box/Box';
 import { debugTouchableAttrForDataProp } from '../private/touchable/debugTouchable';
@@ -428,7 +428,7 @@ export const screenshots: ComponentScreenshot = {
                 label="Label"
                 size="xsmall"
                 id={`${id}_1`}
-                icon={<IconPromote />}
+                icon={<IconImage />}
               >
                 <Text size="small">Content</Text>
               </AccordionItem>
@@ -438,7 +438,7 @@ export const screenshots: ComponentScreenshot = {
                 label="Label"
                 size="small"
                 id={`${id}_2`}
-                icon={<IconPromote />}
+                icon={<IconImage />}
               >
                 <Text size="small">Content</Text>
               </AccordionItem>
@@ -448,7 +448,7 @@ export const screenshots: ComponentScreenshot = {
                 label="Label"
                 size="standard"
                 id={`${id}_3`}
-                icon={<IconPromote />}
+                icon={<IconImage />}
               >
                 <Text size="small">Content</Text>
               </AccordionItem>
@@ -458,7 +458,7 @@ export const screenshots: ComponentScreenshot = {
                 label="Label"
                 size="large"
                 id={`${id}_4`}
-                icon={<IconPromote />}
+                icon={<IconImage />}
               >
                 <Text size="small">Content</Text>
               </AccordionItem>
@@ -491,7 +491,7 @@ export const screenshots: ComponentScreenshot = {
                 size="xsmall"
                 tone="secondary"
                 id={`${id}_1`}
-                icon={<IconPromote />}
+                icon={<IconImage />}
               >
                 <Text size="small">Content</Text>
               </AccordionItem>
@@ -502,7 +502,7 @@ export const screenshots: ComponentScreenshot = {
                 size="small"
                 tone="secondary"
                 id={`${id}_2`}
-                icon={<IconPromote />}
+                icon={<IconImage />}
               >
                 <Text size="small">Content</Text>
               </AccordionItem>
@@ -513,7 +513,7 @@ export const screenshots: ComponentScreenshot = {
                 size="standard"
                 tone="secondary"
                 id={`${id}_3`}
-                icon={<IconPromote />}
+                icon={<IconImage />}
               >
                 <Text size="small">Content</Text>
               </AccordionItem>
@@ -524,7 +524,7 @@ export const screenshots: ComponentScreenshot = {
                 size="large"
                 tone="secondary"
                 id={`${id}_4`}
-                icon={<IconPromote />}
+                icon={<IconImage />}
               >
                 <Text size="small">Content</Text>
               </AccordionItem>

diff --git a/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx b/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx
@@ -8,7 +8,7 @@ import {
   Text,
   Strong,
   TextLink,
-  IconPromote,
+  IconImage,
   Alert,
 } from '../';
 
@@ -157,7 +157,7 @@ const docs: ComponentDocs = {
       ),
       Example: () =>
         source(
-          <Heading level="2" icon={<IconPromote />}>
+          <Heading level="2" icon={<IconImage />}>
             Heading with an icon
           </Heading>,
         ),

diff --git a/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx b/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComponentExample } from 'site/types';
-import { Box, Heading, Stack, IconPromote } from '../';
+import { Box, Heading, Stack, IconImage } from '../';
 
 import source from '@braid-design-system/source.macro';
 
@@ -73,16 +73,16 @@ export const galleryItems: ComponentExample[] = [
     Example: () =>
       source(
         <Stack space="large">
-          <Heading level="1" icon={<IconPromote />}>
+          <Heading level="1" icon={<IconImage />}>
             Level 1 with icon
           </Heading>
-          <Heading level="2" icon={<IconPromote />}>
+          <Heading level="2" icon={<IconImage />}>
             Level 2 with icon
           </Heading>
-          <Heading level="3" icon={<IconPromote />}>
+          <Heading level="3" icon={<IconImage />}>
             Level 3 with icon
           </Heading>
-          <Heading level="4" icon={<IconPromote />}>
+          <Heading level="4" icon={<IconImage />}>
             Level 4 with icon
           </Heading>
         </Stack>,

diff --git a/packages/braid-design-system/src/lib/components/Heading/Heading.screenshots.tsx b/packages/braid-design-system/src/lib/components/Heading/Heading.screenshots.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, type ReactNode } from 'react';
 import type { ComponentScreenshot } from 'site/types';
 import { heading } from '../../css/typography.css';
-import { Box, Heading, IconPositive, IconPromote, Stack, Text } from '../';
+import { Box, Heading, IconPositive, IconImage, Stack, Text } from '../';
 import { textAlignments } from '../../utils/docsHelpers';
 import { BackgroundContrastTest } from '../../utils/BackgroundContrastTest';
 
@@ -130,7 +130,7 @@ export const screenshots: ComponentScreenshot = {
         <Stack space="large">
           {headingLevels.map((level) => (
             <Box key={level} background="neutralLight">
-              <Heading level={level} icon={<IconPromote />}>
+              <Heading level={level} icon={<IconImage />}>
                 Level {level} with icon
               </Heading>
             </Box>
@@ -147,7 +147,7 @@ export const screenshots: ComponentScreenshot = {
             <Heading
               level="3"
               align={alignment}
-              icon={<IconPromote />}
+              icon={<IconImage />}
               key={alignment}
             >
               {alignment}
@@ -163,7 +163,7 @@ export const screenshots: ComponentScreenshot = {
           <Heading
             level="3"
             align={['right', 'center', 'left']}
-            icon={<IconPromote />}
+            icon={<IconImage />}
           >
             Right aligned mobile, center on tablet, left on desktop
           </Heading>
@@ -181,7 +181,7 @@ export const screenshots: ComponentScreenshot = {
             <Fragment key={level}>
               <Box display="flex">
                 <Heading level={level}>
-                  <IconPromote />
+                  <IconImage />
                   <Box style={{ border: '1px solid red' }} />
                 </Heading>
                 <Heading level={level}>
@@ -190,13 +190,13 @@ export const screenshots: ComponentScreenshot = {
                 </Heading>
                 <Heading level={level}>
                   , Abc
-                  <IconPromote />
+                  <IconImage />
                   <Box style={{ border: '1px solid red' }} />
                 </Heading>
               </Box>
               <Box display="flex">
                 <Heading level={level}>
-                  <IconPromote />
+                  <IconImage />
                   <Box style={{ border: '1px solid red' }} />
                 </Heading>
                 <Heading level={level}>
@@ -205,7 +205,7 @@ export const screenshots: ComponentScreenshot = {
                 </Heading>
                 <Heading level={level}>
                   , เอบีซี
-                  <IconPromote />
+                  <IconImage />
                   <Box style={{ border: '1px solid red' }} />
                 </Heading>
               </Box>

diff --git a/packages/braid-design-system/src/lib/components/Tag/Tag.gallery.tsx b/packages/braid-design-system/src/lib/components/Tag/Tag.gallery.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComponentExample } from 'site/types';
-import { Tag, Inline, Text, TextLinkButton, IconPromote } from '../';
+import { Tag, Inline, Text, TextLinkButton, IconTag } from '../';
 import source from '@braid-design-system/source.macro';
 
 export const galleryItems: ComponentExample[] = [
@@ -17,7 +17,7 @@ export const galleryItems: ComponentExample[] = [
   {
     label: 'With an icon',
     background: 'surface',
-    Example: () => source(<Tag icon={<IconPromote />}>Tag</Tag>),
+    Example: () => source(<Tag icon={<IconTag />}>Tag</Tag>),
   },
   {
     label: 'Clearable',

diff --git a/packages/braid-design-system/src/lib/components/Text/Text.docs.tsx b/packages/braid-design-system/src/lib/components/Text/Text.docs.tsx
@@ -8,7 +8,7 @@ import {
   TextLink,
   Inline,
   List,
-  IconPromote,
+  IconImage,
   Alert,
 } from '../';
 import source from '@braid-design-system/source.macro';
@@ -240,7 +240,7 @@ const docs: ComponentDocs = {
         </>
       ),
       Example: () =>
-        source(<Text icon={<IconPromote />}>Text with an icon</Text>),
+        source(<Text icon={<IconImage />}>Text with an icon</Text>),
     },
     {
       label: 'Custom semantics',

diff --git a/packages/braid-design-system/src/lib/components/Text/Text.gallery.tsx b/packages/braid-design-system/src/lib/components/Text/Text.gallery.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Text, Stack, IconPromote } from '../';
+import { Box, Text, Stack, IconImage } from '../';
 import type { ComponentExample } from 'site/types';
 import source from '@braid-design-system/source.macro';
 
@@ -70,16 +70,16 @@ export const galleryItems: ComponentExample[] = [
     Example: () =>
       source(
         <Stack space="large">
-          <Text size="large" icon={<IconPromote />}>
+          <Text size="large" icon={<IconImage />}>
             Large with icon
           </Text>
-          <Text size="standard" icon={<IconPromote />}>
+          <Text size="standard" icon={<IconImage />}>
             Standard with icon
           </Text>
-          <Text size="small" icon={<IconPromote />}>
+          <Text size="small" icon={<IconImage />}>
             Small with icon
           </Text>
-          <Text size="xsmall" icon={<IconPromote />}>
+          <Text size="xsmall" icon={<IconImage />}>
             Xsmall with icon
           </Text>
         </Stack>,