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

Commit c73bb9b

Browse files
d4lekd4lek
committed
layout => buttons
1 parent e009036 commit c73bb9b

6 files changed

Lines changed: 276 additions & 0 deletions

File tree

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,14 @@ export type LinkProps = {
6969
cfg?: SpaceProps | ColorProps | TypographyProps | LayoutProps;
7070
className?: string;
7171
underline?: boolean;
72+
testId?: string;
7273
[key: string]: any;
7374
};
7475
export const Link: React.FC<LinkProps> = ({
7576
cfg: globalStyles,
7677
underline = false,
7778
className,
79+
testId,
7880
children,
7981
...props
8082
}) => {
@@ -88,6 +90,7 @@ export const Link: React.FC<LinkProps> = ({
8890
'button',
8991
{
9092
type: 'button',
93+
'data-testid': testId,
9194
className: classNames,
9295
...props,
9396
},

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

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
---
2+
name: Buttons
3+
menu: Layout
4+
route: /layout/buttons
5+
---
6+
7+
import { Playground } from '@playground';
8+
import { Flex } from '@tpr/core';
9+
import { ArrowLink } from './links';
10+
import { ArrowButton } from './buttons';
11+
12+
# Buttons and Links
13+
14+
Styled buttons
15+
16+
## Basic usage
17+
18+
```js
19+
import { ArrowLink, ArrowButton } from '@tpr/layout';
20+
```
21+
22+
### Link Arrows based on the left
23+
24+
<Playground>
25+
<Flex>
26+
<ArrowLink
27+
iconSide="left"
28+
pointsTo="left"
29+
onClick={() => console.log('clicked')}
30+
cfg={{ mr: 3 }}
31+
/>
32+
<ArrowLink
33+
iconSide="left"
34+
pointsTo="up"
35+
onClick={() => console.log('clicked')}
36+
cfg={{ mr: 3 }}
37+
/>
38+
<ArrowLink
39+
iconSide="left"
40+
pointsTo="right"
41+
onClick={() => console.log('clicked')}
42+
cfg={{ mr: 3 }}
43+
/>
44+
<ArrowLink
45+
iconSide="left"
46+
pointsTo="down"
47+
onClick={() => console.log('clicked')}
48+
/>
49+
</Flex>
50+
</Playground>
51+
52+
### Link Arrows based on the right
53+
54+
<Playground>
55+
<Flex>
56+
<ArrowLink
57+
iconSide="right"
58+
pointsTo="right"
59+
onClick={() => console.log('clicked')}
60+
cfg={{ mr: 3 }}
61+
/>
62+
<ArrowLink
63+
iconSide="right"
64+
pointsTo="up"
65+
onClick={() => console.log('clicked')}
66+
cfg={{ mr: 3 }}
67+
/>
68+
<ArrowLink
69+
iconSide="right"
70+
pointsTo="left"
71+
onClick={() => console.log('clicked')}
72+
cfg={{ mr: 3 }}
73+
/>
74+
<ArrowLink
75+
iconSide="right"
76+
pointsTo="down"
77+
onClick={() => console.log('clicked')}
78+
/>
79+
</Flex>
80+
</Playground>
81+
82+
### Button Arrows based on the left
83+
84+
<Playground>
85+
<Flex>
86+
<ArrowButton
87+
iconSide="left"
88+
title="Submit"
89+
pointsTo="left"
90+
onClick={() => console.log('clicked')}
91+
cfg={{ mr: 3 }}
92+
/>
93+
<ArrowButton
94+
iconSide="left"
95+
title="Submit"
96+
pointsTo="up"
97+
onClick={() => console.log('clicked')}
98+
cfg={{ mr: 3 }}
99+
/>
100+
<ArrowButton
101+
iconSide="left"
102+
title="Submit"
103+
pointsTo="right"
104+
onClick={() => console.log('clicked')}
105+
cfg={{ mr: 3 }}
106+
/>
107+
<ArrowButton
108+
iconSide="left"
109+
title="Submit"
110+
pointsTo="down"
111+
onClick={() => console.log('clicked')}
112+
/>
113+
</Flex>
114+
</Playground>
115+
116+
### Button Arrows based on the right
117+
118+
<Playground>
119+
<Flex>
120+
<ArrowButton
121+
iconSide="right"
122+
title="Submit"
123+
pointsTo="right"
124+
onClick={() => console.log('clicked')}
125+
cfg={{ mr: 3 }}
126+
/>
127+
<ArrowButton
128+
iconSide="right"
129+
title="Submit"
130+
pointsTo="up"
131+
onClick={() => console.log('clicked')}
132+
cfg={{ mr: 3 }}
133+
/>
134+
<ArrowButton
135+
iconSide="right"
136+
title="Submit"
137+
pointsTo="left"
138+
onClick={() => console.log('clicked')}
139+
cfg={{ mr: 3 }}
140+
/>
141+
<ArrowButton
142+
iconSide="right"
143+
title="Submit"
144+
pointsTo="down"
145+
onClick={() => console.log('clicked')}
146+
/>
147+
</Flex>
148+
</Playground>

‎packages/layout/src/components/buttons/buttons.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.removepadding {
2+
padding-left: 0px !important;
3+
padding-right: 0px !important;
4+
}

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { ChangeEvent } from 'react';
2+
import { Flex, P, Button, ButtonProps } from '@tpr/core';
3+
import { ArrowIcon } from './icons';
4+
import styles from './buttons.module.scss';
5+
6+
// TODO: update icon colors from the theming variables once ready.
7+
8+
interface ArrowButtonProps extends ButtonProps {
9+
title: string;
10+
loadingMessage?: string;
11+
type?: 'button' | 'submit';
12+
onClick: (evt: ChangeEvent<HTMLInputElement>) => void;
13+
pointsTo?: 'left' | 'up' | 'right' | 'down';
14+
iconSide?: 'left' | 'right';
15+
}
16+
export const ArrowButton: React.FC<ArrowButtonProps> = ({
17+
intent,
18+
appearance,
19+
type = 'button',
20+
onClick,
21+
disabled,
22+
loadingMessage = 'Saving...',
23+
title,
24+
cfg,
25+
pointsTo = 'left',
26+
iconSide = 'left',
27+
testId,
28+
}) => {
29+
return (
30+
<Button
31+
intent={intent}
32+
appearance={appearance}
33+
type={type}
34+
onClick={onClick}
35+
disabled={disabled}
36+
cfg={cfg}
37+
testId={testId}
38+
className={styles.removepadding}
39+
>
40+
{disabled ? (
41+
loadingMessage
42+
) : (
43+
<Flex
44+
cfg={{
45+
alignItems: 'center',
46+
pl: iconSide === 'left' ? 2 : 4,
47+
pr: iconSide === 'right' ? 2 : 4,
48+
}}
49+
>
50+
{iconSide === 'left' && (
51+
<ArrowIcon pointsTo={pointsTo} fill="white" size="32" />
52+
)}
53+
<>{title}</>
54+
{iconSide === 'right' && (
55+
<ArrowIcon pointsTo={pointsTo} fill="white" size="32" />
56+
)}
57+
</Flex>
58+
)}
59+
</Button>
60+
);
61+
};

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import { ArrowLeft, ArrowUp, ArrowRight, ArrowDown } from '@tpr/icons';
3+
4+
export type ArrowIconProps = {
5+
pointsTo: 'left' | 'up' | 'right' | 'down';
6+
size?: string;
7+
fill?: string;
8+
};
9+
export const ArrowIcon: React.FC<ArrowIconProps> = ({
10+
pointsTo,
11+
fill = 'blue',
12+
size,
13+
}) => {
14+
switch (pointsTo) {
15+
case 'left':
16+
return <ArrowLeft fill={fill} width={size} />;
17+
case 'up':
18+
return <ArrowUp fill={fill} width={size} />;
19+
case 'right':
20+
return <ArrowRight fill={fill} width={size} />;
21+
case 'down':
22+
return <ArrowDown fill={fill} width={size} />;
23+
default:
24+
return <ArrowLeft fill={fill} width={size} />;
25+
}
26+
};

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React, { ChangeEvent } from 'react';
2+
import { Link, LinkProps, Flex } from '@tpr/core';
3+
import { ArrowIcon } from './icons';
4+
5+
// TODO: update icon colors from the theming variables once ready.
6+
7+
type ArrowLinkProps = {
8+
onClick: (evt: ChangeEvent<HTMLInputElement>) => void;
9+
title?: string;
10+
pointsTo?: 'left' | 'up' | 'right' | 'down';
11+
iconSide?: 'left' | 'right';
12+
underline?: boolean;
13+
testId?: string;
14+
cfg?: LinkProps['cfg'];
15+
};
16+
export const ArrowLink: React.FC<ArrowLinkProps> = ({
17+
onClick,
18+
testId,
19+
underline = true,
20+
title = 'Back',
21+
pointsTo = 'left',
22+
iconSide = 'left',
23+
cfg,
24+
}) => {
25+
return (
26+
<Link cfg={cfg} onClick={onClick} underline={underline} testId={testId}>
27+
<Flex cfg={{ alignItems: 'center' }}>
28+
{iconSide === 'left' && <ArrowIcon pointsTo={pointsTo} />}
29+
<>{title}</>
30+
{iconSide === 'right' && <ArrowIcon pointsTo={pointsTo} />}
31+
</Flex>
32+
</Link>
33+
);
34+
};

0 commit comments

Comments
 (0)