feat(AiSkeleton): adds in new AI skeleton states (#15711)

* feat(Skeleton): add new AI skeleton states

* chore(AiSkeleton): add generated files, update snaps

* fix(AiSkeleton): update dark themes

* fix(AiSkeleton): update token values, adjust animation speed

* fix(AISkeleton): update animation speed

packages/carbon-components-react/scss/components/skeleton-styles/_ai-skeleton-styles.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/skeleton-styles/ai-skeleton-styles';

packages/carbon-components/scss/components/skeleton-styles/_ai-skeleton-styles.scss

@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/skeleton-styles/ai-skeleton-styles';

packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -17,6 +17,8 @@ Array [
   "aiGradientStart02",
   "aiInnerShadow",
   "aiOverlay",
+  "aiSkeletonBackground",
+  "aiSkeletonElementBackground",
   "background",
   "backgroundActive",
   "backgroundBrand",

packages/react/scss/components/skeleton-styles/_ai-skeleton-styles.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/skeleton-styles/ai-skeleton-styles';

packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import AiSkeletonIcon from './AiSkeletonIcon';
+
+export default {
+  title: 'Experimental/unstable__AiSkeleton/AiSkeletonIcon',
+  component: AiSkeletonIcon,
+};
+
+const propsSkeleton = {
+  style: {
+    margin: '50px',
+  },
+};
+
+const propsSkeleton2 = {
+  style: {
+    margin: '50px',
+    width: '24px',
+    height: '24px',
+  },
+};
+
+export const Default = () => (
+  <>
+    <AiSkeletonIcon {...propsSkeleton} />
+    <AiSkeletonIcon {...propsSkeleton2} />
+  </>
+);

packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx

@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import { SkeletonIcon } from '../SkeletonIcon';
+
+interface AiSkeletonIconProps {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+
+  /**
+   * The CSS styles.
+   */
+  style?: React.CSSProperties;
+}
+
+const AiSkeletonIcon = ({ className, ...rest }: AiSkeletonIconProps) => {
+  const prefix = usePrefix();
+  const AiSkeletonIconClasses = classNames(className, {
+    [`${prefix}--skeleton__icon--ai`]: true,
+  });
+
+  return <SkeletonIcon className={AiSkeletonIconClasses} {...rest} />;
+};
+
+AiSkeletonIcon.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+
+  /**
+   * The CSS styles.
+   */
+  style: PropTypes.object,
+};
+
+export default AiSkeletonIcon;

packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import AiSkeletonPlaceholder from './AiSkeletonPlaceholder';
+
+export default {
+  title: 'Experimental/unstable__AiSkeleton/AiSkeletonPlaceholder',
+  component: AiSkeletonPlaceholder,
+};
+
+export const Default = () => <AiSkeletonPlaceholder className="test" />;

packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx

@@ -0,0 +1,44 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import { SkeletonPlaceholder } from '../SkeletonPlaceholder';
+
+export interface AiSkeletonPlaceholderProps {
+  /**
+   * Add a custom class to the component to set the height and width
+   */
+  className?: string;
+}
+
+const AiSkeletonPlaceholder = ({
+  className,
+  ...other
+}: AiSkeletonPlaceholderProps) => {
+  const prefix = usePrefix();
+  const AiSkeletonPlaceholderClasses = classNames(
+    { className, [`${prefix}--skeleton__placeholder--ai`]: true },
+    className
+  );
+
+  return (
+    <SkeletonPlaceholder className={AiSkeletonPlaceholderClasses} {...other} />
+  );
+};
+
+AiSkeletonPlaceholder.propTypes = {
+  /**
+   * Add a custom class to the component
+   * to set the height and width
+   */
+  className: PropTypes.string,
+};
+
+export default AiSkeletonPlaceholder;

packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+
+import AiSkeletonText from './AiSkeletonText';
+
+export default {
+  title: 'Experimental/unstable__AiSkeleton/AiSkeletonText',
+  component: AiSkeletonText,
+};
+
+export const Default = () => <AiSkeletonText />;
+
+export const Playground = (args) => <AiSkeletonText {...args} />;
+
+Playground.args = {
+  heading: false,
+  paragraph: false,
+  width: '100%',
+  lineCount: 3,
+};
+
+Playground.argTypes = {
+  className: {
+    control: false,
+  },
+  heading: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  paragraph: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  width: {
+    control: {
+      type: 'text',
+    },
+  },
+  lineCount: {
+    control: {
+      type: 'number',
+    },
+  },
+};

packages/react/src/components/AiSkeleton/AiSkeletonText.tsx

@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import { SkeletonText } from '../SkeletonText';
+
+interface AiSkeletonTextProps {
+  /**
+   * Specify an optional className to be applied to the container node.
+   */
+  className?: string;
+
+  /**
+   * Generates skeleton text at a larger size.
+   */
+  heading?: boolean;
+
+  /**
+   * The number of lines shown if paragraph is true.
+   */
+  lineCount?: number;
+
+  /**
+   * Set this to true to generate multiple lines of text.
+   */
+  paragraph?: boolean;
+
+  /**
+   * Width (in px or %) of single line of text or max-width of paragraph lines.
+   */
+  width?: string;
+}
+
+const AiSkeletonText = ({ className, ...rest }: AiSkeletonTextProps) => {
+  const prefix = usePrefix();
+  const aiSkeletonTextClasses = classNames(className, {
+    [`${prefix}--skeleton__text--ai`]: true,
+  });
+
+  return <SkeletonText className={aiSkeletonTextClasses} {...rest} />;
+};
+
+AiSkeletonText.propTypes = {
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+  /**
+   * generates skeleton text at a larger size
+   */
+  heading: PropTypes.bool,
+  /**
+   * the number of lines shown if paragraph is true
+   */
+  lineCount: PropTypes.number,
+  /**
+   * will generate multiple lines of text
+   */
+  paragraph: PropTypes.bool,
+  /**
+   * width (in px or %) of single line of text or max-width of paragraph lines
+   */
+  width: PropTypes.string,
+};
+
+export default AiSkeletonText;

packages/react/src/components/AiSkeleton/index.tsx

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import AiSkeletonPlaceholder from './AiSkeletonPlaceholder';
+import AiSkeletonIcon from './AiSkeletonIcon';
+import AiSkeletonText from './AiSkeletonText';
+
+export { AiSkeletonText, AiSkeletonIcon, AiSkeletonPlaceholder };

packages/react/src/index.js

@@ -305,6 +305,12 @@ export {
   SlugContent as unstable__SlugContent,
   SlugActions as unstable__SlugActions,
 } from './components/Slug';
+
+export {
+  AiSkeletonText as unstable__AiSkeletonText,
+  AiSkeletonIcon as unstable__AiSkeletonIcon,
+  AiSkeletonPlaceholder as unstable__AiSkeletonPlaceholder,
+} from './components/AiSkeleton';
 export {
   ChatButton as unstable__ChatButton,
   ChatButtonSkeleton as unstable__ChatButtonSkeleton,

packages/styles/__tests__/__snapshots__/styles-test.js.snap

@@ -617,6 +617,11 @@ Array [
     "importPath": "@carbon/styles/scss/components/skeleton-styles/skeleton-styles",
     "relativePath": "scss/components/skeleton-styles/skeleton-styles",
   },
+  Object {
+    "filepath": "scss/components/skeleton-styles/_ai-skeleton-styles.scss",
+    "importPath": "@carbon/styles/scss/components/skeleton-styles/ai-skeleton-styles",
+    "relativePath": "scss/components/skeleton-styles/ai-skeleton-styles",
+  },
   Object {
     "filepath": "scss/components/slider/_index.scss",
     "importPath": "@carbon/styles/scss/components/slider",

packages/styles/files.js

@@ -142,6 +142,7 @@ const files = [
   'scss/components/select/_select.scss',
   'scss/components/skeleton-styles/_index.scss',
   'scss/components/skeleton-styles/_skeleton-styles.scss',
+  'scss/components/skeleton-styles/_ai-skeleton-styles.scss',
   'scss/components/slider/_index.scss',
   'scss/components/slider/_slider.scss',
   'scss/components/slug/_index.scss',

packages/styles/scss/__tests__/theme-test.js

@@ -162,6 +162,8 @@ describe('@carbon/styles/scss/theme', () => {
         "ai-border-start",
         "ai-border-end",
         "ai-drop-shadow",
+        "ai-skeleton-background",
+        "ai-skeleton-element-background",
         "ai-overlay",
         "slug-callout-caret-center",
         "slug-callout-caret-bottom",