Skip to content

Commit a6dd36f

Browse files
bryceosterhausbryceosterhaus
committed
feat(@clayui/sticker): add more low level components
1 parent 19578dd commit a6dd36f

File tree

7 files changed

+182
-42
lines changed

7 files changed

+182
-42
lines changed

‎packages/clay-card/src/__tests__/__snapshots__/index.tsx.snap

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ exports[`ClayCard renders a ClayCard as a directory 1`] = `
1818
class="flex-col"
1919
>
2020
<span
21-
class="sticker sticker-rounded sticker-secondary"
21+
class="sticker sticker-secondary"
2222
>
2323
<span
2424
class="sticker-overlay inline-item"
@@ -84,7 +84,7 @@ exports[`ClayCard renders a ClayCard as a file card 1`] = `
8484
</svg>
8585
</div>
8686
<span
87-
class="sticker sticker-rounded sticker-danger sticker-bottom-left"
87+
class="sticker sticker-danger sticker-bottom-left"
8888
>
8989
<span
9090
class="sticker-overlay"
@@ -189,7 +189,7 @@ exports[`ClayCard renders a ClayCard as a selectable file card 1`] = `
189189
</svg>
190190
</div>
191191
<span
192-
class="sticker sticker-rounded sticker-danger sticker-bottom-left"
192+
class="sticker sticker-danger sticker-bottom-left"
193193
>
194194
<span
195195
class="sticker-overlay"
@@ -291,7 +291,7 @@ exports[`ClayCard renders a ClayCard as a selectable folder 1`] = `
291291
class="autofit-col"
292292
>
293293
<span
294-
class="sticker sticker-rounded sticker-secondary"
294+
class="sticker sticker-secondary"
295295
>
296296
<span
297297
class="sticker-overlay inline-item"
@@ -645,7 +645,7 @@ exports[`ClayCard renders a ClayCard as template navigation card as horizontal c
645645
class="autofit-col"
646646
>
647647
<span
648-
class="sticker sticker-rounded sticker-light"
648+
class="sticker sticker-light"
649649
>
650650
<span
651651
class="sticker-overlay inline-item"
@@ -966,7 +966,7 @@ exports[`ClayCard renders a group of ClayCards 1`] = `
966966
</svg>
967967
</div>
968968
<span
969-
class="sticker sticker-rounded sticker-danger sticker-bottom-left"
969+
class="sticker sticker-danger sticker-bottom-left"
970970
>
971971
<span
972972
class="sticker-overlay"
@@ -1056,7 +1056,7 @@ exports[`ClayCard renders a group of ClayCards 1`] = `
10561056
</svg>
10571057
</div>
10581058
<span
1059-
class="sticker sticker-rounded sticker-danger sticker-bottom-left"
1059+
class="sticker sticker-danger sticker-bottom-left"
10601060
>
10611061
<span
10621062
class="sticker-overlay"
@@ -1349,7 +1349,7 @@ exports[`ClayCardWithHorizontal renders as disabled 1`] = `
13491349
class="autofit-col"
13501350
>
13511351
<span
1352-
class="sticker sticker-rounded"
1352+
class="sticker"
13531353
>
13541354
<span
13551355
class="sticker-overlay inline-item"
@@ -1411,7 +1411,7 @@ exports[`ClayCardWithHorizontal renders as not selectable 1`] = `
14111411
class="autofit-col"
14121412
>
14131413
<span
1414-
class="sticker sticker-rounded"
1414+
class="sticker"
14151415
>
14161416
<span
14171417
class="sticker-overlay inline-item"
@@ -1482,7 +1482,7 @@ exports[`ClayCardWithHorizontal renders as selectable 1`] = `
14821482
class="autofit-col"
14831483
>
14841484
<span
1485-
class="sticker sticker-rounded"
1485+
class="sticker"
14861486
>
14871487
<span
14881488
class="sticker-overlay inline-item"
@@ -1562,7 +1562,7 @@ exports[`ClayCardWithInfo renders as disabled 1`] = `
15621562
</svg>
15631563
</div>
15641564
<span
1565-
class="sticker sticker-rounded sticker-primary sticker-bottom-left"
1565+
class="sticker sticker-primary sticker-bottom-left"
15661566
>
15671567
<span
15681568
class="sticker-overlay"
@@ -1644,7 +1644,7 @@ exports[`ClayCardWithInfo renders as not selectable 1`] = `
16441644
</svg>
16451645
</div>
16461646
<span
1647-
class="sticker sticker-rounded sticker-primary sticker-bottom-left"
1647+
class="sticker sticker-primary sticker-bottom-left"
16481648
>
16491649
<span
16501650
class="sticker-overlay"
@@ -1753,7 +1753,7 @@ exports[`ClayCardWithInfo renders as selectable 1`] = `
17531753
</svg>
17541754
</div>
17551755
<span
1756-
class="sticker sticker-rounded sticker-primary sticker-bottom-left"
1756+
class="sticker sticker-primary sticker-bottom-left"
17571757
>
17581758
<span
17591759
class="sticker-overlay"

‎packages/clay-list/src/__tests__/__snapshots__/index.tsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ exports[`ClayListWithItems renders with headers 1`] = `
152152
class="autofit-col"
153153
>
154154
<span
155-
class="sticker sticker-rounded sticker-secondary"
155+
class="sticker sticker-secondary"
156156
>
157157
<span
158158
class="sticker-overlay"
@@ -198,7 +198,7 @@ exports[`ClayListWithItems renders with headers 1`] = `
198198
class="autofit-col"
199199
>
200200
<span
201-
class="sticker sticker-rounded sticker-secondary"
201+
class="sticker sticker-secondary"
202202
>
203203
<span
204204
class="sticker-overlay"

‎packages/clay-sticker/docs/index.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,14 @@ const stickerUserIconImportsCode = `import ClaySticker from '@clayui/sticker';
127127
const StickerUserIconCode = `const Component = () => {
128128
return (
129129
<>
130-
<ClaySticker className="sticker-user-icon" size="xl">
131-
<img className="sticker-img" src="/images/long_user_image.png" />
130+
<ClaySticker userIcon size="xl">
131+
<ClaySticker.Image
132+
alt="placeholder"
133+
src="/images/long_user_image.png"
134+
/>
132135
</ClaySticker>
133-
<ClaySticker className="sticker-user-icon" size="xl">
136+
137+
<ClaySticker userIcon size="xl">
134138
{'BS'}
135139
</ClaySticker>
136140
</>

‎packages/clay-sticker/src/__tests__/__snapshots__/index.tsx.snap

Lines changed: 62 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`ClaySticker renders 1`] = `
44
<span
5-
className="sticker sticker-rounded"
5+
className="sticker"
66
>
77
<span
88
className="sticker-overlay"
@@ -14,7 +14,7 @@ exports[`ClaySticker renders 1`] = `
1414

1515
exports[`ClaySticker renders with a display type 1`] = `
1616
<span
17-
className="sticker sticker-rounded sticker-danger"
17+
className="sticker sticker-danger"
1818
>
1919
<span
2020
className="sticker-overlay"
@@ -26,7 +26,7 @@ exports[`ClaySticker renders with a display type 1`] = `
2626

2727
exports[`ClaySticker renders with a outside 1`] = `
2828
<span
29-
className="sticker sticker-rounded sticker-top-left sticker-outside"
29+
className="sticker sticker-top-left sticker-outside"
3030
>
3131
<span
3232
className="sticker-overlay"
@@ -38,7 +38,7 @@ exports[`ClaySticker renders with a outside 1`] = `
3838

3939
exports[`ClaySticker renders with a position 1`] = `
4040
<span
41-
className="sticker sticker-rounded sticker-bottom-left"
41+
className="sticker sticker-bottom-left"
4242
>
4343
<span
4444
className="sticker-overlay"
@@ -62,7 +62,7 @@ exports[`ClaySticker renders with a shape circle 1`] = `
6262

6363
exports[`ClaySticker renders with a size 1`] = `
6464
<span
65-
className="sticker sticker-rounded sticker-xl"
65+
className="sticker sticker-xl"
6666
>
6767
<span
6868
className="sticker-overlay"
@@ -71,3 +71,60 @@ exports[`ClaySticker renders with a size 1`] = `
7171
</span>
7272
</span>
7373
`;
74+
75+
exports[`ClaySticker renders with a user icon 1`] = `
76+
<span
77+
className="sticker sticker-user-icon"
78+
>
79+
<span
80+
className="sticker-overlay"
81+
>
82+
<img
83+
alt="placeholder"
84+
className="sticker-img"
85+
src="#"
86+
/>
87+
</span>
88+
</span>
89+
`;
90+
91+
exports[`ClaySticker renders with an image 1`] = `
92+
<span
93+
className="sticker"
94+
>
95+
<span
96+
className="sticker-overlay"
97+
>
98+
<img
99+
alt="placeholder"
100+
className="sticker-img"
101+
src="#"
102+
/>
103+
</span>
104+
</span>
105+
`;
106+
107+
exports[`ClaySticker renders with an overlay 1`] = `
108+
<span
109+
className="sticker"
110+
>
111+
<span
112+
className="sticker-overlay"
113+
>
114+
<span
115+
className="sticker-overlay"
116+
>
117+
<img
118+
alt=""
119+
className="sticker-img"
120+
src="#"
121+
/>
122+
</span>
123+
<span
124+
className="sticker-overlay"
125+
>
126+
BC
127+
</span>
128+
</span>
129+
</span>
130+
`;

‎packages/clay-sticker/src/__tests__/index.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,4 +57,37 @@ describe('ClaySticker', () => {
5757

5858
expect(testRenderer.toJSON()).toMatchSnapshot();
5959
});
60+
61+
it('renders with an overlay', () => {
62+
const testRenderer = TestRenderer.create(
63+
<ClaySticker>
64+
<ClaySticker.Overlay>
65+
<ClaySticker.Image alt="" src="#" />
66+
</ClaySticker.Overlay>
67+
<ClaySticker.Overlay>{'BC'}</ClaySticker.Overlay>
68+
</ClaySticker>
69+
);
70+
71+
expect(testRenderer.toJSON()).toMatchSnapshot();
72+
});
73+
74+
it('renders with an image', () => {
75+
const testRenderer = TestRenderer.create(
76+
<ClaySticker>
77+
<ClaySticker.Image alt="placeholder" src="#" />
78+
</ClaySticker>
79+
);
80+
81+
expect(testRenderer.toJSON()).toMatchSnapshot();
82+
});
83+
84+
it('renders with a user icon', () => {
85+
const testRenderer = TestRenderer.create(
86+
<ClaySticker shape="user-icon">
87+
<ClaySticker.Image alt="placeholder" src="#" />
88+
</ClaySticker>
89+
);
90+
91+
expect(testRenderer.toJSON()).toMatchSnapshot();
92+
});
6093
});

‎packages/clay-sticker/src/index.tsx

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export type DisplayType =
1717
| 'unstyled'
1818
| 'warning';
1919

20-
type Shape = 'circle' | 'rounded';
20+
type Shape = 'circle' | 'user-icon';
2121

2222
type Position = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
2323

@@ -56,14 +56,38 @@ interface IProps extends React.HTMLAttributes<HTMLSpanElement> {
5656
size?: Size;
5757
}
5858

59+
const Overlay: React.FunctionComponent<
60+
React.HTMLAttributes<HTMLSpanElement> & {
61+
/**
62+
* Flag to indicate if `inline-item` class should be applied
63+
*/
64+
inline?: boolean;
65+
}
66+
> = ({children, className, inline, ...otherProps}) => (
67+
<span
68+
className={classNames(className, 'sticker-overlay', {
69+
'inline-item': inline,
70+
})}
71+
{...otherProps}
72+
>
73+
{children}
74+
</span>
75+
);
76+
77+
const Image: React.FunctionComponent<React.ImgHTMLAttributes<
78+
HTMLImageElement
79+
>> = ({className, ...otherProps}) => (
80+
<img className={classNames(className, 'sticker-img')} {...otherProps} />
81+
);
82+
5983
const ClaySticker: React.FunctionComponent<IProps> = ({
6084
children,
6185
className,
6286
displayType,
6387
inline,
6488
outside = false,
6589
position,
66-
shape = 'rounded',
90+
shape,
6791
size,
6892
...otherProps
6993
}: IProps) => (
@@ -77,14 +101,8 @@ const ClaySticker: React.FunctionComponent<IProps> = ({
77101
[`sticker-${size}`]: size,
78102
})}
79103
>
80-
<span
81-
className={classNames('sticker-overlay', {
82-
'inline-item': inline,
83-
})}
84-
>
85-
{children}
86-
</span>
104+
<Overlay inline={inline}>{children}</Overlay>
87105
</span>
88106
);
89107

90-
export default ClaySticker;
108+
export default Object.assign(ClaySticker, {Image, Overlay});

0 commit comments

Comments
 (0)