diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js b/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js similarity index 63% rename from packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js rename to packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js index 0c435924623e..b17c4b8f03e8 100644 --- a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.stories.js +++ b/packages/react/src/components/AISkeleton/AISkeletonIcon.stories.js @@ -9,11 +9,11 @@ import React from 'react'; -import AiSkeletonIcon from './AiSkeletonIcon'; +import AISkeletonIcon from './AISkeletonIcon'; export default { - title: 'Experimental/unstable__AiSkeleton/AiSkeletonIcon', - component: AiSkeletonIcon, + title: 'Components/Skeleton', + component: AISkeletonIcon, }; const propsSkeleton = { @@ -30,9 +30,9 @@ const propsSkeleton2 = { }, }; -export const Default = () => ( +export const _AISkeletonIcon = () => ( <> - - + + ); diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx b/packages/react/src/components/AISkeleton/AISkeletonIcon.tsx similarity index 73% rename from packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx rename to packages/react/src/components/AISkeleton/AISkeletonIcon.tsx index e85843607273..7fc8a43cdba3 100644 --- a/packages/react/src/components/AiSkeleton/AiSkeletonIcon.tsx +++ b/packages/react/src/components/AISkeleton/AISkeletonIcon.tsx @@ -11,7 +11,7 @@ import classNames from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; import { SkeletonIcon } from '../SkeletonIcon'; -interface AiSkeletonIconProps { +interface AISkeletonIconProps { /** * Specify an optional className to add. */ @@ -23,16 +23,16 @@ interface AiSkeletonIconProps { style?: React.CSSProperties; } -const AiSkeletonIcon = ({ className, ...rest }: AiSkeletonIconProps) => { +const AISkeletonIcon = ({ className, ...rest }: AISkeletonIconProps) => { const prefix = usePrefix(); - const AiSkeletonIconClasses = classNames(className, { + const AISkeletonIconClasses = classNames(className, { [`${prefix}--skeleton__icon--ai`]: true, }); - return ; + return ; }; -AiSkeletonIcon.propTypes = { +AISkeletonIcon.propTypes = { /** * Specify an optional className to add. */ @@ -44,4 +44,4 @@ AiSkeletonIcon.propTypes = { style: PropTypes.object, }; -export default AiSkeletonIcon; +export default AISkeletonIcon; diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js similarity index 52% rename from packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js rename to packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js index 5a6b323c50bf..d63fd1be4786 100644 --- a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.stories.js +++ b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.stories.js @@ -9,11 +9,13 @@ import React from 'react'; -import AiSkeletonPlaceholder from './AiSkeletonPlaceholder'; +import AISkeletonPlaceholder from './AISkeletonPlaceholder'; export default { - title: 'Experimental/unstable__AiSkeleton/AiSkeletonPlaceholder', - component: AiSkeletonPlaceholder, + title: 'Components/Skeleton', + component: AISkeletonPlaceholder, }; -export const Default = () => ; +export const _AISkeletonPlaceholder = () => ( + +); diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.tsx similarity index 72% rename from packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx rename to packages/react/src/components/AISkeleton/AISkeletonPlaceholder.tsx index cc5e849a4fb9..300c76a36b16 100644 --- a/packages/react/src/components/AiSkeleton/AiSkeletonPlaceholder.tsx +++ b/packages/react/src/components/AISkeleton/AISkeletonPlaceholder.tsx @@ -11,29 +11,29 @@ import classNames from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; import { SkeletonPlaceholder } from '../SkeletonPlaceholder'; -export interface AiSkeletonPlaceholderProps { +export interface AISkeletonPlaceholderProps { /** * Add a custom class to the component to set the height and width */ className?: string; } -const AiSkeletonPlaceholder = ({ +const AISkeletonPlaceholder = ({ className, ...other -}: AiSkeletonPlaceholderProps) => { +}: AISkeletonPlaceholderProps) => { const prefix = usePrefix(); - const AiSkeletonPlaceholderClasses = classNames( + const AISkeletonPlaceholderClasses = classNames( { className, [`${prefix}--skeleton__placeholder--ai`]: true }, className ); return ( - + ); }; -AiSkeletonPlaceholder.propTypes = { +AISkeletonPlaceholder.propTypes = { /** * Add a custom class to the component * to set the height and width @@ -41,4 +41,4 @@ AiSkeletonPlaceholder.propTypes = { className: PropTypes.string, }; -export default AiSkeletonPlaceholder; +export default AISkeletonPlaceholder; diff --git a/packages/react/src/components/AISkeleton/AISkeletonText.stories.js b/packages/react/src/components/AISkeleton/AISkeletonText.stories.js new file mode 100644 index 000000000000..8ebf4553f70e --- /dev/null +++ b/packages/react/src/components/AISkeleton/AISkeletonText.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 AISkeletonText from './AISkeletonText'; + +export default { + title: 'Components/Skeleton', + component: AISkeletonText, +}; + +export const _AISkeletonText = () => ; diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonText.tsx b/packages/react/src/components/AISkeleton/AISkeletonText.tsx similarity index 91% rename from packages/react/src/components/AiSkeleton/AiSkeletonText.tsx rename to packages/react/src/components/AISkeleton/AISkeletonText.tsx index 69a1b3a085e1..c17fb6030b48 100644 --- a/packages/react/src/components/AiSkeleton/AiSkeletonText.tsx +++ b/packages/react/src/components/AISkeleton/AISkeletonText.tsx @@ -11,7 +11,7 @@ import classNames from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; import { SkeletonText } from '../SkeletonText'; -interface AiSkeletonTextProps { +interface AISkeletonTextProps { /** * Specify an optional className to be applied to the container node. */ @@ -38,7 +38,7 @@ interface AiSkeletonTextProps { width?: string; } -const AiSkeletonText = ({ className, ...rest }: AiSkeletonTextProps) => { +const AISkeletonText = ({ className, ...rest }: AISkeletonTextProps) => { const prefix = usePrefix(); const aiSkeletonTextClasses = classNames(className, { [`${prefix}--skeleton__text--ai`]: true, @@ -47,7 +47,7 @@ const AiSkeletonText = ({ className, ...rest }: AiSkeletonTextProps) => { return ; }; -AiSkeletonText.propTypes = { +AISkeletonText.propTypes = { /** * Specify an optional className to be applied to the container node */ @@ -70,4 +70,4 @@ AiSkeletonText.propTypes = { width: PropTypes.string, }; -export default AiSkeletonText; +export default AISkeletonText; diff --git a/packages/react/src/components/AISkeleton/index.tsx b/packages/react/src/components/AISkeleton/index.tsx new file mode 100644 index 000000000000..14a464b122be --- /dev/null +++ b/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 }; diff --git a/packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js b/packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js deleted file mode 100644 index 5f75ea23a228..000000000000 --- a/packages/react/src/components/AiSkeleton/AiSkeletonText.stories.js +++ /dev/null @@ -1,54 +0,0 @@ -/** - * 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 = () => ; - -export const Playground = (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', - }, - }, -}; diff --git a/packages/react/src/components/AiSkeleton/index.tsx b/packages/react/src/components/AiSkeleton/index.tsx deleted file mode 100644 index 439f4ce25736..000000000000 --- a/packages/react/src/components/AiSkeleton/index.tsx +++ /dev/null @@ -1,12 +0,0 @@ -/** - * 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 };