From fcc5cde78cb19d0dbc054b18d6d505a9c128eb04 Mon Sep 17 00:00:00 2001 From: Nathan Simpson Date: Thu, 9 Mar 2023 09:37:39 +1100 Subject: [PATCH] icon: Add `ChevronsUpDownIcon` and social icons (#1005) --- .changeset/mean-brooms-melt.md | 5 + docs/components/designSystemComponents.tsx | 7 + .../src/icon/__snapshots__/Icon.test.tsx.snap | 149 ++++++++++++++++++ .../src/icon/icons/ChevronsUpDownIcon.tsx | 10 ++ packages/react/src/icon/icons/EmailIcon.tsx | 6 + .../react/src/icon/icons/FacebookIcon.tsx | 6 + .../react/src/icon/icons/InstagramIcon.tsx | 6 + .../react/src/icon/icons/LinkedInIcon.tsx | 11 ++ packages/react/src/icon/icons/TwitterIcon.tsx | 6 + packages/react/src/icon/icons/WebsiteIcon.tsx | 6 + packages/react/src/icon/index.ts | 7 + packages/react/src/icon/utils.tsx | 14 ++ 12 files changed, 233 insertions(+) create mode 100644 .changeset/mean-brooms-melt.md create mode 100644 packages/react/src/icon/icons/ChevronsUpDownIcon.tsx create mode 100644 packages/react/src/icon/icons/EmailIcon.tsx create mode 100644 packages/react/src/icon/icons/FacebookIcon.tsx create mode 100644 packages/react/src/icon/icons/InstagramIcon.tsx create mode 100644 packages/react/src/icon/icons/LinkedInIcon.tsx create mode 100644 packages/react/src/icon/icons/TwitterIcon.tsx create mode 100644 packages/react/src/icon/icons/WebsiteIcon.tsx diff --git a/.changeset/mean-brooms-melt.md b/.changeset/mean-brooms-melt.md new file mode 100644 index 000000000000..7cd1e40390fb --- /dev/null +++ b/.changeset/mean-brooms-melt.md @@ -0,0 +1,5 @@ +--- +'@ag.ds-next/react': minor +--- + +icon: Add ChevronsUpDownIcon, EmailIcon, FacebookIcon, InstagramIcon, LinkedInIcon, WebsiteIcon and TwitterIcon. diff --git a/docs/components/designSystemComponents.tsx b/docs/components/designSystemComponents.tsx index d4f55e8ebb8f..d9be3c416401 100644 --- a/docs/components/designSystemComponents.tsx +++ b/docs/components/designSystemComponents.tsx @@ -90,16 +90,21 @@ export { ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, + ChevronsUpDownIcon, CloseIcon, CopyIcon, DownloadIcon, DeleteIcon, EditIcon, + EmailIcon, ExternalLinkIcon, + FacebookIcon, FilterIcon, HelpIcon, InfoIcon, InfoFilledIcon, + InstagramIcon, + LinkedInIcon, MenuIcon, PrintIcon, PlusIcon, @@ -111,9 +116,11 @@ export { SuccessIcon, ThumbsDownIcon, ThumbsUpIcon, + TwitterIcon, UploadIcon, WarningIcon, WarningFilledIcon, + WebsiteIcon, } from '@ag.ds-next/react/icon'; export { ProgressIndicator } from '@ag.ds-next/react/progress-indicator'; export { PageAlert, PageAlertTitle } from '@ag.ds-next/react/page-alert'; diff --git a/packages/react/src/icon/__snapshots__/Icon.test.tsx.snap b/packages/react/src/icon/__snapshots__/Icon.test.tsx.snap index e76838b222ac..34bbc80a3b41 100644 --- a/packages/react/src/icon/__snapshots__/Icon.test.tsx.snap +++ b/packages/react/src/icon/__snapshots__/Icon.test.tsx.snap @@ -287,6 +287,29 @@ exports[`Icon ChevronUpIcon renders correctly 1`] = ` `; +exports[`Icon ChevronsUpDownIcon renders correctly 1`] = ` +
+ +
+`; + exports[`Icon CloseIcon renders correctly 1`] = `
`; +exports[`Icon EmailIcon renders correctly 1`] = ` +
+ +
+`; + exports[`Icon ExternalLinkIcon renders correctly 1`] = `
`; +exports[`Icon FacebookIcon renders correctly 1`] = ` +
+ +
+`; + exports[`Icon FilterIcon renders correctly 1`] = `
`; +exports[`Icon InstagramIcon renders correctly 1`] = ` +
+ +
+`; + +exports[`Icon LinkedInIcon renders correctly 1`] = ` +
+ +
+`; + exports[`Icon MenuIcon renders correctly 1`] = `
`; +exports[`Icon TwitterIcon renders correctly 1`] = ` +
+ +
+`; + exports[`Icon UploadIcon renders correctly 1`] = `
`; + +exports[`Icon WebsiteIcon renders correctly 1`] = ` +
+ +
+`; diff --git a/packages/react/src/icon/icons/ChevronsUpDownIcon.tsx b/packages/react/src/icon/icons/ChevronsUpDownIcon.tsx new file mode 100644 index 000000000000..193bc749a58d --- /dev/null +++ b/packages/react/src/icon/icons/ChevronsUpDownIcon.tsx @@ -0,0 +1,10 @@ +import { Fragment } from 'react'; +import { createIcon } from '../Icon'; + +export const ChevronsUpDownIcon = createIcon( + + + + , + 'ChevronsUpDownIcon' +); diff --git a/packages/react/src/icon/icons/EmailIcon.tsx b/packages/react/src/icon/icons/EmailIcon.tsx new file mode 100644 index 000000000000..78dd7c263e6a --- /dev/null +++ b/packages/react/src/icon/icons/EmailIcon.tsx @@ -0,0 +1,6 @@ +import { createIcon } from '../Icon'; + +export const EmailIcon = createIcon( + , + 'EmailIcon' +); diff --git a/packages/react/src/icon/icons/FacebookIcon.tsx b/packages/react/src/icon/icons/FacebookIcon.tsx new file mode 100644 index 000000000000..caea12bca408 --- /dev/null +++ b/packages/react/src/icon/icons/FacebookIcon.tsx @@ -0,0 +1,6 @@ +import { createIcon } from '../Icon'; + +export const FacebookIcon = createIcon( + , + 'FacebookIcon' +); diff --git a/packages/react/src/icon/icons/InstagramIcon.tsx b/packages/react/src/icon/icons/InstagramIcon.tsx new file mode 100644 index 000000000000..a4cf66c57655 --- /dev/null +++ b/packages/react/src/icon/icons/InstagramIcon.tsx @@ -0,0 +1,6 @@ +import { createIcon } from '../Icon'; + +export const InstagramIcon = createIcon( + , + 'InstagramIcon' +); diff --git a/packages/react/src/icon/icons/LinkedInIcon.tsx b/packages/react/src/icon/icons/LinkedInIcon.tsx new file mode 100644 index 000000000000..a1948611248f --- /dev/null +++ b/packages/react/src/icon/icons/LinkedInIcon.tsx @@ -0,0 +1,11 @@ +import { Fragment } from 'react'; +import { createIcon } from '../Icon'; + +export const LinkedInIcon = createIcon( + + + + + , + 'LinkedInIcon' +); diff --git a/packages/react/src/icon/icons/TwitterIcon.tsx b/packages/react/src/icon/icons/TwitterIcon.tsx new file mode 100644 index 000000000000..0cdcfc8cc31d --- /dev/null +++ b/packages/react/src/icon/icons/TwitterIcon.tsx @@ -0,0 +1,6 @@ +import { createIcon } from '../Icon'; + +export const TwitterIcon = createIcon( + , + 'TwitterIcon' +); diff --git a/packages/react/src/icon/icons/WebsiteIcon.tsx b/packages/react/src/icon/icons/WebsiteIcon.tsx new file mode 100644 index 000000000000..618d73e7037a --- /dev/null +++ b/packages/react/src/icon/icons/WebsiteIcon.tsx @@ -0,0 +1,6 @@ +import { createIcon } from '../Icon'; + +export const WebsiteIcon = createIcon( + , + 'WebsiteIcon' +); diff --git a/packages/react/src/icon/index.ts b/packages/react/src/icon/index.ts index 9c99051ebfc2..a895e7324117 100644 --- a/packages/react/src/icon/index.ts +++ b/packages/react/src/icon/index.ts @@ -18,15 +18,20 @@ export { ChevronUpIcon } from './icons/ChevronUpIcon'; export { ChevronDownIcon } from './icons/ChevronDownIcon'; export { ChevronLeftIcon } from './icons/ChevronLeftIcon'; export { ChevronRightIcon } from './icons/ChevronRightIcon'; +export { ChevronsUpDownIcon } from './icons/ChevronsUpDownIcon'; export { CloseIcon } from './icons/CloseIcon'; export { CopyIcon } from './icons/CopyIcon'; export { DeleteIcon } from './icons/DeleteIcon'; export { DownloadIcon } from './icons/DownloadIcon'; export { EditIcon } from './icons/EditIcon'; +export { EmailIcon } from './icons/EmailIcon'; +export { FacebookIcon } from './icons/FacebookIcon'; export { FilterIcon } from './icons/FilterIcon'; export { HelpIcon } from './icons/HelpIcon'; export { InfoIcon } from './icons/InfoIcon'; export { InfoFilledIcon } from './icons/InfoFilledIcon'; +export { InstagramIcon } from './icons/InstagramIcon'; +export { LinkedInIcon } from './icons/LinkedInIcon'; export { PrintIcon } from './icons/PrintIcon'; export { PlusIcon } from './icons/PlusIcon'; export { ProgressBlockedIcon } from './icons/ProgressBlockedIcon'; @@ -38,7 +43,9 @@ export { SuccessIcon } from './icons/SuccessIcon'; export { SuccessFilledIcon } from './icons/SuccessFilledIcon'; export { ThumbsDownIcon } from './icons/ThumbsDownIcon'; export { ThumbsUpIcon } from './icons/ThumbsUpIcon'; +export { TwitterIcon } from './icons/TwitterIcon'; export { ProgressTodoIcon } from './icons/ProgressTodoIcon'; export { UploadIcon } from './icons/UploadIcon'; export { WarningIcon } from './icons/WarningIcon'; export { WarningFilledIcon } from './icons/WarningFilledIcon'; +export { WebsiteIcon } from './icons/WebsiteIcon'; diff --git a/packages/react/src/icon/utils.tsx b/packages/react/src/icon/utils.tsx index f2c5d5429fd7..b7e6ade91d79 100644 --- a/packages/react/src/icon/utils.tsx +++ b/packages/react/src/icon/utils.tsx @@ -11,18 +11,23 @@ import { ChevronDownIcon } from './icons/ChevronDownIcon'; import { ChevronLeftIcon } from './icons/ChevronLeftIcon'; import { ChevronRightIcon } from './icons/ChevronRightIcon'; import { ChevronUpIcon } from './icons/ChevronUpIcon'; +import { ChevronsUpDownIcon } from './icons/ChevronsUpDownIcon'; import { CloseIcon } from './icons/CloseIcon'; import { CopyIcon } from './icons/CopyIcon'; import { DeleteIcon } from './icons/DeleteIcon'; import { DownloadIcon } from './icons/DownloadIcon'; import { EditIcon } from './icons/EditIcon'; +import { EmailIcon } from './icons/EmailIcon'; import { ExternalLinkIcon } from './icons/ExternalLinkIcon'; import { InfoIcon } from './icons/InfoIcon'; +import { FacebookIcon } from './icons/FacebookIcon'; import { FilterIcon } from './icons/FilterIcon'; import { HelpIcon } from './icons/HelpIcon'; import { PlusIcon } from './icons/PlusIcon'; import { InfoFilledIcon } from './icons/InfoFilledIcon'; +import { InstagramIcon } from './icons/InstagramIcon'; import { MenuIcon } from './icons/MenuIcon'; +import { LinkedInIcon } from './icons/LinkedInIcon'; import { PrintIcon } from './icons/PrintIcon'; import { ProgressBlockedIcon } from './icons/ProgressBlockedIcon'; import { ProgressDoingIcon } from './icons/ProgressDoingIcon'; @@ -32,9 +37,11 @@ import { SuccessFilledIcon } from './icons/SuccessFilledIcon'; import { SuccessIcon } from './icons/SuccessIcon'; import { ThumbsDownIcon } from './icons/ThumbsDownIcon'; import { ThumbsUpIcon } from './icons/ThumbsUpIcon'; +import { TwitterIcon } from './icons/TwitterIcon'; import { UploadIcon } from './icons/UploadIcon'; import { WarningIcon } from './icons/WarningIcon'; import { WarningFilledIcon } from './icons/WarningFilledIcon'; +import { WebsiteIcon } from './icons/WebsiteIcon'; export const allIcons = { AlertFilledIcon, @@ -50,16 +57,21 @@ export const allIcons = { ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, + ChevronsUpDownIcon, CloseIcon, CopyIcon, DownloadIcon, DeleteIcon, EditIcon, + EmailIcon, ExternalLinkIcon, + FacebookIcon, FilterIcon, HelpIcon, InfoIcon, InfoFilledIcon, + InstagramIcon, + LinkedInIcon, MenuIcon, PrintIcon, PlusIcon, @@ -71,7 +83,9 @@ export const allIcons = { SuccessIcon, ThumbsDownIcon, ThumbsUpIcon, + TwitterIcon, UploadIcon, WarningIcon, WarningFilledIcon, + WebsiteIcon, };