diff --git a/.changeset/soft-bees-smell.md b/.changeset/soft-bees-smell.md new file mode 100644 index 00000000000..5aeefc020de --- /dev/null +++ b/.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 + +``` diff --git a/packages/braid-design-system/icons/attachment.svg b/packages/braid-design-system/icons/attachment.svg new file mode 100644 index 00000000000..cd4272a9cb9 --- /dev/null +++ b/packages/braid-design-system/icons/attachment.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/braid-design-system/src/lib/components/icons/IconAttachment/IconAttachment.docs.tsx b/packages/braid-design-system/src/lib/components/icons/IconAttachment/IconAttachment.docs.tsx new file mode 100644 index 00000000000..b3056701467 --- /dev/null +++ b/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( + + + + + , + ), + alternatives: [], + additional: [iconDocumentation], +}; + +export default docs; diff --git a/packages/braid-design-system/src/lib/components/icons/IconAttachment/IconAttachment.tsx b/packages/braid-design-system/src/lib/components/icons/IconAttachment/IconAttachment.tsx new file mode 100644 index 00000000000..9d5f045ff73 --- /dev/null +++ b/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) => ( + + {(svgProps) => } + +); diff --git a/packages/braid-design-system/src/lib/components/icons/__snapshots__/icons.test.ts.snap b/packages/braid-design-system/src/lib/components/icons/__snapshots__/icons.test.ts.snap index 29b9fb1fb3a..e778afbcd89 100644 --- a/packages/braid-design-system/src/lib/components/icons/__snapshots__/icons.test.ts.snap +++ b/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) => ( + + {title ? {title} : null} + + +); +" +`; + exports[`IconBookmarkActiveSvg should match snapshot 1`] = ` "import React from 'react'; diff --git a/packages/braid-design-system/src/lib/components/icons/index.ts b/packages/braid-design-system/src/lib/components/icons/index.ts index 5ecb75af0e7..6b05805bcee 100644 --- a/packages/braid-design-system/src/lib/components/icons/index.ts +++ b/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'; diff --git a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap index 44c3d426f43..b874b0bfe8b 100644 --- a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap +++ b/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,