Skip to content
This repository was archived by the owner on Dec 1, 2025. It is now read-only.

Commit 14f4a41

Browse files
d4lekd4lek
committed
icons and core components updated with fill prop on ColorsProps and new buttons in layout
1 parent c73bb9b commit 14f4a41

21 files changed

Lines changed: 258 additions & 101 deletions

File tree

‎packages/core/src/components/globals/globals.module.scss‎

Lines changed: 119 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -776,10 +776,14 @@
776776

777777
/* color background */
778778

779-
.color-background {
779+
.color-white {
780780
color: $white !important;
781781
}
782782

783+
.color-black {
784+
color: $black !important;
785+
}
786+
783787
/* color primary */
784788

785789
.color-primary-1 {
@@ -884,6 +888,120 @@
884888
color: $colors-danger-2 !important;
885889
}
886890

891+
/* FILL FOR SVG */
892+
893+
.fill-white {
894+
fill: $white !important;
895+
}
896+
897+
.fill-black {
898+
fill: $black !important;
899+
}
900+
901+
/* fill primary */
902+
903+
.fill-primary-1 {
904+
fill: $colors-primary-1 !important;
905+
}
906+
907+
.fill-primary-2 {
908+
fill: $colors-primary-3 !important;
909+
}
910+
911+
.fill-primary-3 {
912+
fill: $colors-primary-3 !important;
913+
}
914+
915+
.fill-primary-4 {
916+
fill: $colors-primary-4 !important;
917+
}
918+
919+
.fill-primary-a1 {
920+
fill: $colors-primary-a1 !important;
921+
}
922+
923+
.fill-primary-a2 {
924+
fill: $colors-primary-a2 !important;
925+
}
926+
927+
/* color neutral */
928+
929+
.fill-neutral-1 {
930+
fill: $colors-neutral-1 !important;
931+
}
932+
933+
.fill-neutral-2 {
934+
fill: $colors-neutral-2 !important;
935+
}
936+
937+
.fill-neutral-3 {
938+
fill: $colors-neutral-3 !important;
939+
}
940+
941+
.fill-neutral-4 {
942+
fill: $colors-neutral-4 !important;
943+
}
944+
945+
.fill-neutral-5 {
946+
fill: $colors-neutral-5 !important;
947+
}
948+
949+
.fill-neutral-6 {
950+
fill: $colors-neutral-6 !important;
951+
}
952+
953+
.fill-neutral-7 {
954+
fill: $colors-neutral-7 !important;
955+
}
956+
957+
.fill-neutral-8 {
958+
fill: $colors-neutral-8 !important;
959+
}
960+
961+
.fill-neutral-a1 {
962+
fill: $colors-neutral-a1 !important;
963+
}
964+
965+
.fill-neutral-a2 {
966+
fill: $colors-neutral-a2 !important;
967+
}
968+
969+
/* color accents */
970+
971+
.fill-accents-1 {
972+
fill: $colors-accents-1 !important;
973+
}
974+
975+
.fill-accents-2 {
976+
fill: $colors-accents-2 !important;
977+
}
978+
979+
/* color success */
980+
981+
.fill-success-1 {
982+
fill: $colors-success-1 !important;
983+
}
984+
985+
/* color warning */
986+
987+
.fill-warning-1 {
988+
fill: $colors-warning-1 !important;
989+
}
990+
991+
.fill-warning-a1 {
992+
fill: $colors-warning-a1 !important;
993+
}
994+
995+
/* color danger */
996+
997+
.fill-danger-1 {
998+
fill: $colors-danger-1 !important;
999+
}
1000+
1001+
.fill-danger-2 {
1002+
fill: $colors-danger-2 !important;
1003+
}
1004+
8871005
/* cursor */
8881006

8891007
.cursor-pointer {

‎packages/core/src/components/globals/globals.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@ export type ColorsWarning = 'warning.1' | 'warning.a1';
5555
export type ColorsDanger = 'danger.1' | 'danger.2';
5656

5757
export type ColorsFullRange =
58-
| 'background'
58+
| 'white'
59+
| 'black'
5960
| ColorsPrimary
6061
| ColorsNeutral
6162
| ColorsAccents
@@ -69,6 +70,7 @@ export type BackgroundProps = Partial<{
6970

7071
export type ColorProps = Partial<{
7172
color: ColorsFullRange;
73+
fill: ColorsFullRange;
7274
}>;
7375

7476
export type TypographyProps = Partial<{

‎packages/icons/src/icons.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
2-
import { useClassNames, SpaceProps } from '@tpr/core';
2+
import { useClassNames, SpaceProps, ColorProps } from '@tpr/core';
33

44
type SVGProps = Partial<{
55
/** space props */
6-
cfg: SpaceProps;
6+
cfg: SpaceProps | ColorProps;
77
/** svg fill colour */
88
fill: string;
99
/** svg stroke colour */
@@ -20,7 +20,7 @@ type SVGProps = Partial<{
2020

2121
export const SVG: React.FC<SVGProps> = ({
2222
cfg,
23-
fill = '#000',
23+
fill = '',
2424
stroke = '',
2525
width = '24',
2626
className,

‎packages/layout/src/components/beta/beta.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const BetaHeader: React.FC<BetaHeaderProps> = ({ text }) => {
1717
<P
1818
cfg={{
1919
fontSize: 1,
20-
color: 'background',
20+
color: 'white',
2121
bg: 'primary.3',
2222
p: 1,
2323
my: 2,

‎packages/layout/src/components/buttons/buttons.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import React, { ChangeEvent } from 'react';
2-
import { Flex, P, Button, ButtonProps } from '@tpr/core';
2+
import { Flex, Button, ButtonProps, ColorProps } from '@tpr/core';
33
import { ArrowIcon } from './icons';
44
import styles from './buttons.module.scss';
55

6-
// TODO: update icon colors from the theming variables once ready.
7-
8-
interface ArrowButtonProps extends ButtonProps {
6+
export interface ArrowButtonProps extends ButtonProps {
97
title: string;
108
loadingMessage?: string;
119
type?: 'button' | 'submit';
12-
onClick: (evt: ChangeEvent<HTMLInputElement>) => void;
10+
onClick?: (evt: ChangeEvent<HTMLInputElement>) => void;
1311
pointsTo?: 'left' | 'up' | 'right' | 'down';
1412
iconSide?: 'left' | 'right';
13+
iconColor?: ColorProps['fill'];
1514
}
1615
export const ArrowButton: React.FC<ArrowButtonProps> = ({
1716
intent,
@@ -25,6 +24,7 @@ export const ArrowButton: React.FC<ArrowButtonProps> = ({
2524
pointsTo = 'left',
2625
iconSide = 'left',
2726
testId,
27+
iconColor = 'white',
2828
}) => {
2929
return (
3030
<Button
@@ -48,11 +48,11 @@ export const ArrowButton: React.FC<ArrowButtonProps> = ({
4848
}}
4949
>
5050
{iconSide === 'left' && (
51-
<ArrowIcon pointsTo={pointsTo} fill="white" size="32" />
51+
<ArrowIcon pointsTo={pointsTo} fill={iconColor} size="32" />
5252
)}
5353
<>{title}</>
5454
{iconSide === 'right' && (
55-
<ArrowIcon pointsTo={pointsTo} fill="white" size="32" />
55+
<ArrowIcon pointsTo={pointsTo} fill={iconColor} size="32" />
5656
)}
5757
</Flex>
5858
)}

‎packages/layout/src/components/buttons/icons.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
import React from 'react';
2+
import { ColorProps } from '@tpr/core';
23
import { ArrowLeft, ArrowUp, ArrowRight, ArrowDown } from '@tpr/icons';
34

5+
// TODO: update icon colors from the theming variables once ready.
6+
47
export type ArrowIconProps = {
58
pointsTo: 'left' | 'up' | 'right' | 'down';
69
size?: string;
7-
fill?: string;
10+
fill?: ColorProps['fill'];
811
};
912
export const ArrowIcon: React.FC<ArrowIconProps> = ({
1013
pointsTo,
11-
fill = 'blue',
1214
size,
15+
fill = 'primary.3',
1316
}) => {
1417
switch (pointsTo) {
1518
case 'left':
16-
return <ArrowLeft fill={fill} width={size} />;
19+
return <ArrowLeft cfg={{ fill }} width={size} />;
1720
case 'up':
18-
return <ArrowUp fill={fill} width={size} />;
21+
return <ArrowUp cfg={{ fill }} width={size} />;
1922
case 'right':
20-
return <ArrowRight fill={fill} width={size} />;
23+
return <ArrowRight cfg={{ fill }} width={size} />;
2124
case 'down':
22-
return <ArrowDown fill={fill} width={size} />;
25+
return <ArrowDown cfg={{ fill }} width={size} />;
2326
default:
24-
return <ArrowLeft fill={fill} width={size} />;
27+
return <ArrowLeft cfg={{ fill }} width={size} />;
2528
}
2629
};

‎packages/layout/src/components/buttons/links.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import React, { ChangeEvent } from 'react';
22
import { Link, LinkProps, Flex } from '@tpr/core';
33
import { ArrowIcon } from './icons';
44

5-
// TODO: update icon colors from the theming variables once ready.
6-
75
type ArrowLinkProps = {
86
onClick: (evt: ChangeEvent<HTMLInputElement>) => void;
97
title?: string;

‎packages/layout/src/components/cards/components/card.tsx‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Flex, H3, P, Button, ButtonProps, classNames, Hr } from '@tpr/core';
2+
import { Flex, H3, P, classNames, Hr } from '@tpr/core';
33
import styles from './card.module.scss';
44

55
type StyledCardProps = { complete: boolean };
@@ -53,40 +53,40 @@ export const Toolbar: React.FC<ToolbarProps> = ({
5353
);
5454
};
5555

56-
type FooterButtonProps = {
57-
type?: 'button' | 'submit';
58-
title?: string | Function;
59-
appearance?: 'primary' | 'outlined';
60-
intent?: 'none' | 'success' | 'warning' | 'danger';
61-
loadingMessage?: string;
62-
onClick?: (...args: any[]) => void;
63-
disabled?: boolean;
64-
cfg?: ButtonProps['cfg'];
65-
};
66-
export const FooterButton: React.FC<FooterButtonProps> = ({
67-
intent,
68-
appearance,
69-
type,
70-
onClick,
71-
disabled,
72-
loadingMessage = 'Saving...',
73-
title,
74-
cfg,
75-
}) => {
76-
const t = typeof title === 'function' ? title() : title;
77-
return (
78-
<Button
79-
intent={intent}
80-
appearance={appearance}
81-
type={type}
82-
onClick={onClick}
83-
disabled={disabled}
84-
cfg={cfg}
85-
>
86-
{disabled ? loadingMessage : t}
87-
</Button>
88-
);
89-
};
56+
// type FooterButtonProps = {
57+
// type?: 'button' | 'submit';
58+
// title?: string | Function;
59+
// appearance?: 'primary' | 'outlined';
60+
// intent?: 'none' | 'success' | 'warning' | 'danger';
61+
// loadingMessage?: string;
62+
// onClick?: (...args: any[]) => void;
63+
// disabled?: boolean;
64+
// cfg?: ButtonProps['cfg'];
65+
// };
66+
// export const FooterButton: React.FC<FooterButtonProps> = ({
67+
// intent,
68+
// appearance,
69+
// type,
70+
// onClick,
71+
// disabled,
72+
// loadingMessage = 'Saving...',
73+
// title,
74+
// cfg,
75+
// }) => {
76+
// const t = typeof title === 'function' ? title() : title;
77+
// return (
78+
// <Button
79+
// intent={intent}
80+
// appearance={appearance}
81+
// type={type}
82+
// onClick={onClick}
83+
// disabled={disabled}
84+
// cfg={cfg}
85+
// >
86+
// {disabled ? loadingMessage : t}
87+
// </Button>
88+
// );
89+
// };
9090

9191
export const Footer: React.FC = ({ children }) => {
9292
return (

‎packages/layout/src/components/cards/employer/views/remove/confirm/confirm.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { useState } from 'react';
22
import { Hr, Flex, P, H3, Link } from '@tpr/core';
3-
import { ArrowRight } from '@tpr/icons';
43
import { Content } from '../../../../components/content';
5-
import { FooterButton } from '../../../../components/card';
4+
import { ArrowButton } from '../../../../../buttons/buttons';
65
import { useEmployerContext } from '../../../context';
76
import styles from './confirm.module.scss';
87
import {
@@ -62,17 +61,13 @@ export const Confirm = () => {
6261
</P>
6362
<P cfg={{ my: 3 }}>This can't be undone.</P>
6463
<Flex>
65-
<FooterButton
66-
disabled={loading}
67-
title={() => (
68-
<Flex cfg={{ alignItems: 'center' }}>
69-
<P cfg={{ mr: 2 }}>Remove employer</P>
70-
<ArrowRight fill="#FFF" width="32" />
71-
</Flex>
72-
)}
64+
<ArrowButton
7365
intent="danger"
66+
pointsTo="right"
67+
iconSide="right"
68+
title="Remove employer"
7469
onClick={handleRemove}
75-
loadingMessage="Removing..."
70+
disabled={loading}
7671
/>
7772
<Link cfg={{ m: 3 }} underline onClick={() => send('CANCEL')}>
7873
Cancel

‎packages/layout/src/components/cards/employer/views/remove/date/date.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.dateWrapper {
2-
margin-left: 45px;
2+
margin-left: 60px;
33
margin-bottom: 20px;
44
}

0 commit comments

Comments
 (0)