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',
+ };
}
}
};