LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

unify intents based on configured tailwind intents

Browse Source
This commit is contained in:
Dexter 2022-04-01 16:14:14 +01:00
parent a3951016d0
commit bb0cf7f575
5 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx
View File

@ -1,7 +1,7 @@
import { Tooltip } from '@vegaprotocol/ui-toolkit'; import { Tooltip } from '@vegaprotocol/ui-toolkit';
import type { StatFields } from '../../config/types'; import type { StatFields } from '../../config/types';
import { defaultFieldFormatter } from '../table-row'; import { defaultFieldFormatter } from '../table-row';
import { Card, Indicator, Variant } from '@vegaprotocol/ui-toolkit'; import { Card, Indicator, TailwindIntents } from '@vegaprotocol/ui-toolkit';
import { useMemo } from 'react'; import { useMemo } from 'react';
export const PromotedStatsItem = ({ export const PromotedStatsItem = ({
@ -15,9 +15,9 @@ export const PromotedStatsItem = ({
() => () =>
goodThreshold goodThreshold
? goodThreshold(value) ? goodThreshold(value)
? Variant.Success ? TailwindIntents.Success
: Variant.Danger : TailwindIntents.Danger
: Variant.Highlight, : TailwindIntents.Highlight,
[goodThreshold, value] [goodThreshold, value]
); );
return ( return (

10
libs/network-stats/src/components/table-row/table-row.tsx
View File

@ -1,7 +1,7 @@
import { Tooltip } from '@vegaprotocol/ui-toolkit'; import { Tooltip } from '@vegaprotocol/ui-toolkit';
import type { StatFields } from '../../config/types'; import type { StatFields } from '../../config/types';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { Indicator, Variant } from '@vegaprotocol/ui-toolkit'; import { Indicator, TailwindIntents } from '@vegaprotocol/ui-toolkit';
export const defaultFieldFormatter = (field: unknown) => export const defaultFieldFormatter = (field: unknown) =>
field === undefined ? 'no data' : field; field === undefined ? 'no data' : field;
@ -17,9 +17,9 @@ export const TableRow = ({
() => () =>
goodThreshold goodThreshold
? goodThreshold(value) ? goodThreshold(value)
? Variant.Success ? TailwindIntents.Success
: Variant.Danger : TailwindIntents.Danger
: Variant.Highlight, : TailwindIntents.Help,
[goodThreshold, value] [goodThreshold, value]
); );
return ( return (
@ -30,7 +30,7 @@ export const TableRow = ({
{formatter ? formatter(value) : defaultFieldFormatter(value)} {formatter ? formatter(value) : defaultFieldFormatter(value)}
</td> </td>
<td className="py-4 px-8"> <td className="py-4 px-8">
<Indicator variant={variant} /> <Indicator variant={TailwindIntents.Success} />
</td> </td>
</tr> </tr>
</Tooltip> </Tooltip>

4
libs/ui-toolkit/src/components/indicator/indicator.tsx
View File

@ -1,8 +1,8 @@
import classNames from 'classnames'; import classNames from 'classnames';
import type { Variant } from '../../utils/intent'; import type { TailwindIntents } from '../../utils/intent';
import { getVariantBackground } from '../../utils/intent'; import { getVariantBackground } from '../../utils/intent';
export const Indicator = ({ variant }: { variant?: Variant }) => { export const Indicator = ({ variant }: { variant?: TailwindIntents }) => {
const names = classNames( const names = classNames(
'inline-block w-8 h-8 mb-2 mr-8 rounded', 'inline-block w-8 h-8 mb-2 mr-8 rounded',
getVariantBackground(variant) getVariantBackground(variant)

4
libs/ui-toolkit/src/components/lozenge/lozenge.tsx
View File

@ -1,11 +1,11 @@
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import type { Variant } from '../../utils/intent';
import { getVariantBackground } from '../../utils/intent'; import { getVariantBackground } from '../../utils/intent';
import type { TailwindIntents } from '../../utils/intent';
interface LozengeProps { interface LozengeProps {
children: ReactNode; children: ReactNode;
variant?: Variant; variant?: TailwindIntents;
className?: string; className?: string;
details?: string; details?: string;
} }

21
libs/ui-toolkit/src/utils/intent.ts
View File

@ -9,10 +9,12 @@ export enum Intent {
Help = 'help', Help = 'help',
} }
export enum Variant { export enum TailwindIntents {
Success = 'success',
Warning = 'warning',
Danger = 'danger', Danger = 'danger',
Warning = 'warning',
Prompt = 'prompt',
Success = 'success',
Help = 'help',
Highlight = 'highlight', Highlight = 'highlight',
} }
@ -27,12 +29,13 @@ export const getIntentShadow = (intent?: Intent) => {
}); });
}; };
export const getVariantBackground = (variant?: Variant) => { export const getVariantBackground = (variant?: TailwindIntents) => {
return classNames({ return classNames({
'bg-intent-success text-black': variant === Variant.Success, 'bg-intent-danger text-white': variant === TailwindIntents.Danger,
'bg-intent-danger text-white': variant === Variant.Danger, 'bg-intent-warning text-black': variant === TailwindIntents.Warning,
'bg-intent-warning text-black': variant === Variant.Warning, 'bg-intent-prompt text-black': variant === TailwindIntents.Prompt,
'bg-intent-highlight text-black': variant === Variant.Highlight, 'bg-intent-success text-black': variant === TailwindIntents.Success,
'bg-intent-help text-white': !variant, 'bg-intent-help text-white': variant === TailwindIntents.Help,
'bg-intent-highlight text-black': variant === TailwindIntents.Highlight,
}); });
}; };