feat(design): deprecate DaffSizableEnum and DaffSizable and update documentation

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

@@ -0,0 +1,68 @@
+# Sizable
+Sizable enforces consistent use of size across components.
+
+## Overview
+
+`DaffSizableDirective` applies size-specific CSS classes and validates the size in dev mode. When an size is set, the corresponding `daff-[size]` class is added.
+
+## Supported sizes
+
+| Alignment | CSS Class |
+|---|---|
+| `xs` | `.daff-xs` |
+| `sm` | `.daff-sm` |
+| `md` | `.daff-md` |
+| `lg` | `.daff-lg` |
+| `xl` | `.daff-xl` |
+
+## Usage
+
+Use `daffSizable` as an attribute selector:
+
+```html
+<div daffSizable size="sm">Example</div>
+```
+
+Or as an Angular host directive:
+
+```ts
+import { DaffSizableDirective } from '@daffodil/design';
+
+@Component({
+  selector: 'custom-component',
+  template: 'custom-component.html',
+  hostDirectives: [
+    {
+      directive: DaffSizableDirective,
+      inputs: ['size'],
+    },
+  ],
+})
+export class CustomComponent { }
+```
+
+### Default size
+
+Set `defaultSize` to apply an size when `size` is not explicitly provided:
+
+```ts
+constructor(private textAlignable: DaffSizableDirective) {
+  this.textAlignable.defaultSize = 'left';
+}
+```
+
+## Styles
+
+Use the applied CSS class to style each size variant:
+
+```scss
+.custom-component {
+  &.daff-sm {
+    font-size: 0.875rem;
+  }
+
+	&.daff-md {
+    font-size: 1rem;
+  }
+}
+```

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

@@ -6,59 +6,10 @@ import {
   SimpleChanges,
 } from '@angular/core';
 
-import {
-  DaffSizable,
-  DaffSizeAllType,
-} from './sizable';
+import { DaffSizeAllType } from './sizable';
 
 /**
- * `DaffSizableDirective` allows for dynamic sizing of a component by setting
- * CSS classes based on the specified size.
- *
- * @example Implementing it as an attribute directive
- *
- * ```html
- * <div daffSizable [size]="small">Sized content</div>
- * ```
- * In this example, the `daff-small` class is applied to the `div` element, allowing you to
- * use the class to style the `div`.
- *
- * @example Implementing it as an Angular host directive
- *
- * ```ts
- * @Component({
- *  standalone: true,
- *  selector: 'custom-component',
- *  template: 'custom-component.html',
- *  hostDirectives: [
- *    {
- *      directive: DaffSizableDirective,
- *      inputs: ['size'],
- *    },
- *  ],
- * })
- * export class CustomComponent { }
- * ```
- *
- * ```scss
- * :host {
- *  &.daff-sm {
- *    width: 24px;
- *  }
- *
- *  &.daff-md {
- *    width: 32px;
- *  }
- * }
- * ```
- *
- * The directive applies the following CSS classes to the component based on the size:
- *
- * - `daff-xs`: Applied when the size is `xs`.
- * - `daff-sm`: Applied when the size is `sm`.
- * - `daff-md`: Applied when the size is `md`.
- * - `daff-lg`: Applied when the size is `lg`.
- * - `daff-xl`: Applied when the size is `xl`.
+ * `DaffSizableDirective` enforces consistent use of sizes across components.
  */
 @Directive({
   selector: '[daffSizable]',
@@ -70,21 +21,14 @@ import {
     '[class.daff-xl]': 'size === "xl"',
   },
 })
-export class DaffSizableDirective<T extends DaffSizeAllType> implements DaffSizable<T>, OnChanges, OnInit {
+export class DaffSizableDirective<T extends DaffSizeAllType> implements OnChanges, OnInit {
   /**
    * The size of the component.
    */
   @Input() size: T;
 
   /**
    * Sets a default size.
-   *
-   * @example
-   * ```ts
-   * constructor(private sizableDirective: DaffSizableDirective) {
-   *  this.sizableDirective.defaultSize = 'md';
-   * }
-   * ```
    */
   public defaultSize: T;
 

libs/design/src/core/sizable/sizable.ts

@@ -1,26 +1,27 @@
 /**
- * Interfaces that gives a component the ability to customize sizing for component specific UI.
+ * @deprecated Deprecated in version 0.92.1. Will be removed in version 1.0.0.
  */
 
 export interface DaffSizable<T extends DaffSizeAllType> {
   size: T;
 }
 
-/**
- * The possible types that can be passed to a component that implements DaffSizable
- */
-
 export type DaffSizeXSmallType = 'xs';
 export type DaffSizeSmallType = 'sm';
 export type DaffSizeMediumType = 'md';
 export type DaffSizeLargeType = 'lg';
 export type DaffSizeXLargeType = 'xl';
 
 /**
- * The a type representing all available sizes.
+ * All available sizes.
  */
 export type DaffSizeAllType = DaffSizeXSmallType | DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType | DaffSizeXLargeType;
 
+/**
+ * @deprecated
+ *
+ * This enum will be removed from the public api in v1.0.0.
+ */
 export enum DaffSizableEnum {
   XSmall = 'xs',
   Small = 'sm',