Skip to content

Commit 97cf0a3

Browse files
adenvtadenvt
authored
Merge pull request #1500 from privy-open-source/fix/refine-card-disabled
Card: refine card state
2 parents ff8321c + 61e888e commit 97cf0a3

File tree

5 files changed

+157
-6
lines changed

5 files changed

+157
-6
lines changed

‎src/components/card/Card.spec.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,22 @@ it('Card should have style "disabled" if disabled is provided', () => {
3737
expect(card).toHaveClass('card', 'card--disabled')
3838
})
3939

40+
it('Card should have style readonly if `readonly` prop is provided', () => {
41+
const screen = render({
42+
components: { Card },
43+
template : `
44+
<Card readonly>
45+
Content
46+
</Card>
47+
`,
48+
})
49+
50+
const card = screen.queryByTestId('card')
51+
52+
expect(card).toBeInTheDocument()
53+
expect(card).toHaveClass('card', 'card--readonly')
54+
})
55+
4056
it('should be able to add Card Header via slot `header`', () => {
4157
const screen = render({
4258
components: { Card, Button },

‎src/components/card/Card.vue

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@ const props = defineProps({
7676
type : Boolean,
7777
default: false,
7878
},
79+
readonly: {
80+
type : Boolean,
81+
default: false,
82+
},
7983
callout: {
8084
type : Boolean,
8185
default: false,
@@ -109,6 +113,9 @@ const classNames = computed(() => {
109113
if (props.disabled)
110114
result.push('card--disabled')
111115
116+
if (props.readonly)
117+
result.push('card--readonly')
118+
112119
if (props.callout)
113120
result.push('card--callout')
114121
@@ -143,7 +150,7 @@ defineSlots<{
143150
* Component Name: Card
144151
* Component URI : https : //www.figma.com/file/JIYmbyRYZHc9bnVp6Npm9K/B-A-S-E-%2F-Components?node-id=294%3A5079
145152
* Date Created : May 22, 2022
146-
* Last Update : May 23, 2022
153+
* Last Update : Nov 08, 2024
147154
*/
148155
.card {
149156
--p-card-padding-x: theme(spacing.6);
@@ -244,6 +251,15 @@ defineSlots<{
244251
* padding of card-body-top-parent set to 0
245252
*/
246253
&&--sectioned {
254+
&:has(.card__section--readonly) {
255+
.card__section:first-child:where(.card__section--readonly) {
256+
@apply rounded-t-[var(--p-card-border-radius)];
257+
}
258+
259+
.card__section:last-child:where(.card__section--readonly) {
260+
@apply rounded-b-[var(--p-card-border-radius)];
261+
}
262+
}
247263
> .card__body {
248264
@apply p-0;
249265
}
@@ -254,8 +270,16 @@ defineSlots<{
254270
* If Card disabled
255271
*/
256272
&&--disabled {
257-
@apply bg-subtle;
258-
@apply dark:bg-dark-subtle;
273+
@apply opacity-50 cursor-not-allowed;
274+
}
275+
276+
/**
277+
* Give background base
278+
* when Card are readonly
279+
*/
280+
&&--readonly {
281+
@apply bg-base cursor-not-allowed;
282+
@apply dark:bg-dark-base;
259283
}
260284
261285
/**
@@ -309,8 +333,13 @@ defineSlots<{
309333
310334
&&--disabled,
311335
&.card--disabled {
312-
@apply bg-subtle;
313-
@apply dark:bg-dark-subtle;
336+
@apply opacity-50 cursor-not-allowed;
337+
}
338+
339+
&&--readonly,
340+
&.card--readonly {
341+
@apply bg-base cursor-not-allowed;
342+
@apply dark:bg-dark-base;
314343
}
315344
316345
&.card--disabled {

‎src/components/card/CardSection.spec.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,24 @@ it('Card-Section should have style "disabled" if disabled is provided', () => {
4444
expect(cardSection).toHaveClass('card__section', 'card__section--disabled')
4545
})
4646

47+
it('Card-Section should have style readonly if `readonly` prop is provided', () => {
48+
const screen = render({
49+
components: { Card, CardSection },
50+
template : `
51+
<Card sectioned>
52+
<Card-Section readonly>
53+
Content
54+
</Card-Section>
55+
</Card>
56+
`,
57+
})
58+
59+
const cardSection = screen.queryByTestId('card-section')
60+
61+
expect(cardSection).toBeInTheDocument()
62+
expect(cardSection).toHaveClass('card__section', 'card__section--readonly')
63+
})
64+
4765
it('should be able to add Card Header via slot `header`', () => {
4866
const screen = render({
4967
components: {

‎src/components/card/CardSection.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@ const props = defineProps({
5454
type : Boolean,
5555
default: false,
5656
},
57+
readonly: {
58+
type : Boolean,
59+
default: false,
60+
},
5761
})
5862
5963
const classNames = computed(() => {
@@ -62,6 +66,9 @@ const classNames = computed(() => {
6266
if (props.disabled)
6367
result.push('card__section--disabled')
6468
69+
if (props.readonly)
70+
result.push('card__section--readonly')
71+
6572
return result
6673
})
6774

‎src/components/card/index.md

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,78 @@ description: Take picture from user's camera
219219
</template>
220220
```
221221

222+
## Disabled
223+
When the `disabled` prop is set to true, the card component will visually indicate that it is disabled.
224+
These state are works in `<p-card-section>` too.
225+
<preview>
226+
<p-card
227+
disabled
228+
title="Judul apapun seharusnya disini">
229+
Ketika Anda berada di sini, Anda akan melihat konten kartu-kartu, semuanya tersedia di sini. Jika Anda membutuhkan kartu-kartu khusus, ambillah komponen yang paling sesuai dengan kebutuhan Anda dan lepaskan.
230+
</p-card>
231+
</preview>
232+
233+
```vue
234+
<template>
235+
<p-card
236+
disabled
237+
title="Judul apapun seharusnya disini">
238+
Ketika Anda berada di sini, Anda akan melihat konten kartu-kartu,
239+
semuanya tersedia di sini. Jika Anda membutuhkan kartu-kartu khusus,
240+
ambillah komponen yang paling sesuai dengan kebutuhan Anda dan lepaskan.
241+
</p-card>
242+
</template>
243+
```
244+
245+
## Readonly
246+
Card also has readonly state. The card background will visually change if the `readonly` prop is set to true.
247+
These state are also work in `<p-card-section>`.
248+
<preview>
249+
<p-card
250+
title="Card with Section"
251+
sectioned>
252+
<p-card-section>
253+
While here you will see the content of cards, everything goes here.
254+
If you need custom cards, take the component which more represent to
255+
what you need and detach it.
256+
</p-card-section>
257+
<p-card-section
258+
title="Subtitle supposedly here"
259+
readonly>
260+
<template #action>
261+
<a href="#" class="underline text-link dark:text-dark-link">Edit</a>
262+
</template>
263+
While here you will see the content of cards, everything goes here.
264+
If you need custom cards, take the component which more represent to
265+
what you need and detach it.
266+
</p-card-section>
267+
</p-card>
268+
</preview>
269+
270+
```vue
271+
<template>
272+
<p-card
273+
title="Card with Section"
274+
sectioned>
275+
<p-card-section>
276+
While here you will see the content of cards, everything goes here.
277+
If you need custom cards, take the component which more represent to
278+
what you need and detach it.
279+
</p-card-section>
280+
<p-card-section
281+
title="Subtitle supposedly here"
282+
readonly>
283+
<template #action>
284+
<a href="#" class="underline text-link dark:text-dark-link">Edit</a>
285+
</template>
286+
While here you will see the content of cards, everything goes here.
287+
If you need custom cards, take the component which more represent to
288+
what you need and detach it.
289+
</p-card-section>
290+
</p-card>
291+
</template>
292+
```
293+
222294
## Callout
223295
<preview>
224296
<p-card
@@ -337,18 +409,27 @@ Card use local CSS variables on `.card` for enhanced real-time customization.
337409

338410
## API
339411

340-
### Props
412+
### Props `<p-card>`
341413

342414
| Props | Type | Default | Description |
343415
|---------------|:---------:|:---------:|--------------------------------------------------------------|
344416
| `element` | `String` | `section` | Card element, valid value are `div`, `section` and `article` |
345417
| `title` | `String` | - | Card Header Title |
346418
| `sectioned` | `Boolean` | `false` | Enable Card Section |
347419
| `disabled` | `Boolean` | `false` | Disable (look-like) Card |
420+
| `readonly` | `Boolean` | `false` | Readonly (look-like) Card |
348421
| `callout` | `Boolean` | `false` | Enable Callout |
349422
| `dismissable` | `Boolean` | `true` | Show / Hide dismiss button |
350423
| `spacing` | `String` | `md` | Card spacing, valid value are `sm`, `md`, `lg` and `xl` |
351424

425+
### Props `<p-card-section>`
426+
427+
| Props | Type | Default | Description |
428+
|---------------|:---------:|:---------:|--------------------------------------------------------------|
429+
| `title` | `String` | - | Card Header Title |
430+
| `disabled` | `Boolean` | `false` | Disable (look-like) Card |
431+
| `readonly` | `Boolean` | `false` | Readonly (look-like) Card |
432+
352433
### Slots
353434
| Name | Description |
354435
|-----------|--------------------------------------------------------------------------------------------------|

0 commit comments

Comments
 (0)