media-object-layout type fixes

rei · Dec 9, 2024 · 5e5ecfd · 5e5ecfd
1 parent c409168
commit 5e5ecfd
Show file tree

Hide file tree

Showing 9 changed files with 4,417 additions and 2,560 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -107,14 +107,14 @@
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-scss": "^6.8.1",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "5.6.3",
     "vite": "^5.0.1",
     "vite-plugin-dts": "^3.3.1",
     "vitest": "^1.1.1",
     "vue-docgen-cli": "^4.79.0",
     "vue-eslint-parser": "^9.3.0",
     "vue-router": "^4.0.10",
-    "vue-tsc": "^2.0.29"
+    "vue-tsc": "2.1.10"
   },
   "engines": {
     "node": ">= 20.0.0",

diff --git a/src/components/fulfillmentTile/CdrFulfillmentTileContent.vue b/src/components/fulfillmentTile/CdrFulfillmentTileContent.vue
@@ -18,13 +18,15 @@ const rootProps = computed(
   (): bodyTextProps => ({
     tag: 'div',
     scale: props.scale,
-    class: [style[baseClass]],
   }),
 );
 </script>
 
 <template>
-  <CdrBody v-bind="rootProps">
+  <CdrBody
+    v-bind="rootProps"
+    :class="[style[baseClass]]"
+  >
     <!-- @slot Where all default content should be placed. -->
     <slot />
   </CdrBody>

diff --git a/src/components/fulfillmentTile/examples/FulfillmentTile.vue b/src/components/fulfillmentTile/examples/FulfillmentTile.vue
@@ -251,7 +251,7 @@ const toggleCheckbox2 = (value: number) => {
           class="example__search-tile-other-header-button"
           :checked="checkbox2.includes(1)"
           role="checkbox"
-          :layout="{ flow: 'rows' }"
+          :layout="{ flow: 'row' }"
           @click="toggleCheckbox2(1)"
         >
           <CdrFulfillmentTileHeader>

diff --git a/src/components/layout/CdrLayout.vue b/src/components/layout/CdrLayout.vue
@@ -76,7 +76,7 @@ const rootProps = computed(() => {
 
 <template>
   <component
-    :is="as"
+    :is="props.as"
     v-bind="rootProps"
   >
     <!-- @slot Where all default content should be placed. -->

diff --git a/src/components/layout/examples/Layout.vue b/src/components/layout/examples/Layout.vue
@@ -2,12 +2,12 @@
 import CdrLayout from '../CdrLayout.vue';
 import CdrSurface from '../../surface/CdrSurface.vue';
 import CdrText from '../../text/CdrText.vue';
-import type { Layout } from '../../../types/interfaces';
+import type { Layout, HtmlAttributes } from '../../../types/interfaces';
 
 defineOptions({ name: 'Layout' });
 
 interface LayoutExample {
-  props: Layout;
+  props: Layout | HtmlAttributes;
   children: number;
   label: string;
   isNarrow?: boolean;

diff --git a/src/components/mediaObject/examples/MediaObject.vue b/src/components/mediaObject/examples/MediaObject.vue
@@ -4,14 +4,14 @@ import CdrLayout from '../../layout/CdrLayout.vue';
 import CdrMediaObject from '../CdrMediaObject.vue';
 import CdrSurface from '../../surface/CdrSurface.vue';
 import CdrText from '../../text/CdrText.vue';
-import type { MediaObject } from '../../../types/interfaces';
+import type { MediaObject, HtmlAttributes } from '../../../types/interfaces';
 import cedarImage from '../../../dev/static/cedar-1920x1080.jpg';
 import cedarSmallImage from '../../../dev/static/cedar-50x50.jpg';
 
 defineOptions({ name: 'Media Object' });
 
 interface MediaObjectExample {
-  props: MediaObject;
+  props: MediaObject | HtmlAttributes;
   label: string;
   flags?: string[];
 }

diff --git a/src/components/surface/examples/Surface.vue b/src/components/surface/examples/Surface.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import CdrSurface from '../CdrSurface.vue';
 import CdrText from '../../text/CdrText.vue';
-import type { surface } from '../../../types/interfaces';
+import type { surface, HtmlAttributes } from '../../../types/interfaces';
 
 defineOptions({ name: 'Surface' });
 
 export interface Example {
   label: string;
-  props: surface;
+  props: surface | HtmlAttributes;
 }
 
 const boxes: Example[] = [

diff --git a/src/types/interfaces.ts b/src/types/interfaces.ts
@@ -157,17 +157,16 @@ export interface pictureSourceObject {
  * Text component properties
  * @interface baseTextProps
  */
-export interface baseTextProps extends HtmlAttributes {
+export interface baseTextProps {
   /** Sets the HTML tag (p, span, h1, h2, etc) */
   tag?: string;
 }
 
 /**
  * Foundational container for creating structured layouts
  * @interface Layout
- * @extends HtmlAttributes
  */
-export interface Layout extends HtmlAttributes {
+export interface Layout extends NameValuePair {
   /**
    * Determines if the layout is in horizontal or vertical mode.
    * @demoSelectMultiple false
@@ -219,9 +218,8 @@ export interface Layout extends HtmlAttributes {
 /**
  * surface contains the props used to create a surface
  * @interface surface
- * @extends HtmlAttributes
  */
-export interface surface extends HtmlAttributes {
+export interface surface {
   /**
    * Adds in a background color based on the current palette's tokens.
    * @demoSelectMultiple false
@@ -276,7 +274,7 @@ export interface surface extends HtmlAttributes {
   palette?: 'default' | 'sandstone' | 'membership-subtle' | 'membership-vibrant';
 }
 
-export interface surfaceSelection extends HtmlAttributes {
+export interface surfaceSelection {
   /**
    * Determines if the button is in a checked state. Adds an `aria-checked` attribute to the button.
    * @skip true
@@ -316,15 +314,15 @@ export interface surfaceSelection extends HtmlAttributes {
   layout?: Layout;
 }
 
-export interface fulfillmentTileContent extends HtmlAttributes {
+export interface fulfillmentTileContent {
   /**
    * Sets the type scale
    * @values -2, -1, 0, 1
    */
   scale?: ScaleValue;
 }
 
-export interface fulfillmentTileIcon extends HtmlAttributes {
+export interface fulfillmentTileIcon {
   /**
    * The intent or type of message being displayed.
    * @values info, warning, success, error, default