Skip to content

Commit a537566

Browse files
KiarokhKiarokh
committed
fixup! feat(card): add new component
1 parent 8bbf88b commit a537566

13 files changed

+316
-49
lines changed

‎src/components/card/card.scss‎

Lines changed: 66 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,86 @@
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+
18
@use '../../style/mixins';
29

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+
323
section {
24+
box-sizing: border-box;
425
@include mixins.visualize-keyboard-focus;
526

627
display: flex;
28+
gap: 0.5rem;
29+
730
flex-direction: column;
8-
box-sizing: border-box;
31+
:host(limel-card[orientation='landscape']) & {
32+
flex-direction: row;
33+
}
934

10-
border-radius: 0.75rem;
35+
border-radius: var(--card-border-radius, $default-border-radius);
1136
border: 1px solid rgb(var(--contrast-500));
1237

1338
padding: 0.25rem;
39+
background-color: var(
40+
--card-background-color,
41+
var(--lime-elevated-surface-background-color)
42+
);
1443

1544
:host(limel-card[clickable]:not([disabled='true']):not([disabled])) & {
16-
@include mixins.is-flat-clickable;
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+
);
1757
}
1858

1959
:host(limel-card[clickable]:hover) & {
2060
border-color: transparent;
2161
}
2262
}
2363

24-
* {
25-
box-sizing: border-box;
64+
.body {
65+
flex-grow: 1;
66+
display: flex;
67+
flex-direction: column;
68+
gap: 0.5rem;
2669
}
2770

2871
img {
29-
width: 100%;
3072
object-fit: cover;
31-
border-radius: 0.625rem;
32-
margin-bottom: 0.5rem;
73+
border-radius: calc(
74+
var(--card-border-radius, $default-border-radius) / 1.4
75+
);
76+
:host(limel-card[orientation='portrait']) & {
77+
width: 100%;
78+
}
79+
80+
:host(limel-card[orientation='landscape']) & {
81+
max-width: 40%;
82+
height: 100%;
83+
}
3384
}
3485

3586
limel-markdown {
@@ -38,11 +89,14 @@ limel-markdown {
3889

3990
header {
4091
display: flex;
41-
align-items: center;
4292
justify-content: center;
4393

4494
gap: 0.5rem;
95+
4596
padding: 0.25rem 0.75rem;
97+
:host(limel-card[orientation='landscape']) & {
98+
padding-top: 0.5rem;
99+
}
46100

47101
&:has(limel-icon) {
48102
padding-left: 0.25rem;
@@ -63,20 +117,21 @@ header {
63117
h1 {
64118
font-size: 1.125rem;
65119
font-weight: 500;
120+
color: var(--card-heading-color, rgb(var(--contrast-1100)));
121+
letter-spacing: -0.03125rem; // 0.5px
66122
}
67123

68124
h2 {
69125
font-size: 0.875rem;
70126
font-weight: 400;
71-
color: rgb(var(--contrast-1000));
127+
color: var(--card-subheading-color, rgb(var(--contrast-1000)));
72128
}
73129

74130
h1,
75131
h2 {
76132
word-break: break-word;
77133
hyphens: auto;
78134
-webkit-hyphens: auto;
79-
letter-spacing: -0.03125rem; // 0.5px
80135
margin: 0;
81136
}
82137
}

‎src/components/card/card.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ import { getIconName } from '../icon/get-icon-props';
1414
* @exampleComponent limel-example-card-image
1515
* @exampleComponent limel-example-card-actions
1616
* @exampleComponent limel-example-card-clickable
17+
* @exampleComponent limel-example-card-orientation
18+
* @exampleComponent limel-example-card-slot
19+
* @exampleComponent limel-example-card-styling
1720
* @beta
1821
*/
1922
@Component({
@@ -54,7 +57,7 @@ export class Card {
5457
* Supports markdown, to provide a rich text experience.
5558
*/
5659
@Prop()
57-
public value: string;
60+
public value?: string;
5861

5962
/**
6063
* Actions to display in the card,
@@ -87,9 +90,12 @@ export class Card {
8790
return (
8891
<section tabindex={this.clickable ? 0 : ''}>
8992
{this.renderImage()}
90-
{this.renderHeader()}
91-
{this.renderBody()}
92-
{this.renderActionBar()}
93+
<div class="body">
94+
{this.renderHeader()}
95+
{this.renderSlot()}
96+
{this.renderValue()}
97+
{this.renderActionBar()}
98+
</div>
9399
</section>
94100
);
95101
}
@@ -154,7 +160,11 @@ export class Card {
154160
return <h2>{this.subheading}</h2>;
155161
}
156162

157-
private renderBody() {
163+
private renderSlot() {
164+
return <slot name="component" />;
165+
}
166+
167+
private renderValue() {
158168
return <limel-markdown value={this.value} />;
159169
}
160170

‎src/components/card/examples/card-basic.scss‎

Lines changed: 1 addition & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1 @@
1-
:host {
2-
display: block;
3-
position: relative;
4-
resize: both;
5-
overflow: auto;
6-
7-
box-sizing: border-box;
8-
9-
min-width: 10rem;
10-
width: 20rem;
11-
max-width: 100%;
12-
13-
min-height: 5rem;
14-
height: auto;
15-
max-height: 50rem;
16-
17-
padding: 1rem 1rem 3rem 1rem;
18-
border: 0.125rem dashed rgb(var(--contrast-500));
19-
20-
border-radius: 0.5rem;
21-
22-
&::after {
23-
content: 'Resize me ⤵';
24-
font-size: 0.75rem;
25-
position: absolute;
26-
right: 0.25rem;
27-
bottom: 0.25rem;
28-
}
29-
}
1+
@import './card-resizable-container';

‎src/components/card/examples/card-basic.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import { Component, h } from '@stencil/core';
22
/**
33
* Basic example
4+
* Cards can be used to show some information in a static manner,
5+
* for instance when displaying a grid of cards, each of which is
6+
* providing a brief summary of a topic.
7+
*
8+
* However, the most common use cases of these UI components is to
9+
* provide a media-rich and interactive experience to the user,
10+
* which you can see in next examples.
411
*/
512
@Component({
613
shadow: true,

‎src/components/card/examples/card-clickable.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,17 @@ import { Component, h } from '@stencil/core';
1919
export class CardClickableExample {
2020
public render() {
2121
const image = {
22-
src: 'https://images.unsplash.com/photo-1484755560615-a4c64e778a6c?q=80&w=2778&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
23-
alt: 'A picture of a girl, listening to music with headphones',
22+
src: 'https://images.unsplash.com/photo-1494232410401-ad00d5433cfa?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
23+
alt: 'A picture of an old cassette tape',
2424
loading: 'lazy' as 'lazy',
2525
};
2626

2727
return (
2828
<limel-card
2929
clickable={true}
3030
image={image}
31-
heading="Yor Daily Mix"
32-
subheading="16 TRACKS"
31+
heading="Unleashing the Power of Lime Elements"
32+
subheading="Lime Design Podcast"
3333
value="Listen now…"
3434
onClick={this.handleClick}
3535
/>

‎src/components/card/examples/card-image.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ import { Component, h } from '@stencil/core';
77
* in which many cards are usually present.
88
*
99
* Elements like text and images should clearly indicate information hierarchy.
10+
*
11+
* :::note
12+
* The height and aspect ratio of the image affects the layout of the card.
13+
* :::
1014
*/
1115
@Component({
1216
shadow: true,

‎src/components/card/examples/card-nested-component.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
:host(limel-example-card-nested-component) {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
padding: 0 1rem;
7+
}
8+
9+
limel-slider {
10+
width: 100%;
11+
}
12+
13+
:host(limel-example-card-nested-component.on-pink-background) {
14+
--lime-primary-color: rgb(var(--color-purple-default));
15+
16+
limel-action-bar {
17+
--action-bar-background-color: transparent;
18+
--action-bar-item-text-color: rgb(var(--color-white));
19+
}
20+
}

‎src/components/card/examples/card-nested-component.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Component, h, State } from '@stencil/core';
2+
import { ActionBarItem, ListSeparator } from '@limetech/lime-elements';
3+
4+
@Component({
5+
tag: 'limel-example-card-nested-component',
6+
shadow: true,
7+
styleUrl: 'card-nested-component.scss',
8+
})
9+
export class CardNestedComponentExample {
10+
@State()
11+
private actionBarItems: Array<ActionBarItem | ListSeparator> = [
12+
{
13+
text: 'Previous',
14+
icon: '-lime-filter-previous',
15+
iconOnly: true,
16+
},
17+
{
18+
text: 'Play',
19+
icon: 'play',
20+
iconOnly: true,
21+
},
22+
{
23+
text: 'Next',
24+
icon: '-lime-filter-next',
25+
iconOnly: true,
26+
},
27+
{ separator: true },
28+
{
29+
text: 'Repeat',
30+
icon: 'repeat_one',
31+
iconOnly: true,
32+
},
33+
{
34+
text: 'Shuffle',
35+
icon: 'shuffle',
36+
iconOnly: true,
37+
},
38+
];
39+
40+
public render() {
41+
return [
42+
<limel-slider value={34} valuemax={128} />,
43+
<limel-action-bar
44+
accessibleLabel="Toolbar"
45+
actions={this.actionBarItems}
46+
/>,
47+
];
48+
}
49+
}

‎src/components/card/examples/card-orientation.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Component, h } from '@stencil/core';
2+
/**
3+
* Using the `orientation` prop
4+
* The `orientation` prop can be used to change the layout of the card,
5+
* and is specially useful when the card is displaying images.
6+
*
7+
* By default, the card has a `portrait` orientation, which will render the
8+
* image on top of the content, filling the entire width of the card.
9+
* However, when it is changed to `landscape`, the image will be displayed
10+
* to the left of the content, filling the entire height of the card,
11+
* and maximum width of 40% of the card.
12+
*/
13+
@Component({
14+
shadow: true,
15+
tag: 'limel-example-card-orientation',
16+
styleUrl: 'card-basic.scss',
17+
})
18+
export class CardOrientationExample {
19+
public render() {
20+
const image = {
21+
src: 'https://images.unsplash.com/photo-1484755560615-a4c64e778a6c?q=80&w=2778&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
22+
alt: 'A picture of a girl, listening to music with headphones',
23+
loading: 'lazy' as 'lazy',
24+
};
25+
26+
return (
27+
<limel-card
28+
orientation="landscape"
29+
image={image}
30+
heading="Your Daily Mix"
31+
subheading="16 TRACKS"
32+
value="Listen now…"
33+
/>
34+
);
35+
}
36+
}

0 commit comments

Comments
 (0)