icons: Update and extend suite

.changeset/curvy-crabs-grow.md

@@ -0,0 +1,26 @@
+---
+'braid-design-system': minor
+---
+
+---
+new:
+  - IconBulletList
+  - IconNumberedList
+---
+
+Add new icons to represent other list types.
+Sits alongside `IconChecklist` which already exists.
+
+```tsx
+<IconBulletList />
+<IconNumberedList />
+```
+
+As a result we are deprecated `IconList` in favour of the more specific list types. The `IconList` will be removed in a future major version.
+
+### MIGRATION GUIDE
+
+```diff
+-<IconList />
++<IconBulletList />
+```

.changeset/new-hairs-laugh.md

@@ -0,0 +1,12 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - IconHeart
+  - IconLink
+  - IconLinkBroken
+---
+
+**IconHeart, IconLink, IconLinkBroken:** Update design

.changeset/serious-sloths-divide.md

@@ -0,0 +1,22 @@
+---
+'braid-design-system': minor
+---
+
+---
+new:
+  - IconBold
+  - IconItalic
+  - IconRedo
+  - IconTitle
+  - IconUndo
+---
+
+Add new icons to support rich text editors and formatting.
+
+```tsx
+<IconBold />
+<IconItalic />
+<IconTitle />
+<IconRedo />
+<IconUndo />
+```

packages/braid-design-system/src/lib/components/icons/IconBold/IconBold.docs.tsx

@@ -0,0 +1,21 @@
+import source from '@braid-design-system/source.macro';
+import type { ComponentDocs } from 'site/types';
+
+import { IconBold, Heading, Stack } from '../../';
+import { iconDocumentation } from '../iconCommon.docs';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconBold />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+  additional: [...iconDocumentation],
+};
+
+export default docs;

packages/braid-design-system/src/lib/components/icons/IconBold/IconBold.tsx

@@ -0,0 +1,12 @@
+import { Box } from '../../Box/Box';
+import { IconContainer, type IconContainerProps } from '../IconContainer';
+
+import { IconBoldSvg } from './IconBoldSvg';
+
+export type IconBoldProps = IconContainerProps;
+
+export const IconBold = (props: IconBoldProps) => (
+  <IconContainer {...props}>
+    {(svgProps) => <Box component={IconBoldSvg} {...svgProps} />}
+  </IconContainer>
+);

packages/braid-design-system/src/lib/components/icons/IconBulletList/IconBulletList.docs.tsx

@@ -0,0 +1,21 @@
+import source from '@braid-design-system/source.macro';
+import type { ComponentDocs } from 'site/types';
+
+import { IconBulletList, Heading, Stack } from '../../';
+import { iconDocumentation } from '../iconCommon.docs';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconBulletList />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+  additional: [...iconDocumentation],
+};
+
+export default docs;

packages/braid-design-system/src/lib/components/icons/IconBulletList/IconBulletList.tsx

@@ -0,0 +1,12 @@
+import { Box } from '../../Box/Box';
+import { IconContainer, type IconContainerProps } from '../IconContainer';
+
+import { IconBulletListSvg } from './IconBulletListSvg';
+
+export type IconBulletListProps = IconContainerProps;
+
+export const IconBulletList = (props: IconBulletListProps) => (
+  <IconContainer {...props}>
+    {(svgProps) => <Box component={IconBulletListSvg} {...svgProps} />}
+  </IconContainer>
+);

packages/braid-design-system/src/lib/components/icons/IconItalic/IconItalic.docs.tsx

@@ -0,0 +1,21 @@
+import source from '@braid-design-system/source.macro';
+import type { ComponentDocs } from 'site/types';
+
+import { IconItalic, Heading, Stack } from '../../';
+import { iconDocumentation } from '../iconCommon.docs';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconItalic />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+  additional: [...iconDocumentation],
+};
+
+export default docs;

packages/braid-design-system/src/lib/components/icons/IconItalic/IconItalic.tsx

@@ -0,0 +1,12 @@
+import { Box } from '../../Box/Box';
+import { IconContainer, type IconContainerProps } from '../IconContainer';
+
+import { IconItalicSvg } from './IconItalicSvg';
+
+export type IconItalicProps = IconContainerProps;
+
+export const IconItalic = (props: IconItalicProps) => (
+  <IconContainer {...props}>
+    {(svgProps) => <Box component={IconItalicSvg} {...svgProps} />}
+  </IconContainer>
+);

packages/braid-design-system/src/lib/components/icons/IconList/IconList.docs.tsx

@@ -1,11 +1,21 @@
 import source from '@braid-design-system/source.macro';
 import type { ComponentDocs } from 'site/types';
 
-import { IconList, Heading, Stack } from '../../';
+import { IconList, Heading, Stack, Text, TextLink } from '../../';
 import { iconDocumentation } from '../iconCommon.docs';
 
 const docs: ComponentDocs = {
   category: 'Icon',
+  deprecationWarning: (
+    <Text>
+      This component has been deprecated and will be removed in a future
+      release.
+      <br />
+      Please switch to{' '}
+      <TextLink href="/components/IconBulletList">IconBulletList</TextLink>{' '}
+      instead.
+    </Text>
+  ),
   Example: () =>
     source(
       <Stack space="none" align="center">

packages/braid-design-system/src/lib/components/icons/IconList/IconList.tsx

@@ -1,12 +1,32 @@
+import dedent from 'dedent';
+
 import { Box } from '../../Box/Box';
 import { IconContainer, type IconContainerProps } from '../IconContainer';
 
 import { IconListSvg } from './IconListSvg';
 
 export type IconListProps = IconContainerProps;
 
-export const IconList = (props: IconListProps) => (
-  <IconContainer {...props}>
-    {(svgProps) => <Box component={IconListSvg} {...svgProps} />}
-  </IconContainer>
-);
+/** @deprecated  Use `IconBulletList` instead */
+export const IconList = (props: IconListProps) => {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      dedent`
+        The \`IconList\` component is deprecated. Please use \`IconBulletList\` instead.
+            %c-<IconList />
+            %c+<IconBulletList />
+        %c
+      `,
+      'color: red',
+      'color: green',
+      'color: inherit',
+    );
+  }
+
+  return (
+    <IconContainer {...props}>
+      {(svgProps) => <Box component={IconListSvg} {...svgProps} />}
+    </IconContainer>
+  );
+};

packages/braid-design-system/src/lib/components/icons/IconNumberedList/IconNumberedList.docs.tsx

@@ -0,0 +1,21 @@
+import source from '@braid-design-system/source.macro';
+import type { ComponentDocs } from 'site/types';
+
+import { IconNumberedList, Heading, Stack } from '../../';
+import { iconDocumentation } from '../iconCommon.docs';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconNumberedList />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+  additional: [...iconDocumentation],
+};
+
+export default docs;

packages/braid-design-system/src/lib/components/icons/IconNumberedList/IconNumberedList.tsx

@@ -0,0 +1,12 @@
+import { Box } from '../../Box/Box';
+import { IconContainer, type IconContainerProps } from '../IconContainer';
+
+import { IconNumberedListSvg } from './IconNumberedListSvg';
+
+export type IconNumberedListProps = IconContainerProps;
+
+export const IconNumberedList = (props: IconNumberedListProps) => (
+  <IconContainer {...props}>
+    {(svgProps) => <Box component={IconNumberedListSvg} {...svgProps} />}
+  </IconContainer>
+);

packages/braid-design-system/src/lib/components/icons/IconRedo/IconRedo.docs.tsx

@@ -0,0 +1,21 @@
+import source from '@braid-design-system/source.macro';
+import type { ComponentDocs } from 'site/types';
+
+import { IconRedo, Heading, Stack } from '../../';
+import { iconDocumentation } from '../iconCommon.docs';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconRedo />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+  additional: [...iconDocumentation],
+};
+
+export default docs;

packages/braid-design-system/src/lib/components/icons/IconRedo/IconRedo.tsx

@@ -0,0 +1,12 @@
+import { Box } from '../../Box/Box';
+import { IconContainer, type IconContainerProps } from '../IconContainer';
+
+import { IconRedoSvg } from './IconRedoSvg';
+
+export type IconRedoProps = IconContainerProps;
+
+export const IconRedo = (props: IconRedoProps) => (
+  <IconContainer {...props}>
+    {(svgProps) => <Box component={IconRedoSvg} {...svgProps} />}
+  </IconContainer>
+);

packages/braid-design-system/src/lib/components/icons/IconTitle/IconTitle.docs.tsx

@@ -0,0 +1,21 @@
+import source from '@braid-design-system/source.macro';
+import type { ComponentDocs } from 'site/types';
+
+import { IconTitle, Heading, Stack } from '../../';
+import { iconDocumentation } from '../iconCommon.docs';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconTitle />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+  additional: [...iconDocumentation],
+};
+
+export default docs;

packages/braid-design-system/src/lib/components/icons/IconTitle/IconTitle.tsx

@@ -0,0 +1,12 @@
+import { Box } from '../../Box/Box';
+import { IconContainer, type IconContainerProps } from '../IconContainer';
+
+import { IconTitleSvg } from './IconTitleSvg';
+
+export type IconTitleProps = IconContainerProps;
+
+export const IconTitle = (props: IconTitleProps) => (
+  <IconContainer {...props}>
+    {(svgProps) => <Box component={IconTitleSvg} {...svgProps} />}
+  </IconContainer>
+);