IconAttachment: Add component (#1635)

.changeset/soft-bees-smell.md

@@ -0,0 +1,17 @@
+---
+'braid-design-system': minor
+---
+
+---
+new:
+  - IconAttachment
+---
+
+**IconAttachment:** Add component
+
+Add `IconAttachment` to icon suite
+
+**EXAMPLE USAGE:**
+```jsx
+<IconAttachment />
+```

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '../../Box/Box';
+import { IconContainer, type IconContainerProps } from '../IconContainer';
+import { IconAttachmentSvg } from './IconAttachmentSvg';
+
+export type IconAttachmentProps = IconContainerProps;
+
+export const IconAttachment = (props: IconAttachmentProps) => (
+  <IconContainer {...props}>
+    {(svgProps) => <Box component={IconAttachmentSvg} {...svgProps} />}
+  </IconContainer>
+);

packages/braid-design-system/src/lib/components/icons/__snapshots__/icons.test.ts.snap

@@ -70,6 +70,34 @@ export const IconArrowSvg = ({ title, titleId, ...props }: SVGProps) => (
 "
 `;
 
+exports[`IconAttachmentSvg should match snapshot 1`] = `
+"import React from 'react';
+
+import type { SVGProps } from '../SVGTypes';
+
+export const IconAttachmentSvg = ({ title, titleId, ...props }: SVGProps) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    focusable="false"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.033 4c-.662 0-1.296.263-1.764.73l-8.026 8.027a4.243 4.243 0 0 0 6 6l8.026-8.026a1 1 0 0 1 1.414 1.415l-8.026 8.026a6.243 6.243 0 1 1-8.828-8.83l8.026-8.025a4.495 4.495 0 1 1 6.357 6.357L11.177 17.7a2.749 2.749 0 0 1-3.886-3.886l7.415-7.406a1 1 0 0 1 1.414 1.415l-7.414 7.405a.75.75 0 0 0 .528 1.277.748.748 0 0 0 .529-.22l8.035-8.025A2.497 2.497 0 0 0 16.033 4Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+"
+`;
+
 exports[`IconBookmarkActiveSvg should match snapshot 1`] = `
 "import React from 'react';
 

packages/braid-design-system/src/lib/components/icons/index.ts

@@ -1,6 +1,7 @@
 export { IconAI } from './IconAI/IconAI';
 export { IconAdd } from './IconAdd/IconAdd';
 export { IconArrow } from './IconArrow/IconArrow';
+export { IconAttachment } from './IconAttachment/IconAttachment';
 export { IconBookmark } from './IconBookmark/IconBookmark';
 export { IconCareer } from './IconCareer/IconCareer';
 export { IconCategory } from './IconCategory/IconCategory';

packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap

@@ -3613,6 +3613,37 @@ exports[`IconArrow 1`] = `
 }
 `;
 
+exports[`IconAttachment 1`] = `
+{
+  exportType: component,
+  props: {
+    alignY?: 
+        | "lowercase"
+        | "uppercase"
+    data?: DataAttributeMap
+    size?: 
+        | "fill"
+        | "large"
+        | "small"
+        | "standard"
+        | "xsmall"
+    title?: string
+    titleId?: string
+    tone?: 
+        | "brandAccent"
+        | "caution"
+        | "critical"
+        | "formAccent"
+        | "info"
+        | "link"
+        | "neutral"
+        | "positive"
+        | "promote"
+        | "secondary"
+},
+}
+`;
+
 exports[`IconBookmark 1`] = `
 {
   exportType: component,