diff --git a/libs/accounts/src/lib/accounts-table.tsx b/libs/accounts/src/lib/accounts-table.tsx index 42c6f8885..206215299 100644 --- a/libs/accounts/src/lib/accounts-table.tsx +++ b/libs/accounts/src/lib/accounts-table.tsx @@ -17,7 +17,8 @@ import { DropdownMenuContent, DropdownMenuGridTrigger, DropdownMenuItem, - Icon, + VegaIcon, + VegaIconNames, } from '@vegaprotocol/ui-toolkit'; import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit'; import { @@ -37,7 +38,6 @@ import type { AccountFields } from './accounts-data-provider'; import type { Asset } from '@vegaprotocol/types'; import BigNumber from 'bignumber.js'; import classNames from 'classnames'; -import { IconNames } from '@blueprintjs/icons'; const colorClass = (percentageUsed: number, neutral = false) => { return classNames({ @@ -266,7 +266,7 @@ export const AccountTable = forwardRef( colId="accounts-actions" headerName="" sortable={false} - minWidth={200} + maxWidth={200} type="rightAligned" cellRenderer={({ data, @@ -308,8 +308,8 @@ export const AccountTable = forwardRef( }} > - @@ -324,8 +324,8 @@ export const AccountTable = forwardRef( } > - @@ -341,8 +341,8 @@ export const AccountTable = forwardRef( }} > - diff --git a/libs/ui-toolkit/src/components/icon/icon.spec.tsx b/libs/ui-toolkit/src/components/icon/blueprint-icons/icon.spec.tsx similarity index 100% rename from libs/ui-toolkit/src/components/icon/icon.spec.tsx rename to libs/ui-toolkit/src/components/icon/blueprint-icons/icon.spec.tsx diff --git a/libs/ui-toolkit/src/components/icon/icon.stories.tsx b/libs/ui-toolkit/src/components/icon/blueprint-icons/icon.stories.tsx similarity index 100% rename from libs/ui-toolkit/src/components/icon/icon.stories.tsx rename to libs/ui-toolkit/src/components/icon/blueprint-icons/icon.stories.tsx diff --git a/libs/ui-toolkit/src/components/icon/icon.tsx b/libs/ui-toolkit/src/components/icon/blueprint-icons/icon.tsx similarity index 100% rename from libs/ui-toolkit/src/components/icon/icon.tsx rename to libs/ui-toolkit/src/components/icon/blueprint-icons/icon.tsx diff --git a/libs/ui-toolkit/src/components/icon/blueprint-icons/index.ts b/libs/ui-toolkit/src/components/icon/blueprint-icons/index.ts new file mode 100644 index 000000000..af77d84ef --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/blueprint-icons/index.ts @@ -0,0 +1 @@ +export * from './icon'; diff --git a/libs/ui-toolkit/src/components/icon/index.ts b/libs/ui-toolkit/src/components/icon/index.ts index af77d84ef..f02899246 100644 --- a/libs/ui-toolkit/src/components/icon/index.ts +++ b/libs/ui-toolkit/src/components/icon/index.ts @@ -1 +1,2 @@ -export * from './icon'; +export * from './blueprint-icons'; +export * from './vega-icons'; diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/index.ts b/libs/ui-toolkit/src/components/icon/vega-icons/index.ts new file mode 100644 index 000000000..97f2efc86 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/index.ts @@ -0,0 +1,3 @@ +export * from './vega-icon'; +export * from './vega-icon.stories'; +export * from './svg'; diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-breakdown.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-breakdown.svg new file mode 100644 index 000000000..8cdd097db --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-breakdown.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-copy.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-copy.svg new file mode 100644 index 000000000..7fbaa41c9 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-deposit.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-deposit.svg new file mode 100644 index 000000000..ed69475f6 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-deposit.svg @@ -0,0 +1,4 @@ + + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-edit.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-edit.svg new file mode 100644 index 000000000..176797242 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-forum.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-forum.svg new file mode 100644 index 000000000..3c91093f7 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-forum.svg @@ -0,0 +1,3 @@ + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-globe.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-globe.svg new file mode 100644 index 000000000..dbb191d13 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-globe.svg @@ -0,0 +1,3 @@ + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-linkedin.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-linkedin.svg new file mode 100644 index 000000000..7532ebce0 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-moon.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-moon.svg new file mode 100644 index 000000000..fe7feb598 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-moon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-open-external.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-open-external.svg new file mode 100644 index 000000000..65cb229eb --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-open-external.svg @@ -0,0 +1,3 @@ + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-question-mark.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-question-mark.svg new file mode 100644 index 000000000..db93e84ce --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-question-mark.svg @@ -0,0 +1,3 @@ + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-transfer.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-transfer.svg new file mode 100644 index 000000000..8d7d04806 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-transfer.svg @@ -0,0 +1,4 @@ + + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-twitter.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-twitter.svg new file mode 100644 index 000000000..d7e656b91 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-withdraw.svg b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-withdraw.svg new file mode 100644 index 000000000..0be576f39 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/icon-withdraw.svg @@ -0,0 +1,4 @@ + + + + diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/svg/index.ts b/libs/ui-toolkit/src/components/icon/vega-icons/svg/index.ts new file mode 100644 index 000000000..0012b4b37 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/svg/index.ts @@ -0,0 +1,59 @@ +import IconBreakdown from './icon-breakdown.svg'; +import IconCopy from './icon-copy.svg'; +import IconDeposit from './icon-deposit.svg'; +import IconWithdraw from './icon-withdraw.svg'; +import IconTransfer from './icon-transfer.svg'; +import IconEdit from './icon-edit.svg'; +import IconMoon from './icon-moon.svg'; +import IconGlobe from './icon-globe.svg'; +import IconLinkedIn from './icon-linkedin.svg'; +import IconTwitter from './icon-twitter.svg'; +import IconQuestionMark from './icon-question-mark.svg'; +import IconForum from './icon-forum.svg'; +import IconOpenExternal from './icon-open-external.svg'; + +export type { + IconBreakdown, + IconCopy, + IconDeposit, + IconWithdraw, + IconTransfer, + IconEdit, + IconMoon, + IconGlobe, + IconLinkedIn, + IconTwitter, + IconQuestionMark, +}; + +export enum VegaIconNames { + BREAKDOWN = 'breakdown', + COPY = 'copy', + DEPOSIT = 'deposit', + WITHDRAW = 'withdraw', + EDIT = 'edit', + TRANSFER = 'transfer', + FORUM = 'forum', + GLOBE = 'globe', + LINKEDIN = 'linkedin', + TWITTER = 'twitter', + MOON = 'moon', + OPEN_EXTERNAL = 'open-external', + QUESTION_MARK = 'question-mark', +} + +export const VegaIconNameMap: Record = { + breakdown: IconBreakdown, + copy: IconCopy, + deposit: IconDeposit, + withdraw: IconWithdraw, + transfer: IconTransfer, + edit: IconEdit, + moon: IconMoon, + globe: IconGlobe, + linkedin: IconLinkedIn, + twitter: IconTwitter, + 'question-mark': IconQuestionMark, + forum: IconForum, + 'open-external': IconOpenExternal, +}; diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.spec.tsx b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.spec.tsx new file mode 100644 index 000000000..eb3068bec --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.spec.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import { VegaIcon } from './vega-icon'; + +describe('VegaIcon', () => { + it('should render successfully', () => { + const { baseElement } = render(); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.stories.tsx b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.stories.tsx new file mode 100644 index 000000000..cbb566352 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.stories.tsx @@ -0,0 +1,27 @@ +import type { Story, Meta } from '@storybook/react'; +import type { VegaIconProps } from './vega-icon'; +import { VegaIcon } from './vega-icon'; + +export default { + component: VegaIcon, + title: 'VegaIcon', +} as Meta; + +const Template: Story = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + name: 'edit', +}; + +export const Bigger = Template.bind({}); +Bigger.args = { + name: 'deposit', + size: 8, +}; + +export const EvenBigger = Template.bind({}); +EvenBigger.args = { + name: 'withdraw', + size: 12, +}; diff --git a/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.tsx b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.tsx new file mode 100644 index 000000000..a769d3b86 --- /dev/null +++ b/libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.tsx @@ -0,0 +1,46 @@ +import classNames from 'classnames'; +import type { VegaIconNames } from './svg'; +import { VegaIconNameMap } from './svg'; +export * from './vega-icon'; + +export interface VegaIconProps { + name: VegaIconNames; + className?: string; + size?: 2 | 3 | 4 | 6 | 8 | 10 | 12 | 14 | 16; + ariaLabel?: string; +} + +export const VegaIcon = ({ + size = 4, + name, + className, + ariaLabel, +}: VegaIconProps) => { + const effectiveClassName = classNames( + 'inline-block', + 'fill-current', + 'align-text-bottom', + 'fill-current', + 'shrink-0', + { + 'w-2 h-2': size === 2, + 'w-3 h-3': size === 3, + 'w-4 h-4': size === 4, + 'w-6 h-6': size === 6, + 'w-8 h-8': size === 8, + 'w-10 h-10': size === 10, + 'w-12 h-12': size === 12, + 'w-14 h-14': size === 14, + 'w-16 h-16': size === 16, + }, + className + ); + return ( + {`icon-${name}`} + ); +};