@akad/design-system 1.1.8 → 1.1.9

package/react/src/components/atoms/Card/Card.config.d.ts

@@ -37,6 +37,14 @@ export declare enum CardColor {
     InfoLight = "info-light",
     InfoLighter = "info-lighter"
 }
+export declare enum CardSize {
+    None = "none",
+    Quark = "quark",
+    Nano = "nano",
+    XXXS = "xxxs",
+    XXS = "xxs",
+    XS = "xs"
+}
 export declare enum CardElevation {
     Elevation = 0,
     Elevation1 = 1,
@@ -67,6 +75,11 @@ export interface CardTestIdProps {
     type: StringConstructor;
     default: string;
 }
+export interface CardSizeProps {
+    type: StringConstructor;
+    default: CardSize;
+    options: CardSize[];
+}
 export interface CardConfig {
     name: string;
     class: string;
@@ -76,6 +89,7 @@ export interface CardConfig {
         elevation: CardElevationProps;
         id: CardIdProps;
         testId: CardTestIdProps;
+        size: CardSizeProps;
     };
 }
 declare const cardConfig: CardConfig;

package/react/src/components/atoms/Card/Card.d.ts

@@ -8,9 +8,10 @@ export interface DsCardProps {
     elevation?: number;
     backgroundColor?: string;
     borderColor?: string;
+    size?: string;
 }
 declare const DsCard: {
-    ({ id, testId, children, className, elevation, backgroundColor, borderColor, }: DsCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ id, testId, children, className, elevation, backgroundColor, borderColor, size, }: DsCardProps): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         id: PropTypes.Requireable<string>;
         testId: PropTypes.Requireable<string>;

package/react/src/components/atoms/Card/Card.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react';
+import { CardSize } from './Card.config';
 import { DsCardProps } from '.';
 
 declare const ComponentProps: Meta;
@@ -21,3 +22,17 @@ export declare const WithBackground: {
         backgroundColor: string;
     };
 };
+export declare const WithSize: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsCardProps>;
+    args: {
+        size: CardSize;
+        elevation: number;
+    };
+};
+export declare const WithoutPadding: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsCardProps>;
+    args: {
+        size: CardSize;
+        elevation: number;
+    };
+};

package/scss/core/components/atoms/card.scss

@@ -13,9 +13,32 @@
   font-family: var(--font__family--base);
   font-size: $font__size--xs;
   gap: $spacing--nano;
-  padding: $spacing--xxxs;
   position: relative;
 
+  &--none {
+    padding: 0;
+  }
+
+  &--quark {
+    padding: $spacing--quark;
+  }
+
+  &--nano {
+    padding: $spacing--nano;
+  }
+
+  &--xxxs {
+    padding: $spacing--xxxs;
+  }
+
+  &--xxs {
+    padding: $spacing--xxs;
+  }
+
+  &--xs {
+    padding: $spacing--xs;
+  }
+
   // NO utility classes here
   // Use global utilities instead:
   // - Background: .bg-color__primary, .bg-color__secondary, etc.