@akad/design-system 1.1.8 → 1.1.10

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/react/src/components/atoms/Input/Input.d.ts

@@ -20,6 +20,7 @@ export interface DsInputProps extends React.HTMLAttributes<HTMLDivElement> {
     hasFeedback?: boolean;
     noMargin?: boolean;
     disabled?: boolean;
+    autoFocus?: boolean;
     mask?: string | object;
     onChangeHandler?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onBlurHandler?: (event: React.FocusEvent<HTMLInputElement>) => void;

package/react/src/components/molecules/EditableSelect/EditableSelect.config.d.ts

@@ -28,6 +28,10 @@ export interface EditableSelectAnimatedProps {
     type: BooleanConstructor;
     default: boolean;
 }
+export interface EditableSelectInputAutoFocusProps {
+    type: BooleanConstructor;
+    default: boolean;
+}
 export interface EditableSelectPlaceholderProps {
     type: StringConstructor;
     default: string;
@@ -88,6 +92,7 @@ export interface EditableSelectConfig {
         label: EditableSelectLabelProps;
         testId: EditableSelectTestIdProps;
         animated: EditableSelectAnimatedProps;
+        inputAutoFocus: EditableSelectInputAutoFocusProps;
         loading: EditableSelectLoadingProps;
         disabled: EditableSelectDisabledProps;
         icon: EditableSelectIconProps;

package/react/src/components/molecules/EditableSelect/EditableSelect.d.ts

@@ -111,6 +111,7 @@ export interface DsEditableSelectProps {
     placeholder?: string;
     loading?: boolean;
     animated?: boolean;
+    inputAutoFocus?: boolean;
     onBlurHandler?: () => void;
     onFocusHandler?: () => void;
     showOptionsOnFocus?: boolean;
@@ -127,7 +128,7 @@ export interface DsEditableSelectProps {
     inputOnKeyDownHandler?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 declare const DsEditableSelect: {
-    ({ label, name, testId, value, options, size, onChangeHandler, onSelectHandler, onClearHandler, icon, noOptionsMessage, disabled, status, onBlurHandler, onFocusHandler, animated, placeholder, loading, showOptionsOnFocus, inputType, inputMin, inputMax, inputTooltip, inputTooltipPosition, inputTooltipPlacement, inputFeedback, inputHasFeedback, inputNoMargin, inputMask, inputOnKeyDownHandler, }: DsEditableSelectProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, name, testId, value, options, size, onChangeHandler, onSelectHandler, onClearHandler, icon, noOptionsMessage, disabled, status, onBlurHandler, onFocusHandler, animated, inputAutoFocus, placeholder, loading, showOptionsOnFocus, inputType, inputMin, inputMax, inputTooltip, inputTooltipPosition, inputTooltipPlacement, inputFeedback, inputHasFeedback, inputNoMargin, inputMask, inputOnKeyDownHandler, }: DsEditableSelectProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DsEditableSelect;

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.