test(card): complete the missing test of card and card-section

privy-open-source · Nov 8, 2024 · 61e888e · 61e888e
1 parent ff8321c
commit 61e888e
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 6 deletions.
diff --git a/src/components/card/Card.spec.ts b/src/components/card/Card.spec.ts
@@ -37,6 +37,22 @@ it('Card should have style "disabled" if disabled is provided', () => {
   expect(card).toHaveClass('card', 'card--disabled')
 })
 
+it('Card should have style readonly if `readonly` prop is provided', () => {
+  const screen = render({
+    components: { Card },
+    template  : `
+      <Card readonly>
+        Content
+      </Card>
+    `,
+  })
+
+  const card = screen.queryByTestId('card')
+
+  expect(card).toBeInTheDocument()
+  expect(card).toHaveClass('card', 'card--readonly')
+})
+
 it('should be able to add Card Header via slot `header`', () => {
   const screen = render({
     components: { Card, Button },

diff --git a/src/components/card/Card.vue b/src/components/card/Card.vue
@@ -76,6 +76,10 @@ const props = defineProps({
     type   : Boolean,
     default: false,
   },
+  readonly: {
+    type   : Boolean,
+    default: false,
+  },
   callout: {
     type   : Boolean,
     default: false,
@@ -109,6 +113,9 @@ const classNames = computed(() => {
   if (props.disabled)
     result.push('card--disabled')
 
+  if (props.readonly)
+    result.push('card--readonly')
+
   if (props.callout)
     result.push('card--callout')
 
@@ -143,7 +150,7 @@ defineSlots<{
 * Component Name: Card
 * Component URI : https : //www.figma.com/file/JIYmbyRYZHc9bnVp6Npm9K/B-A-S-E-%2F-Components?node-id=294%3A5079
 * Date Created  : May 22, 2022
-* Last Update   : May 23, 2022
+* Last Update   : Nov 08, 2024
 */
 .card {
   --p-card-padding-x: theme(spacing.6);
@@ -244,6 +251,15 @@ defineSlots<{
   * padding of card-body-top-parent set to 0
   */
   &&--sectioned {
+    &:has(.card__section--readonly) {
+      .card__section:first-child:where(.card__section--readonly) {
+        @apply rounded-t-[var(--p-card-border-radius)];
+      }
+
+      .card__section:last-child:where(.card__section--readonly) {
+        @apply rounded-b-[var(--p-card-border-radius)];
+      }
+    }
     > .card__body {
       @apply p-0;
     }
@@ -254,8 +270,16 @@ defineSlots<{
   * If Card disabled
   */
   &&--disabled {
-    @apply bg-subtle;
-    @apply dark:bg-dark-subtle;
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  /**
+  * Give background base
+  * when Card are readonly
+  */
+  &&--readonly {
+    @apply bg-base cursor-not-allowed;
+    @apply dark:bg-dark-base;
   }
 
   /**
@@ -309,8 +333,13 @@ defineSlots<{
 
     &&--disabled,
     &.card--disabled {
-      @apply bg-subtle;
-      @apply dark:bg-dark-subtle;
+      @apply opacity-50 cursor-not-allowed;
+    }
+
+    &&--readonly,
+    &.card--readonly {
+      @apply bg-base cursor-not-allowed;
+      @apply dark:bg-dark-base;
     }
 
     &.card--disabled {

diff --git a/src/components/card/CardSection.spec.ts b/src/components/card/CardSection.spec.ts
@@ -44,6 +44,24 @@ it('Card-Section should have style "disabled" if disabled is provided', () => {
   expect(cardSection).toHaveClass('card__section', 'card__section--disabled')
 })
 
+it('Card-Section should have style readonly if `readonly` prop is provided', () => {
+  const screen = render({
+    components: { Card, CardSection },
+    template  : `
+      <Card sectioned>
+        <Card-Section readonly>
+          Content
+        </Card-Section>
+      </Card>
+    `,
+  })
+
+  const cardSection = screen.queryByTestId('card-section')
+
+  expect(cardSection).toBeInTheDocument()
+  expect(cardSection).toHaveClass('card__section', 'card__section--readonly')
+})
+
 it('should be able to add Card Header via slot `header`', () => {
   const screen = render({
     components: {

diff --git a/src/components/card/CardSection.vue b/src/components/card/CardSection.vue
@@ -54,6 +54,10 @@ const props = defineProps({
     type   : Boolean,
     default: false,
   },
+  readonly: {
+    type   : Boolean,
+    default: false,
+  },
 })
 
 const classNames = computed(() => {
@@ -62,6 +66,9 @@ const classNames = computed(() => {
   if (props.disabled)
     result.push('card__section--disabled')
 
+  if (props.readonly)
+    result.push('card__section--readonly')
+
   return result
 })
 

diff --git a/src/components/card/index.md b/src/components/card/index.md
@@ -219,6 +219,78 @@ description: Take picture from user's camera
 </template>
 ```
 
+## Disabled
+When the `disabled` prop is set to true, the card component will visually indicate that it is disabled.
+These state are works in `<p-card-section>` too.
+<preview>
+  <p-card
+    disabled
+    title="Judul apapun seharusnya disini">
+    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.
+  </p-card>
+</preview>
+
+```vue
+<template>
+  <p-card
+    disabled
+    title="Judul apapun seharusnya disini">
+    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.
+  </p-card>
+</template>
+```
+
+## Readonly
+Card also has readonly state. The card background will visually change if the `readonly` prop is set to true.
+These state are also work in `<p-card-section>`.
+<preview>
+  <p-card
+    title="Card with Section"
+    sectioned>
+    <p-card-section>
+      While here you will see the content of cards, everything goes here.
+      If you need custom cards, take the component which more represent to
+      what you need and detach it.
+    </p-card-section>
+    <p-card-section
+      title="Subtitle supposedly here"
+      readonly>
+      <template #action>
+        <a href="#" class="underline text-link dark:text-dark-link">Edit</a>
+      </template>
+      While here you will see the content of cards, everything goes here.
+      If you need custom cards, take the component which more represent to
+      what you need and detach it.
+    </p-card-section>
+  </p-card>
+</preview>
+
+```vue
+<template>
+  <p-card
+    title="Card with Section"
+    sectioned>
+    <p-card-section>
+      While here you will see the content of cards, everything goes here.
+      If you need custom cards, take the component which more represent to
+      what you need and detach it.
+    </p-card-section>
+    <p-card-section
+      title="Subtitle supposedly here"
+      readonly>
+      <template #action>
+        <a href="#" class="underline text-link dark:text-dark-link">Edit</a>
+      </template>
+      While here you will see the content of cards, everything goes here.
+      If you need custom cards, take the component which more represent to
+      what you need and detach it.
+    </p-card-section>
+  </p-card>
+</template>
+```
+
 ## Callout
 <preview>
   <p-card
@@ -337,18 +409,27 @@ Card use local CSS variables on `.card` for enhanced real-time customization.
 
 ## API
 
-### Props
+### Props `<p-card>`
 
 | Props         |   Type    |  Default  | Description                                                  |
 |---------------|:---------:|:---------:|--------------------------------------------------------------|
 | `element`     | `String`  | `section` | Card element, valid value are `div`, `section` and `article` |
 | `title`       | `String`  |     -     | Card Header Title                                            |
 | `sectioned`   | `Boolean` |  `false`  | Enable Card Section                                          |
 | `disabled`    | `Boolean` |  `false`  | Disable (look-like) Card                                     |
+| `readonly`    | `Boolean` |  `false`  | Readonly (look-like) Card                                    |
 | `callout`     | `Boolean` |  `false`  | Enable Callout                                               |
 | `dismissable` | `Boolean` |  `true`   | Show / Hide dismiss button                                   |
 | `spacing`     | `String`  |  `md`     | Card spacing, valid value are `sm`, `md`, `lg` and `xl`      |
 
+### Props `<p-card-section>`
+
+| Props         |   Type    |  Default  | Description                                                  |
+|---------------|:---------:|:---------:|--------------------------------------------------------------|
+| `title`       | `String`  |     -     | Card Header Title                                            |
+| `disabled`    | `Boolean` |  `false`  | Disable (look-like) Card                                     |
+| `readonly`    | `Boolean` |  `false`  | Readonly (look-like) Card                                    |
+
 ### Slots
 | Name      | Description                                                                                      |
 |-----------|--------------------------------------------------------------------------------------------------|