fix: skeleton parity (#19332)

* fix: skeleton parity

* chore: storybook update

* Update packages/web-components/src/components/skeleton-text/skeleton-text.stories.ts

Co-authored-by: Ariella Gilmore <[email protected]>

* Update packages/web-components/src/components/skeleton-text/skeleton-text.stories.ts

Co-authored-by: Ariella Gilmore <[email protected]>

* chore: cleanup + snapshots

* chore: storybook cleanup again :-'(

* Update packages/web-components/src/components/skeleton-text/skeleton-text.stories.ts

Co-authored-by: Ariella Gilmore <[email protected]>

---------

Co-authored-by: Ariella Gilmore <[email protected]>
Co-authored-by: Preeti Bansal <[email protected]>

Author: 3 people

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -7471,9 +7471,6 @@ Map {
       "className": Object {
         "type": "string",
       },
-      "style": Object {
-        "type": "object",
-      },
     },
   },
   "SkeletonPlaceholder" => Object {

packages/react/src/components/SkeletonIcon/SkeletonIcon.tsx

@@ -14,11 +14,6 @@ export interface SkeletonIconProps {
    * Specify an optional className to add.
    */
   className?: string;
-
-  /**
-   * The CSS styles.
-   */
-  style?: React.CSSProperties;
 }
 
 const SkeletonIcon: React.FC<SkeletonIconProps> = ({ className, ...other }) => {
@@ -36,11 +31,6 @@ SkeletonIcon.propTypes = {
    * Specify an optional className to add.
    */
   className: PropTypes.string,
-
-  /**
-   * The CSS styles.
-   */
-  style: PropTypes.object,
 };
 
 export default SkeletonIcon;

packages/web-components/src/components/skeleton-text/skeleton-text.stories.ts

@@ -6,26 +6,18 @@
  */
 
 import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { SKELETON_TEXT_TYPE } from './skeleton-text';
-
-const types = {
-  Regular: null,
-  [`Heading (${SKELETON_TEXT_TYPE.HEADING})`]: SKELETON_TEXT_TYPE.HEADING,
-};
 
 const args = {
-  type: null,
-  paragraph: true,
+  paragraph: false,
+  heading: false,
   lineCount: 3,
   width: '100%',
 };
 
 const argTypes = {
-  type: {
-    control: 'select',
-    description: 'Indicate the type of skeleton text, heading or regular.',
-    options: types,
+  heading: {
+    control: 'boolean',
+    description: 'Set to true to use heading style',
   },
   paragraph: {
     control: 'boolean',
@@ -43,23 +35,19 @@ const argTypes = {
 };
 
 export const Default = {
+  args,
+  argTypes,
   parameters: {
     percy: {
       skip: true,
     },
   },
-  render: () => html`<cds-skeleton-text></cds-skeleton-text>`,
-};
-
-export const Playground = {
-  args,
-  argTypes,
   render: (args) => {
-    const { type, paragraph, lineCount, width } = args ?? {};
+    const { heading, paragraph, lineCount, width } = args ?? {};
     return html`
       <cds-skeleton-text
-        type="${ifDefined(type)}"
         ?paragraph="${paragraph}"
+        ?heading="${heading}"
         lineCount="${lineCount}"
         width="${width}">
       </cds-skeleton-text>

packages/web-components/src/components/skeleton-text/skeleton-text.ts

@@ -35,10 +35,17 @@ class CDSSkeletonText extends LitElement {
 
   /**
    * The type of skeleton text.
+   * @deprecated Use the `heading` property instead.
    */
   @property({ reflect: true })
   type = SKELETON_TEXT_TYPE.REGULAR;
 
+  /**
+   * Determines if the skeleton text should be rendered as a heading.
+   */
+  @property({ type: Boolean, reflect: true })
+  heading = false;
+
   /**
    * width (in px or %) of single line of text or max-width of paragraph lines
    */
@@ -58,10 +65,12 @@ class CDSSkeletonText extends LitElement {
   lineCount = 3;
 
   render() {
-    const { optionalClasses, paragraph, lineCount, type, width } = this;
+    const { optionalClasses, paragraph, lineCount, type, width, heading } =
+      this;
     let defaultClasses = {
       [`${prefix}--skeleton__text`]: true,
-      [`${prefix}--skeleton__heading`]: type === SKELETON_TEXT_TYPE.HEADING,
+      [`${prefix}--skeleton__heading`]:
+        heading || type === SKELETON_TEXT_TYPE.HEADING,
     };
 
     if (optionalClasses) {