diff --git a/src/components/PlateNote/PlateNote.stories.tsx b/src/components/PlateNote/PlateNote.stories.tsx index b59c1b9..40ca14f 100644 --- a/src/components/PlateNote/PlateNote.stories.tsx +++ b/src/components/PlateNote/PlateNote.stories.tsx @@ -27,7 +27,14 @@ stories.add('simple', () => ( + + Type 'primary-info' + + Type 'warning' diff --git a/src/components/PlateNote/PlateNote.tsx b/src/components/PlateNote/PlateNote.tsx index 7820e66..8beff6f 100644 --- a/src/components/PlateNote/PlateNote.tsx +++ b/src/components/PlateNote/PlateNote.tsx @@ -3,7 +3,7 @@ import { getMainColor } from './helpers'; import { Flex, TFlexProps } from '../Flex/Flex'; import { Text, TTextProps } from '../Text/Text'; -export type TPlateNoteType = 'info' | 'warning' | 'error'; +export type TPlateNoteType = 'info' | 'warning' | 'error' | 'primary-info'; export type TPlateNote = TFlexProps & { type?: TPlateNoteType; @@ -18,7 +18,7 @@ export const PlateNote: React.FC = ({ children, ...rest }) => { - const mainColor = getMainColor(type); + const { mainColor, textColor } = getMainColor(type); return ( = ({ {text} diff --git a/src/components/PlateNote/helpers.ts b/src/components/PlateNote/helpers.ts index 6471a92..fc51597 100644 --- a/src/components/PlateNote/helpers.ts +++ b/src/components/PlateNote/helpers.ts @@ -1,15 +1,32 @@ import { TPlateNoteType } from './PlateNote'; -export const getMainColor = (type: TPlateNoteType): string => { +export const getMainColor = ( + type: TPlateNoteType +): { mainColor: string; textColor: string } => { switch (type) { case 'error': { - return 'danger.$300'; + return { + mainColor: 'danger.$300', + textColor: 'danger.$300', + }; } case 'warning': { - return 'warning.$500'; + return { + mainColor: 'warning.$500', + textColor: 'warning.$500', + }; + } + case 'primary-info': { + return { + mainColor: 'primary.$300', + textColor: 'standard.$0', + }; } default: { - return 'main.$500'; + return { + mainColor: 'main.$500', + textColor: 'main.$500', + }; } } };