[FEAT] Normalize input interfaces and attributes for design components

[xelaint]

:bulb: Feature request

Feature Name

Normalize input interfaces and attributes for design components.

The Desired Behavior

Create a list of input interfaces and attributes that will be used across the board in @daffodil/design.

Properties to AVOID (too similar to CSS properties):

• align
• alignment
• horizontalAlignment
• fontSize
• fontFamily

Exceptions:

• color

Known Valid Properties:

• opened: boolean;
• fullscreen: boolean;
• size: xs | sm | md | lg | xl

Size (global interface): Not all sizes need to be exported and used.

export type DaffSizeSmallType = 'sm'
export type DaffSizeMediumType = 'md'
export type DaffSizeLargeType = 'lg'
export type DaffSizeXLargeType = 'xl'

export type DaffSizeAllType = DaffSizeXSmallType | DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType | DaffSizeXLargeType

Global Interfaces to Create

• [x] size
• [x] skeleton: boolean; | DaffSkeletonble
• [x] mutating: boolean; | DaffMutable
• [x] DaffCompactable
• [ ] DaffOpenable
• [ ] DaffSelectable
• [x] Disablable and Focusable interfaces for daff-form-field

Card Types

• [x] daff-card
• [x] daff-raised-card
• [x] daff-stroked-card

Link Set

• Basic & stylized variants (names TBD, after components are updated to reflect correct style)

Feature

• [x] Deprecate DaffFeatureComponent

Need to Deprecate

• [x] DaffHeroLayout
• [x] DaffHeroSize (size will be a global interface)
• [x] DaffCalloutLayout
• [x] DaffCalloutSize (size will be a global interface)
• [x] DaffListAppearance

center type? Fixed with textAlignment (#1502)

• We need a way to provide centering option (horizontally). The inline-block update to hero/callout did not work.

Your Use Case

As a developer, I'd like to maintain consistency in defining input interfaces and attributes throughout the design package.

Prior Work

Environment

Daffodil version: X.Y.Z
Angular version: X.Y.Z 

 
For Tooling issues:
- Node version: XX  
- Platform:  

Others: