@bethinkpl/design-system 41.1.5 → 43.0.0

package/lib/js/components/Cards/Card/Card.vue

@@ -3,12 +3,17 @@
 		:class="[
 			'ds-card',
 			{
+				'-ds-paddingMedium': paddingSize === CARD_PADDING_SIZES.MEDIUM,
 				'-ds-paddingLarge': paddingSize === CARD_PADDING_SIZES.LARGE,
 				'-ds-leftRibbon':
 					hasRibbon && !hasLoadingBar && ribbonPosition === CARD_RIBBON_POSITIONS.LEFT,
-				'-ds-flat': isFlat,
-				'-ds-noRadius': !hasRadius,
-				'-ds-backgroundNeutral': backgroundColor === CARD_BACKGROUND_COLORS.NEUTRAL,
+				'-ds-elevationTop': effectiveElevation === CARD_ELEVATIONS.TOP,
+				'-ds-elevationNone': effectiveElevation === CARD_ELEVATIONS.NONE,
+				'-ds-radiusTop': effectiveRadius === CARD_RADIUSES.TOP,
+				'-ds-radiusNone': effectiveRadius === CARD_RADIUSES.NONE,
+				'-ds-backgroundNeutral':
+					effectiveBackgroundColor === CARD_BACKGROUND_COLORS.NEUTRAL,
+				'-ds-backgroundNone': effectiveBackgroundColor === CARD_BACKGROUND_COLORS.NONE,
 			},
 		]"
 	>
@@ -80,23 +85,36 @@
 	$root: &;
 	$card-border-radius: $radius-m;
 
+	background-color: $color-default-background;
+	border-radius: $card-border-radius;
+	box-shadow: $shadow-s;
 	display: flex;
 	flex-direction: column;
 	position: relative;
 	width: inherit;
 
-	&:not(.-ds-flat) {
-		background-color: $color-default-background;
-		border-radius: $card-border-radius;
-		box-shadow: $shadow-s;
+	&.-ds-backgroundNeutral {
+		background-color: $color-neutral-background;
+	}
 
-		&.-ds-backgroundNeutral {
-			background-color: $color-neutral-background;
-		}
+	&.-ds-backgroundNone {
+		background-color: transparent;
+	}
 
-		&.-ds-noRadius {
-			border-radius: 0;
-		}
+	&.-ds-elevationTop {
+		box-shadow: $shadow-top-s;
+	}
+
+	&.-ds-elevationNone {
+		box-shadow: none;
+	}
+
+	&.-ds-radiusTop {
+		border-radius: $card-border-radius $card-border-radius 0 0;
+	}
+
+	&.-ds-radiusNone {
+		border-radius: 0;
 	}
 
 	&.-ds-leftRibbon {
@@ -127,6 +145,10 @@
 		&.-ds-withPadding {
 			padding: $space-8;
 
+			#{$root}.-ds-paddingMedium & {
+				padding: $space-12 $space-12 $space-8;
+			}
+
 			#{$root}.-ds-paddingLarge & {
 				padding: $space-16 $space-16 $space-8;
 			}
@@ -137,6 +159,10 @@
 		&.-ds-withHorizontalMargin {
 			margin: 0 $space-8;
 
+			#{$root}.-ds-paddingMedium & {
+				margin: 0 $space-12;
+			}
+
 			#{$root}.-ds-paddingLarge & {
 				margin: 0 $space-16;
 			}
@@ -149,6 +175,10 @@
 		&.-ds-withPadding {
 			padding: $space-8;
 
+			#{$root}.-ds-paddingMedium & {
+				padding: $space-8 $space-12;
+			}
+
 			#{$root}.-ds-paddingLarge & {
 				padding: $space-8 $space-16;
 			}
@@ -164,6 +194,10 @@
 		&.-ds-withPadding {
 			padding: 0 $space-8 $space-8;
 
+			#{$root}.-ds-paddingMedium & {
+				padding: 0 $space-12 $space-12;
+			}
+
 			#{$root}.-ds-paddingLarge & {
 				padding: 0 $space-16 $space-16;
 			}
@@ -176,20 +210,21 @@
 		display: flex;
 		flex-shrink: 0;
 
-		#{$root}:not(.-ds-flat) & {
+		#{$root}:not(.-ds-radiusNone) & {
 			border-top-left-radius: $card-border-radius;
 			border-top-right-radius: $card-border-radius;
 			overflow: hidden;
 		}
 
-		#{$root}:not(.-ds-flat).-ds-leftRibbon & {
-			border-bottom-left-radius: $card-border-radius;
+		#{$root}:not(.-ds-radiusNone).-ds-leftRibbon & {
 			border-top-left-radius: $card-border-radius;
 			border-top-right-radius: 0;
 		}
 
-		#{$root}:not(.-ds-flat).-ds-noRadius & {
-			border-radius: 0;
+		// a left ribbon spans the full height of the card, so its bottom corner is
+		// only rounded when the card itself is rounded at the bottom
+		#{$root}:not(.-ds-radiusNone):not(.-ds-radiusTop).-ds-leftRibbon & {
+			border-bottom-left-radius: $card-border-radius;
 		}
 
 		.-ds-leftRibbon & {
@@ -213,13 +248,18 @@ import DsDivider from '../../Divider/Divider.vue';
 import DsLoadingBar, { LOADING_BAR_COLORS, LoadingBarColors } from '../../LoadingBar';
 import DsContainerRibbon from '../../ContainerRibbon/ContainerRibbon.vue';
 import { CONTAINER_RIBBON_LAYOUTS, CONTAINER_RIBBON_RADIUSES } from '../../ContainerRibbon';
+import { RemovedProp } from '../../../utils/type.utils';
 import {
 	CARD_BACKGROUND_COLORS,
+	CARD_ELEVATIONS,
+	CARD_RADIUSES,
 	CARD_RIBBON_COLORS,
 	CARD_RIBBON_POSITIONS,
 	CARD_RIBBON_SIZES,
 	CARD_PADDING_SIZES,
 	CardBackgroundColor,
+	CardElevation,
+	CardRadius,
 	CardRibbonColors,
 	CardRibbonPositions,
 	CardRibbonSizes,
@@ -234,8 +274,10 @@ const {
 	paddingSize = CARD_PADDING_SIZES.SMALL,
 	dividerUnderHeader = false,
 	hasRibbon = false,
-	hasRadius = true,
+	elevation = CARD_ELEVATIONS.DEFAULT,
+	radius = CARD_RADIUSES.ALL,
 	backgroundColor = CARD_BACKGROUND_COLORS.DEFAULT,
+	isFlat = false,
 	ribbonPosition = CARD_RIBBON_POSITIONS.TOP,
 	ribbonSize = CARD_RIBBON_SIZES.MEDIUM,
 	ribbonColor = CARD_RIBBON_COLORS.NEUTRAL_HEAVY,
@@ -243,7 +285,6 @@ const {
 	hasLoadingBar = false,
 	loadingBarColor = LOADING_BAR_COLORS.NEUTRAL_HEAVY,
 	loadingBarTime = '0',
-	isFlat = false,
 	isContentScrollable = false,
 } = defineProps<{
 	contentHasPadding?: boolean;
@@ -252,8 +293,15 @@ const {
 	paddingSize?: CardPaddingSize;
 	dividerUnderHeader?: boolean;
 	hasRibbon?: boolean;
-	hasRadius?: boolean;
+	elevation?: CardElevation;
+	radius?: CardRadius;
 	backgroundColor?: CardBackgroundColor;
+	/**
+	 * Shorthand for `elevation="none"`, `radius="none"` and `background-color="none"`.
+	 * An axis explicitly set to a non-default value still wins over `isFlat`,
+	 * so `is-flat radius="top"` keeps the top corners rounded.
+	 */
+	isFlat?: boolean;
 	ribbonPosition?: CardRibbonPositions;
 	ribbonSize?: CardRibbonSizes;
 	ribbonColor?: CardRibbonColors;
@@ -261,8 +309,10 @@ const {
 	hasLoadingBar?: boolean;
 	loadingBarColor?: LoadingBarColors;
 	loadingBarTime?: string;
-	isFlat?: boolean;
 	isContentScrollable?: boolean;
+	// Removed props kept as removal markers so existing usages fail type-checking.
+	/** @deprecated renamed to `radius` (all | top | none) */
+	hasRadius?: RemovedProp<'renamed to radius'>;
 }>();
 
 defineSlots<{
@@ -280,12 +330,29 @@ const ribbonLayout = computed(() => {
 	return layoutMap[ribbonPosition] || CONTAINER_RIBBON_LAYOUTS.HORIZONTAL;
 });
 
+// `isFlat` is a shorthand that lowers the defaults of the three visual axes to `none`.
+// An axis explicitly set to a non-default value still wins, so `isFlat` combines with
+// e.g. `radius="top"`.
+const effectiveElevation = computed(() =>
+	isFlat && elevation === CARD_ELEVATIONS.DEFAULT ? CARD_ELEVATIONS.NONE : elevation,
+);
+
+const effectiveRadius = computed(() =>
+	isFlat && radius === CARD_RADIUSES.ALL ? CARD_RADIUSES.NONE : radius,
+);
+
+const effectiveBackgroundColor = computed(() =>
+	isFlat && backgroundColor === CARD_BACKGROUND_COLORS.DEFAULT
+		? CARD_BACKGROUND_COLORS.NONE
+		: backgroundColor,
+);
+
 const ribbonRadius = computed(() => {
 	const ribbonPositionToRibbonRadiusMap = {
 		[CARD_RIBBON_POSITIONS.TOP]: CONTAINER_RIBBON_RADIUSES.BOTTOM,
 		[CARD_RIBBON_POSITIONS.LEFT]: CONTAINER_RIBBON_RADIUSES.RIGHT,
 	};
-	return hasRibbonRadius && (isFlat || !hasRadius)
+	return hasRibbonRadius && effectiveRadius.value === CARD_RADIUSES.NONE
 		? ribbonPositionToRibbonRadiusMap[ribbonPosition]
 		: CONTAINER_RIBBON_RADIUSES.NONE;
 });

package/lib/js/components/Dropdown/Dropdown.vue

@@ -36,30 +36,26 @@
 </template>
 
 <style lang="scss" scoped>
-@import '../../../../lib/styles/settings/colors/tokens';
-@import '../../../../lib/styles/settings/radiuses';
 @import '../../../../lib/styles/settings/spacings';
-@import '../../../../lib/styles/settings/shadows';
+@import '../../../../lib/styles/mixins/dropdown-surface';
 
 .ds-dropdown {
-	background-color: $color-default-background;
+	@include dropdownSurface;
+
+	// Resets for the styles vue-popperjs ships in vue-popper.css.
 	border: 0;
 	border-radius: 0;
-	box-shadow: $shadow-m;
 	max-width: 100%;
 	min-width: 128px;
-	overflow: hidden;
 	padding: 0;
 	text-align: left;
 
 	&.-ds-radiusBottom {
-		border-bottom-left-radius: $radius-s;
-		border-bottom-right-radius: $radius-s;
+		@include dropdownSurfaceRadiusBottom;
 	}
 
 	&.-ds-radiusTop {
-		border-top-left-radius: $radius-s;
-		border-top-right-radius: $radius-s;
+		@include dropdownSurfaceRadiusTop;
 	}
 
 	&[x-placement^='bottom'] {

package/lib/js/components/Form/Form.stories.ts

@@ -6,6 +6,7 @@ import { useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
 import { array, object, string } from 'zod';
 import CheckboxGroupField from './CheckboxGroupField/CheckboxGroupField.vue';
+import SelectField from './SelectField';
 import Button from '../Buttons/Button';
 
 export default {
@@ -14,16 +15,18 @@ export default {
 } as Meta<any>;
 
 export const SimpleForm = () => ({
-	components: { InputField, CheckboxGroupField, Checkbox, Button },
+	components: { InputField, CheckboxGroupField, Checkbox, SelectField, Button },
 	setup: () => {
 		const { handleSubmit } = useForm({
 			initialValues: {
 				fullName: '',
+				country: '',
 				newsletterTopics: [],
 			},
 			validationSchema: toTypedSchema(
 				object({
 					fullName: string().min(1, 'Imię i nazwisko jest wymagane'),
+					country: string().min(1, 'Kraj jest wymagany'),
 					newsletterTopics: array(string()).min(
 						1,
 						'Wybierz przynajmniej jeden temat newslettera',
@@ -43,11 +46,22 @@ export const SimpleForm = () => ({
 
 		return {
 			onSubmit,
+			countryOptions: [
+				{ value: 'pl', label: 'Polska' },
+				{ value: 'de', label: 'Niemcy' },
+				{ value: 'cz', label: 'Czechy' },
+			],
 		};
 	},
 	template: `
 		<form @submit.prevent="onSubmit" style="display: flex; flex-direction: column; gap: 16px; max-width: 400px;">
 			<InputField label="Imię i nazwisko" name="fullName" />
+			<SelectField
+				label="Kraj"
+				name="country"
+				placeholder="Wybierz kraj"
+				:options="countryOptions"
+			/>
 			<CheckboxGroupField label="Jakie tematy newslettera Cię interesują?" name="newsletterTopics">
 				<template #field>
 					<Checkbox value="technology">Technologia</Checkbox>