docs(design): clean up card documentation

libs/design-examples/card/src/basic-cards/basic-cards.component.html

@@ -0,0 +1,43 @@
+<daff-card>
+  <daff-image
+    daffCardImage
+    src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
+    alt="Bottom up view of Basel exhibition centre"
+    width="1261"
+    height="946"
+  >
+  </daff-image>
+  <fa-icon daffCardIcon [icon]="faMapMarked"></fa-icon>
+  <div daffCardTagline>Basel, Switzerland</div>
+  <h4 daffCardTitle>Basel Exhibition Centre</h4>
+  <div daffCardContent>
+    <p>
+      This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zumHimmel" ("window to heaven").
+    </p>
+  </div>
+  <div daffCardActions>
+    <button daff-button color="theme-contrast">Learn More</button>
+  </div>
+</daff-card>
+
+<daff-stroked-card>
+  <daff-image
+    daffCardImage
+    src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
+    alt="Bottom up view of Basel exhibition centre"
+    width="1261"
+    height="946"
+  >
+  </daff-image>
+  <fa-icon daffCardIcon [icon]="faMapMarked"></fa-icon>
+  <div daffCardTagline>Basel, Switzerland</div>
+  <h4 daffCardTitle>Basel Exhibition Centre</h4>
+  <div daffCardContent>
+    <p>
+      This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zumHimmel" ("window to heaven").
+    </p>
+  </div>
+  <div daffCardActions>
+    <button daff-button color="theme-contrast">Learn More</button>
+  </div>
+</daff-stroked-card>

libs/design-examples/card/src/basic-cards/basic-cards.component.scss

@@ -0,0 +1,12 @@
+:host {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	container-type: inline-size;
+
+	@container (width > 480px) {
+		> * {
+			flex-basis: calc(50% - 0.5rem);
+		}
+	}
+}

libs/design-examples/card/src/basic-card/basic-card.component.ts → libs/design-examples/card/src/basic-cards/basic-cards.component.ts

@@ -6,21 +6,21 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { faMapMarked } from '@fortawesome/free-solid-svg-icons';
 
 import { DaffButtonComponent } from '@daffodil/design/button';
-import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
+import { DAFF_ALL_CARD_COMPONENTS } from '@daffodil/design/card';
 import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 
 @Component({
-  selector: 'basic-card-example',
-  templateUrl: './basic-card.component.html',
-  styleUrls: ['./basic-card.component.scss'],
+  selector: 'basic-cards-example',
+  templateUrl: './basic-cards.component.html',
+  styleUrls: ['./basic-cards.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    DAFF_CARD_COMPONENTS,
+    DAFF_ALL_CARD_COMPONENTS,
     DAFF_IMAGE_COMPONENTS,
     FaIconComponent,
     DaffButtonComponent,
   ],
 })
-export class BasicCardExampleComponent {
+export class BasicCardsExampleComponent {
   faMapMarked = faMapMarked;
 }

libs/design-examples/card/src/card-orientation/card-orientation.component.html

@@ -1,30 +1,30 @@
-<daff-card [orientation]="orientationControl.value">
+<daff-form-field>
+  <daff-form-label>Orientation</daff-form-label>
+  <daff-select [options]="options" [formControl]="orientationControl">
+    <ng-template daffSelectOption let-option="option">
+      {{ option.label }}
+    </ng-template>
+  </daff-select>
+</daff-form-field>
+
+<daff-card [orientation]="orientationControl.value?.value">
   <daff-image
     daffCardImage
-    src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
-    alt="Bottom up view of Basel exhibition centre"
+    src="https://images.unsplash.com/photo-1460353581641-37baddab0fa2?auto=format&fit=crop&w=3774&q=80"
+    alt="Assortment of running shoes lined up"
     width="1261"
     height="946"
   >
   </daff-image>
-  <fa-icon daffCardIcon [icon]="faMapMarked"></fa-icon>
-  <div daffCardTagline>Basel, Switzerland</div>
-  <h4 daffCardTitle>Basel Exhibition Centre</h4>
+  <div daffCardTagline>Featured Category</div>
+  <h4 daffCardTitle>Running Shoes</h4>
   <div daffCardContent>
     <p>
-      This covered, public space not only marks the entrance to the exhibitions,
-      but also functions as a meeting place for locals and visitors. The
-      architects called the prominent hole in the middle the "Fenster zum
-      Himmel" ("window to heaven").
+      Discover our latest lineup of running shoes, built for everyday
+      training and race day performance.
     </p>
   </div>
   <div daffCardActions>
-    <button daff-button color="theme-contrast">Learn More</button>
+    <button daff-button color="theme-contrast">Shop Now</button>
   </div>
 </daff-card>
-
-<select [formControl]="orientationControl">
-  @for (option of options; track option) {
-  <option [value]="option.value">{{ option.label }}</option>
-  }
-</select>

libs/design-examples/card/src/card-orientation/card-orientation.component.scss

@@ -1,4 +1,19 @@
-// stylelint-disable scss/selector-nest-combinators
-daff-card.vertical {
-  max-width: 560px;
+:host {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1rem;
+
+	daff-form-field {
+		max-width: 15rem;
+		width: 100%;
+	}
+
+	daff-card {
+		width: 100%;
+
+		&.daff-vertical {
+			max-width: 30rem;
+		}
+	}
 }

libs/design-examples/card/src/card-orientation/card-orientation.component.ts

@@ -11,7 +11,9 @@ import { faMapMarked } from '@fortawesome/free-solid-svg-icons';
 
 import { DaffButtonComponent } from '@daffodil/design/button';
 import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';
+import { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design/form-field';
 import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
+import { DAFF_SELECT_COMPONENTS } from '@daffodil/design/select';
 
 @Component({
   selector: 'card-orientation-example',
@@ -20,7 +22,9 @@ import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_CARD_COMPONENTS,
+    DAFF_FORM_FIELD_COMPONENTS,
     DAFF_IMAGE_COMPONENTS,
+    DAFF_SELECT_COMPONENTS,
     FaIconComponent,
     DaffButtonComponent,
     ReactiveFormsModule,
@@ -29,11 +33,11 @@ import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 export class CardOrientationExampleComponent {
   faMapMarked = faMapMarked;
 
-  orientationControl: UntypedFormControl = new UntypedFormControl('');
-
   options = [
     { value: '', label: 'Default' },
     { value: 'vertical', label: 'Vertical' },
     { value: 'horizontal', label: 'Horizontal' },
   ];
+
+  orientationControl: UntypedFormControl = new UntypedFormControl(this.options[0]);
 }

libs/design-examples/card/src/card-theming/card-theming.component.html

@@ -1,27 +1,37 @@
-<daff-card [color]="cardControl.value">
-  <div daffCardTagline>Card Tagline</div>
-  <div daffCardTitle>Title</div>
-  <div daffCardContent>
-    <p>Cards are themable.</p>
-  </div>
-</daff-card>
+<div class="daff-card-theming__example-wrapper">
+  <daff-form-field>
+    <daff-form-label>Color</daff-form-label>
+    <daff-select [options]="options" [formControl]="cardControl">
+      <ng-template daffSelectOption let-option="option">
+        {{ option.label }}
+      </ng-template>
+    </daff-select>
+  </daff-form-field>
 
-<select [formControl]="cardControl">
-  @for (option of options; track option) {
-  <option [value]="option.value">{{ option.label }}</option>
-  }
-</select>
+  <daff-card [color]="cardControl.value">
+    <div daffCardTagline>Card Tagline</div>
+    <div daffCardTitle>Title</div>
+    <div daffCardContent>
+      <p>Cards are themable.</p>
+    </div>
+  </daff-card>
+</div>
 
-<daff-stroked-card [color]="strokedCardControl.value">
-  <div daffCardTagline>Card Tagline</div>
-  <div daffCardTitle>Title</div>
-  <div daffCardContent>
-    <p>Cards are themable.</p>
-  </div>
-</daff-stroked-card>
+<div class="daff-card-theming__example-wrapper">
+  <daff-form-field>
+    <daff-form-label>Color</daff-form-label>
+    <daff-select [options]="options" [formControl]="strokedCardControl">
+      <ng-template daffSelectOption let-option="option">
+        {{ option.label }}
+      </ng-template>
+    </daff-select>
+  </daff-form-field>
 
-<select [formControl]="strokedCardControl">
-  @for (option of options; track option) {
-  <option [value]="option.value">{{ option.label }}</option>
-  }
-</select>
+  <daff-stroked-card [color]="strokedCardControl.value">
+    <div daffCardTagline>Card Tagline</div>
+    <div daffCardTitle>Title</div>
+    <div daffCardContent>
+      <p>Cards are themable.</p>
+    </div>
+  </daff-stroked-card>
+</div>

libs/design-examples/card/src/card-theming/card-theming.component.scss

@@ -0,0 +1,23 @@
+:host {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	container-type: inline-size;
+}
+
+.daff-card-theming {
+	&__example-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+
+		@container (width > 480px) {
+			flex-basis: calc(50% - 0.5rem);
+		}
+
+		daff-form-field {
+			max-width: 15rem;
+			width: 100%;
+		}
+	}
+}

libs/design-examples/card/src/card-theming/card-theming.component.ts

@@ -11,26 +11,23 @@ import {
   DAFF_CARD_COMPONENTS,
   DAFF_STROKED_CARD_COMPONENTS,
 } from '@daffodil/design/card';
+import { DAFF_FORM_FIELD_COMPONENTS } from '@daffodil/design/form-field';
+import { DAFF_SELECT_COMPONENTS } from '@daffodil/design/select';
 
 @Component({
   selector: 'card-theming-example',
   templateUrl: './card-theming.component.html',
-  styles: [`
-    daff-card, daff-stroked-card {
-      max-width: 480px;
-    }
-  `],
+  styleUrl: './card-theming.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     DAFF_CARD_COMPONENTS,
     DAFF_STROKED_CARD_COMPONENTS,
+    DAFF_FORM_FIELD_COMPONENTS,
+    DAFF_SELECT_COMPONENTS,
     ReactiveFormsModule,
   ],
 })
 export class CardThemingExampleComponent {
-  cardControl: UntypedFormControl = new UntypedFormControl('');
-  strokedCardControl: UntypedFormControl = new UntypedFormControl('');
-
   options = [
     { value: '', label: 'Default' },
     { value: 'primary', label: 'Primary' },
@@ -41,4 +38,7 @@ export class CardThemingExampleComponent {
     { value: 'dark', label: 'Dark' },
     { value: 'light', label: 'Light' },
   ];
+
+  cardControl: UntypedFormControl = new UntypedFormControl(this.options[0]);
+  strokedCardControl: UntypedFormControl = new UntypedFormControl(this.options[0]);
 }

libs/design-examples/card/src/elevated-card/elevated-card.component.html

@@ -1,41 +1,19 @@
 <daff-card [elevated]="true">
-  <daff-image
-    daffCardImage
-    src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
-    alt="Bottom up view of Basel exhibition centre"
-    width="1261"
-    height="946"
-  >
-  </daff-image>
-  <div daffCardTagline>Basel, Switzerland</div>
-  <h4 daffCardTitle>Basel Exhibition Centre</h4>
+  <div daffCardTagline>Featured Category</div>
+  <h4 daffCardTitle>Summer Collection</h4>
   <div daffCardContent>
     <p>
-      This covered, public space not only marks the entrance to the exhibitions,
-      but also functions as a meeting place for locals and visitors. The
-      architects called the prominent hole in the middle the "Fenster zum
-      Himmel" ("window to heaven").
+      Explore the latest styles for the season, from lightweight linen shirts to casual shorts and sandals.
     </p>
   </div>
 </daff-card>
 
 <daff-stroked-card [elevated]="true">
-  <daff-image
-    daffCardImage
-    src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
-    alt="Bottom up view of Basel exhibition centre"
-    width="1261"
-    height="946"
-  >
-  </daff-image>
-  <div daffCardTagline>Basel, Switzerland</div>
-  <h4 daffCardTitle>Basel Exhibition Centre</h4>
+  <div daffCardTagline>Featured Category</div>
+  <h4 daffCardTitle>Summer Collection</h4>
   <div daffCardContent>
     <p>
-      This covered, public space not only marks the entrance to the exhibitions,
-      but also functions as a meeting place for locals and visitors. The
-      architects called the prominent hole in the middle the "Fenster zum
-      Himmel" ("window to heaven").
+      Explore the latest styles for the season, from lightweight linen shirts to casual shorts and sandals.
     </p>
   </div>
 </daff-stroked-card>