feat(design): deprecate DaffCompactable and clean up documentation (#4423)

This isn't removing the `DaffCompactableDirective`, just removing the superfluous and unused interface.

Author: xelaint

libs/design/src/core/compactable/README.md

@@ -0,0 +1,47 @@
+# Compactable
+
+Compactable enforces consistent use of the compact property across components.
+
+## Overview
+
+`DaffCompactableDirective` applies the `daff-compact` CSS class when `compact` is `true`.
+
+## Usage
+
+Use `daffCompactable` as an attribute selector:
+
+```html
+<div daffCompactable [compact]="true">Content</div>
+```
+
+Or as an Angular host directive:
+
+```ts
+import { DaffCompactableDirective } from '@daffodil/design';
+
+@Component({
+  selector: 'custom-component',
+  template: 'custom-component.html',
+  hostDirectives: [
+    {
+      directive: DaffCompactableDirective,
+      inputs: ['compact'],
+    },
+  ],
+})
+export class CustomComponent { }
+```
+
+## Styling
+
+Use the applied CSS class to style the compact variant:
+
+```scss
+.custom-component {
+  padding: 0.5rem 1rem;
+
+  &.daff-compact {
+    padding: 0.25rem 0.5rem;
+  }
+}
+```

libs/design/src/core/compactable/compactable.directive.spec.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { DaffCompactableDirective } from './compactable.directive';
+import { DaffCompactableDirective } from '@daffodil/design';
 
 @Component({
   template: `

libs/design/src/core/compactable/compactable.directive.ts

@@ -4,47 +4,7 @@ import {
 } from '@angular/core';
 
 /**
- * `DaffCompactableDirective` allows a component to conditionally apply a compact
- * style by toggling a CSS class. This is useful for creating components that can
- * switch between regular and compact styles based on the `compact` property.
- *
- * @example Implementing it as an attribute directive
- *
- * ```html
- * <div daffCompactable [compact]="isCompact">Content goes here</div>
- * ```
- *
- * In this example, the `daff-compact` class is applied to the `div` element when
- * `isCompact` is `true`, making the `div` display its compact state.
- *
- * @example Implementing it as an Angular host directive
- *
- * ```ts
- * @Component({
- *  selector: 'custom-component',
- *  template: 'custom-component.html',
- *  hostDirectives: [
- *    {
- *      directive: DaffCompactableDirective,
- *      inputs: ['compact'],
- *    },
- *  ],
- * })
- * export class CustomComponent { }
- * ```
- *
- * The directive applies the `daff-compact` class to the component and
- * should be defined in your styles to display the compact state as desired.
- *
- * ```scss
- * :host {
- *  padding: 8px 16px;
- *
- *  &.daff-compact {
- *    padding: 4px 8px;
- *  }
- * }
- * ```
+ * Enforces consistent use of the compact property.
  */
 @Directive({
   selector: '[daffCompactable]',
@@ -54,7 +14,7 @@ import {
 })
 export class DaffCompactableDirective {
   /**
-   * Controls whether the component is compact.
+   * Whether the component is compact.
    */
   @Input() compact = false;
 }

libs/design/src/core/compactable/compactable.ts

@@ -1,6 +1,5 @@
 /**
- * An interface for giving a component the ability to display a compact UI.
- * In order to be compactable, the class must implement this property.
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 1.0.0.
  */
 export interface DaffCompactable {
   compact: boolean;