Skip to content

Commit c768104

Browse files
Kiarokhadrianschmidt
Kiarokh
authored and
adrianschmidt
committed
feat(card): add new component
1 parent 7f430e2 commit c768104

15 files changed

+772
-1
lines changed

‎etc/lime-elements.api.md‎

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,17 @@ export namespace Components {
198198
"type"?: CalloutType;
199199
}
200200
// @beta
201+
export interface LimelCard {
202+
"actions"?: Array<ActionBarItem | ListSeparator>;
203+
"clickable": boolean;
204+
"heading"?: string;
205+
"icon"?: string | Icon;
206+
"image"?: Image_2;
207+
"orientation": 'landscape' | 'portrait';
208+
"subheading"?: string;
209+
"value"?: string;
210+
}
211+
// @beta
201212
export interface LimelChart {
202213
"accessibleItemsLabel"?: string;
203214
"accessibleLabel"?: string;
@@ -985,6 +996,10 @@ namespace JSX_2 {
985996
"limel-button-group": LimelButtonGroup;
986997
// (undocumented)
987998
"limel-callout": LimelCallout;
999+
// Warning: (ae-incompatible-release-tags) The symbol ""limel-card"" is marked as @public, but its signature references "JSX_2" which is marked as @beta
1000+
//
1001+
// (undocumented)
1002+
"limel-card": LimelCard;
9881003
// Warning: (ae-incompatible-release-tags) The symbol ""limel-chart"" is marked as @public, but its signature references "JSX_2" which is marked as @beta
9891004
//
9901005
// (undocumented)
@@ -1167,6 +1182,18 @@ namespace JSX_2 {
11671182
"type"?: CalloutType;
11681183
}
11691184
// @beta
1185+
interface LimelCard {
1186+
"actions"?: Array<ActionBarItem | ListSeparator>;
1187+
"clickable"?: boolean;
1188+
"heading"?: string;
1189+
"icon"?: string | Icon;
1190+
"image"?: Image_2;
1191+
"onActionSelected"?: (event: LimelCardCustomEvent<ActionBarItem>) => void;
1192+
"orientation"?: 'landscape' | 'portrait';
1193+
"subheading"?: string;
1194+
"value"?: string;
1195+
}
1196+
// @beta
11701197
interface LimelChart {
11711198
"accessibleItemsLabel"?: string;
11721199
"accessibleLabel"?: string;
@@ -1839,6 +1866,16 @@ export interface LimelButtonGroupCustomEvent<T> extends CustomEvent<T> {
18391866
target: HTMLLimelButtonGroupElement;
18401867
}
18411868

1869+
// Warning: (ae-missing-release-tag) "LimelCardCustomEvent" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
1870+
//
1871+
// @public (undocumented)
1872+
export interface LimelCardCustomEvent<T> extends CustomEvent<T> {
1873+
// (undocumented)
1874+
detail: T;
1875+
// (undocumented)
1876+
target: HTMLLimelCardElement;
1877+
}
1878+
18421879
// Warning: (ae-missing-release-tag) "LimelCheckboxCustomEvent" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
18431880
//
18441881
// @public (undocumented)
@@ -2249,10 +2286,12 @@ export interface ListItem<T = any> {
22492286
}
22502287

22512288
// @public
2252-
export interface ListSeparator {
2289+
interface ListSeparator {
22532290
separator: true;
22542291
text?: string;
22552292
}
2293+
export { ListSeparator }
2294+
export { ListSeparator as ListSeparator1 }
22562295

22572296
// @public
22582297
export type ListType = 'selectable' | 'radio' | 'checkbox';

‎src/components/card/card.scss‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
/**
2+
* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;
3+
* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;
4+
* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;
5+
* @prop --card-background-color: background color of the card.
6+
*/
7+
8+
@use '../../style/mixins';
9+
10+
$default-border-radius: 0.95rem;
11+
12+
* {
13+
box-sizing: border-box;
14+
min-width: 0;
15+
min-height: 0;
16+
}
17+
18+
:host(limel-card) {
19+
display: flex;
20+
border-radius: var(--card-border-radius, $default-border-radius);
21+
}
22+
23+
section {
24+
box-sizing: border-box;
25+
@include mixins.visualize-keyboard-focus;
26+
27+
display: flex;
28+
gap: 0.5rem;
29+
30+
flex-direction: column;
31+
:host(limel-card[orientation='landscape']) & {
32+
flex-direction: row;
33+
}
34+
35+
border-radius: var(--card-border-radius, $default-border-radius);
36+
border: 1px solid rgb(var(--contrast-500));
37+
38+
padding: 0.25rem;
39+
background-color: var(
40+
--card-background-color,
41+
var(--lime-elevated-surface-background-color)
42+
);
43+
44+
:host(limel-card[clickable]:not([disabled='true']):not([disabled])) & {
45+
@include mixins.is-flat-clickable(
46+
$background-color:
47+
var(
48+
--card-background-color,
49+
var(--lime-elevated-surface-background-color)
50+
),
51+
$background-color--hovered:
52+
var(
53+
--card-background-color,
54+
var(--lime-elevated-surface-background-color)
55+
)
56+
);
57+
}
58+
59+
:host(limel-card[clickable]:hover) & {
60+
border-color: transparent;
61+
}
62+
}
63+
64+
.body {
65+
flex-grow: 1;
66+
display: flex;
67+
flex-direction: column;
68+
gap: 0.5rem;
69+
}
70+
71+
img {
72+
transition: filter 0.6s ease;
73+
object-fit: cover;
74+
border-radius: calc(
75+
var(--card-border-radius, $default-border-radius) / 1.4
76+
);
77+
:host(limel-card[orientation='portrait']) & {
78+
width: 100%;
79+
}
80+
81+
:host(limel-card[orientation='landscape']) & {
82+
max-width: 40%;
83+
height: 100%;
84+
}
85+
86+
:host(limel-card:hover) & {
87+
transition-duration: 0.2s;
88+
filter: saturate(1.3);
89+
}
90+
}
91+
92+
limel-markdown {
93+
padding: 0.5rem 0.75rem;
94+
}
95+
96+
header {
97+
display: flex;
98+
justify-content: center;
99+
100+
gap: 0.5rem;
101+
102+
padding: 0.25rem 0.75rem;
103+
:host(limel-card[orientation='landscape']) & {
104+
padding-top: 0.5rem;
105+
}
106+
107+
&:has(limel-icon) {
108+
padding-left: 0.25rem;
109+
}
110+
111+
.headings {
112+
flex-grow: 1;
113+
display: flex;
114+
flex-direction: column;
115+
gap: 0.125rem;
116+
}
117+
118+
limel-icon {
119+
flex-shrink: 0;
120+
width: 2rem;
121+
}
122+
123+
h1 {
124+
font-size: 1.125rem;
125+
font-weight: 500;
126+
color: var(--card-heading-color, rgb(var(--contrast-1100)));
127+
letter-spacing: -0.03125rem; // 0.5px
128+
}
129+
130+
h2 {
131+
font-size: 0.875rem;
132+
font-weight: 400;
133+
color: var(--card-subheading-color, rgb(var(--contrast-1000)));
134+
}
135+
136+
h1,
137+
h2 {
138+
word-break: break-word;
139+
hyphens: auto;
140+
-webkit-hyphens: auto;
141+
margin: 0;
142+
}
143+
}
144+
145+
limel-action-bar {
146+
padding: 0.5rem;
147+
margin-left: auto;
148+
}

0 commit comments

Comments
 (0)