fix: refine card and adjust card spacing variant

privy-open-source · Sep 17, 2024 · 42869c9 · 42869c9
1 parent 1287780
commit 42869c9
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 9 deletions.
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
@@ -165,6 +165,15 @@ defineSlots<{
   --p-button-md-padding-x: theme(spacing.5);
   --p-button-lg-padding-x: theme(spacing.8);
 
+  /**
+  * only for button
+  * variant link
+  */
+  --p-button-xs-padding-y: theme(spacing[0.5]);
+  --p-button-sm-padding-y: theme(spacing.1);
+  --p-button-md-padding-y: theme(spacing[2.5]);
+  --p-button-lg-padding-y: theme(spacing.4);
+
   @apply inline-flex align-middle justify-center font-medium no-underline hover:no-underline disabled:opacity-50 disabled:pointer-events-none transition-all ease-in-out duration-200;
 
   > svg {
@@ -181,18 +190,34 @@ defineSlots<{
   */
   &&--xs {
     @apply px-[var(--p-button-xs-padding-x)] py-[2px] gap-1 text-sm rounded-xs;
+
+    &:where(.btn--variant-link) {
+      @apply py-[var(--p-button-xs-padding-y)];
+    }
   }
 
   &&--sm {
     @apply px-[var(--p-button-sm-padding-x)] py-1 gap-2 text-base tracking-wider rounded-sm;
+
+    &:where(.btn--variant-link) {
+      @apply py-[var(--p-button-sm-padding-y)];
+    }
   }
 
   &&--md {
     @apply px-[var(--p-button-md-padding-x)] py-[10px] gap-3 text-base tracking-wider rounded;
+
+    &:where(.btn--variant-link) {
+      @apply py-[var(--p-button-md-padding-y)];
+    }
   }
 
   &&--lg {
     @apply px-[var(--p-button-lg-padding-x)] py-4 gap-4 text-base tracking-wider rounded;
+
+    &:where(.btn--variant-link) {
+      @apply py-[var(--p-button-lg-padding-y)];
+    }
   }
 
   /*

diff --git a/src/components/button/index.md b/src/components/button/index.md
@@ -300,6 +300,12 @@ Button use local CSS variables on `.btn` for enhanced real-time customization.
 --p-button-sm-padding-x: theme(spacing.4);
 --p-button-md-padding-x: theme(spacing.5);
 --p-button-lg-padding-x: theme(spacing.8);
+
+/** only work in button variant link */
+--p-button-xs-padding-y: theme(spacing[0.5]);
+--p-button-sm-padding-y: theme(spacing.1);
+--p-button-md-padding-y: theme(spacing[2.5]);
+--p-button-lg-padding-y: theme(spacing.4);
 ```
 
 ## API

diff --git a/src/components/card/Card.spec.ts b/src/components/card/Card.spec.ts
@@ -192,3 +192,19 @@ it('should have custom body class via "body-class" props', () => {
   expect(body).toBeInTheDocument()
   expect(body).toHaveClass('bg-info')
 })
+
+it('should have custom spacing via `spacing` props', () => {
+  const screen = render({
+    components: { Card },
+    template  : `
+      <Card spacing="lg">
+        Content
+      </Card>
+    `,
+  })
+
+  const body = screen.queryByTestId('card')
+
+  expect(body).toBeInTheDocument()
+  expect(body).toHaveClass('card--spacing-lg')
+})
diff --git a/src/components/card/Card.vue b/src/components/card/Card.vue
@@ -57,7 +57,7 @@ import type { PropType, VNode } from 'vue-demi'
 import { computed, ref } from 'vue-demi'
 import IconClose from '@privyid/persona-icon/vue/close/16.vue'
 import Heading from '../heading/Heading.vue'
-import type { ElementVariant } from '.'
+import type { ElementVariant, SpacingVariant } from '.'
 
 const props = defineProps({
   element: {
@@ -88,6 +88,10 @@ const props = defineProps({
     type   : [String, Array],
     default: undefined,
   },
+  spacing: {
+    type   : String as PropType<SpacingVariant>,
+    default: 'md',
+  },
 })
 
 const emit = defineEmits<{
@@ -108,6 +112,9 @@ const classNames = computed(() => {
   if (props.callout)
     result.push('card--callout')
 
+  if (props.spacing)
+    result.push(`card--spacing-${props.spacing}`)
+
   return result
 })
 
@@ -147,16 +154,40 @@ defineSlots<{
   --p-card-border-dark: theme(borderColor.dark.default.DEFAULT);
   --p-card-color: theme(textColor.default);
   --p-card-color-dark: theme(textColor.dark.default);
+  --p-card-border-radius: theme(borderRadius.md);
+  --p-card-inside-border-radius: theme(borderRadius.DEFAULT);
 
-  @apply border bg-[color:var(--p-card-bg)] border-[color:var(--p-card-border)] text-[color:var(--p-card-color)] rounded-md;
+  @apply border bg-[color:var(--p-card-bg)] border-[color:var(--p-card-border)] text-[color:var(--p-card-color)] rounded-[var(--p-card-border-radius)];
   @apply dark:bg-[color:var(--p-card-bg-dark)] dark:border-[color:var(--p-card-border-dark)] dark:text-[color:var(--p-card-color-dark)];
 
   /**
   * Card inside card
   * has 8px rounded
   */
   .card {
-    @apply rounded;
+    @apply rounded-[var(--p-card-inside-border-radius)];
+  }
+
+  &&--spacing {
+    &-sm {
+      --p-card-padding-x: theme(spacing.4);
+      --p-card-padding-y: theme(spacing.4);
+    }
+
+    &-md {
+      --p-card-padding-x: theme(spacing.6);
+      --p-card-padding-y: theme(spacing.6);
+    }
+
+    &-lg {
+      --p-card-padding-x: theme(spacing.9);
+      --p-card-padding-y: theme(spacing.9);
+    }
+
+    &-xl {
+      --p-card-padding-x: theme(spacing.12);
+      --p-card-padding-y: theme(spacing.12);
+    }
   }
 
   /*
@@ -236,6 +267,10 @@ defineSlots<{
   }
 
   &__header {
+    .heading {
+      @apply font-medium leading-none;
+    }
+
     &&--default {
       @apply flex justify-between items-center;
     }
@@ -257,6 +292,11 @@ defineSlots<{
       @apply text-default/30 hover:text-default/50 hover:cursor-pointer;
       @apply dark:text-dark-default/30 hover:dark:text-dark-default/50;
     }
+
+    + .card__body,
+    + .card__section > .card__body {
+      @apply pt-4;
+    }
   }
 
   &__section {
@@ -279,7 +319,7 @@ defineSlots<{
   }
 
   &__footer {
-    @apply pb-[var(--p-card-padding-y)] px-[var(--p-card-padding-x)] pt-3;
+    @apply pb-[var(--p-card-padding-y)] px-[var(--p-card-padding-x)] pt-8;
   }
 }
 </style>
diff --git a/src/components/card/index.md b/src/components/card/index.md
@@ -69,7 +69,7 @@ description: Take picture from user's camera
   <p-card
     title="Any Title Should Here">
     <template #action>
-      <p-button color="info" variant="link">Button Text</p-button>
+      <p-button color="info" variant="link" style="--p-button-md-padding-y:0; --p-button-md-padding-x:0;">Button Text</p-button>
     </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
@@ -151,7 +151,7 @@ description: Take picture from user's camera
     title="Card with Sub-Section"
     sectioned>
     <template #action>
-      <p-button variant="link" color="info">Button Text</p-button>
+      <p-button variant="link" color="info" style="--p-button-md-padding-y:0; --p-button-md-padding-x:0;">Button Text</p-button>
     </template>
     <p-card-section>
       While here you will see the content of cards, everything goes here.
@@ -266,12 +266,67 @@ description: Take picture from user's camera
 </template>
 ```
 
+## Spacing
+Card component features 4 distinct spacing variants that adjust the size and 
+layout of the content within the card body. Each variant is designed to offer 
+flexibility in presentation and to suit different design needs. 
+There are `sm`, `md`, `lg` and `xl`. Default spacing are `md`.
+The spacing feature also work in `Sectioned card`.
+
+<preview>
+  <p-card spacing="sm">
+    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>
+  <p-card spacing="md">
+    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>
+  <p-card spacing="lg">
+    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>
+  <p-card spacing="xl">
+    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>
+</preview>
+
+```vue
+<template>
+  <p-card spacing="sm">
+    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>
+  <p-card spacing="md">
+    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>
+  <p-card spacing="lg">
+    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>
+  <p-card spacing="xl">
+    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>
+</template>
+```
+
 ## Variables
 Card use local CSS variables on `.card` for enhanced real-time customization.
 
 ```sass
---p-card-padding-x: theme(spacing.6);
---p-card-padding-y: theme(spacing.6);
+--p-card-border-radius: theme(borderRadius.md);
+--p-card-inside-border-radius: theme(borderRadius.DEFAULT);
 --p-card-bg: theme(backgroundColor.default.DEFAULT);
 --p-card-bg-dark: theme(backgroundColor.dark.default.DEFAULT);
 --p-card-border: theme(borderColor.default.DEFAULT);
@@ -286,12 +341,13 @@ Card use local CSS variables on `.card` for enhanced real-time customization.
 
 | Props         |   Type    |  Default  | Description                                                  |
 |---------------|:---------:|:---------:|--------------------------------------------------------------|
-| `element`     | `String`  | `section` | Card element, valid value is `div`, `section`, and `article` |
+| `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                                     |
 | `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`      |
 
 ### Slots
 | Name      | Description                                                                                      |

diff --git a/src/components/card/index.ts b/src/components/card/index.ts
@@ -1 +1,2 @@
 export type ElementVariant = 'div' | 'section' | 'article'
+export type SpacingVariant = 'sm' | 'md' | 'lg' | 'xl'
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export type ElementVariant = 'div' \| 'section' \| 'article'
		export type SpacingVariant = 'sm' \| 'md' \| 'lg' \| 'xl'