Feat(web, web-react): Stabilization of ProductLogo #DS-1374

packages/web-react/scripts/entryPoints.js

@@ -34,6 +34,7 @@ const entryPoints = [
   { dirs: ['components', 'NoSsr'] },
   { dirs: ['components', 'Pagination'] },
   { dirs: ['components', 'Pill'] },
+  { dirs: ['components', 'ProductLogo'] },
   { dirs: ['components', 'Radio'] },
   { dirs: ['components', 'ScrollView'] },
   { dirs: ['components', 'Select'] },
@@ -51,7 +52,6 @@ const entryPoints = [
   { dirs: ['components', 'UNSTABLE_Avatar'] },
   { dirs: ['components', 'UNSTABLE_EmptyState'] },
   { dirs: ['components', 'UNSTABLE_PartnerLogo'] },
-  { dirs: ['components', 'UNSTABLE_ProductLogo'] },
   { dirs: ['components', 'UNSTABLE_Slider'] },
   { dirs: ['components', 'UNSTABLE_Toggle'] },
   { dirs: ['components', 'UNSTABLE_Truncate'] },

packages/web-react/src/components/UNSTABLE_ProductLogo/UNSTABLE_ProductLogo.tsx → packages/web-react/src/components/ProductLogo/ProductLogo.tsx

@@ -5,10 +5,10 @@ import React from 'react';
 import { useClassNamePrefix, useStyleProps } from '../../hooks';
 import { SpiritProductLogoProps } from '../../types/productLogo';
 
-const UNSTABLE_ProductLogo = (props: SpiritProductLogoProps) => {
+const ProductLogo = (props: SpiritProductLogoProps) => {
   const { children, ...restProps } = props;
 
-  const productLogoClass = useClassNamePrefix('UNSTABLE_ProductLogo');
+  const productLogoClass = useClassNamePrefix('ProductLogo');
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
   return (
@@ -18,4 +18,4 @@ const UNSTABLE_ProductLogo = (props: SpiritProductLogoProps) => {
   );
 };
 
-export default UNSTABLE_ProductLogo;
+export default ProductLogo;

packages/web-react/src/components/UNSTABLE_ProductLogo/README.md → packages/web-react/src/components/ProductLogo/README.md

@@ -1,16 +1,13 @@
-# UNSTABLE ProductLogo
-
-> ⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
-> Please use it with caution.
+# ProductLogo
 
 The ProductLogo component is used to display the logo of the product.
 
 ```jsx
-import { UNSTABLE_ProductLogo } from '@spirit/web-react';
+import { ProductLogo } from '@spirit/web-react';
 
-<UNSTABLE_ProductLogo aria-label="Logo of the product">
+<ProductLogo aria-label="Logo of the product">
   <!-- Logo go here -->
-</UNSTABLE_ProductLogo>;
+</ProductLogo>;
 ```
 
 ## Content
@@ -20,9 +17,9 @@ The content of the ProductLogo component can be an image or svg.
 ### Image
 
 ```jsx
-<UNSTABLE_ProductLogo aria-label="Logo of the product">
+<ProductLogo aria-label="Logo of the product">
   <img src="path-to-logo" alt="Product Logo" height="60px" width="120px" aria-hidden="true" />
-</UNSTABLE_ProductLogo>
+</ProductLogo>
 ```
 
 ℹ️ Don't forget to add the `aria-label` attribute for accessible title.
@@ -33,11 +30,11 @@ to specify the `height` and `width` of the embedded image.
 ### SVG
 
 ```jsx
-<UNSTABLE_ProductLogo aria-label="Logo of the product">
+<ProductLogo aria-label="Logo of the product">
   <svg width="300" height="130">
     <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
   </svg>
-</UNSTABLE_ProductLogo>
+</ProductLogo>
 ```
 
 ℹ️ Don't forget to add the `aria-label` attribute for accessible title.

packages/web-react/src/components/UNSTABLE_ProductLogo/__tests__/UNSTABLE_ProductLogo.test.tsx → packages/web-react/src/components/ProductLogo/__tests__/ProductLogo.test.tsx

@@ -4,24 +4,24 @@ import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
-import UNSTABLE_ProductLogo from '../UNSTABLE_ProductLogo';
+import ProductLogo from '../ProductLogo';
 
-describe('UNSTABLE_ProductLogo', () => {
-  classNamePrefixProviderTest(UNSTABLE_ProductLogo, 'UNSTABLE_ProductLogo');
+describe('ProductLogo', () => {
+  classNamePrefixProviderTest(ProductLogo, 'ProductLogo');
 
-  stylePropsTest(UNSTABLE_ProductLogo);
+  stylePropsTest(ProductLogo);
 
-  restPropsTest(UNSTABLE_ProductLogo, 'div');
+  restPropsTest(ProductLogo, 'div');
 
   it('should render children', () => {
-    render(<UNSTABLE_ProductLogo>Content</UNSTABLE_ProductLogo>);
+    render(<ProductLogo>Content</ProductLogo>);
 
     expect(screen.getByText('Content')).toBeInTheDocument();
   });
 
   it('should have correct className', () => {
-    render(<UNSTABLE_ProductLogo>Content</UNSTABLE_ProductLogo>);
+    render(<ProductLogo>Content</ProductLogo>);
 
-    expect(screen.getByText('Content')).toHaveClass('UNSTABLE_ProductLogo');
+    expect(screen.getByText('Content')).toHaveClass('ProductLogo');
   });
 });

packages/web-react/src/components/UNSTABLE_ProductLogo/demo/ProductLogoDefault.tsx → packages/web-react/src/components/ProductLogo/demo/ProductLogoDefault.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import UNSTABLE_ProductLogo from '../UNSTABLE_ProductLogo';
+import ProductLogo from '../ProductLogo';
 
 export const defaultSvgLogo = (
   <svg width="178" height="44" viewBox="0 0 178 44" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -68,8 +68,6 @@ export const defaultSvgLogo = (
   </svg>
 );
 
-const ProductLogoDefault = () => (
-  <UNSTABLE_ProductLogo aria-label="Logo of the JobBoard">{defaultSvgLogo}</UNSTABLE_ProductLogo>
-);
+const ProductLogoDefault = () => <ProductLogo aria-label="Logo of the JobBoard">{defaultSvgLogo}</ProductLogo>;
 
 export default ProductLogoDefault;

packages/web-react/src/components/ProductLogo/index.ts

@@ -0,0 +1,4 @@
+'use client';
+
+export * from './ProductLogo';
+export { default as ProductLogo } from './ProductLogo';

packages/web-react/src/components/UNSTABLE_ProductLogo/stories/UNSTABLE_ProductLogo.stories.tsx → packages/web-react/src/components/ProductLogo/stories/ProductLogo.stories.tsx

@@ -2,12 +2,12 @@ import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { defaultSvgLogo } from '../demo/ProductLogoDefault';
+import ProductLogo from '../ProductLogo';
 import ReadMe from '../README.md';
-import UNSTABLE_ProductLogo from '../UNSTABLE_ProductLogo';
 
-const meta: Meta<typeof UNSTABLE_ProductLogo> = {
-  title: 'Experimental/UNSTABLE_ProductLogo',
-  component: UNSTABLE_ProductLogo,
+const meta: Meta<typeof ProductLogo> = {
+  title: 'Components/ProductLogo',
+  component: ProductLogo,
   parameters: {
     docs: {
       page: () => <Markdown>{ReadMe}</Markdown>,
@@ -19,8 +19,8 @@ const meta: Meta<typeof UNSTABLE_ProductLogo> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof UNSTABLE_ProductLogo>;
+type Story = StoryObj<typeof ProductLogo>;
 
 export const Default: Story = {
-  name: 'UNSTABLE_ProductLogo',
+  name: 'ProductLogo',
 };

packages/web-react/src/components/index.ts

@@ -23,6 +23,7 @@ export * from './Modal';
 export * from './NoSsr';
 export * from './Pagination';
 export * from './Pill';
+export * from './ProductLogo';
 export * from './Radio';
 export * from './ScrollView';
 export * from './Select';
@@ -38,6 +39,5 @@ export * from './Toast';
 export * from './Tooltip';
 export * from './UNSTABLE_Avatar';
 export * from './UNSTABLE_PartnerLogo';
-export * from './UNSTABLE_ProductLogo';
 export * from './UNSTABLE_Toggle';
 export * from './VisuallyHidden';

packages/web/src/scss/components/UNSTABLE_ProductLogo/README.md → packages/web/src/scss/components/ProductLogo/README.md

@@ -1,23 +1,20 @@
-# UNSTABLE ProductLogo
-
-> ⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
-> Please use it with caution.
+# ProductLogo
 
 The ProductLogo component is used to display the logo of the product.
 
 ```html
-<div class="UNSTABLE_ProductLogo" aria-label="Logo of the product">
+<div class="ProductLogo" aria-label="Logo of the product">
   <!-- Logo go here -->
 </div>
 ```
 
 ## Inverted variant
 
-You can add an `UNSTABLE_ProductLogo--inverted` modifier class to invert the color of the background.
+You can add an `ProductLogo--inverted` modifier class to invert the color of the background.
 It is necessary to insert the appropriate inverted logo variant as a children.
 
 ```html
-<div class="UNSTABLE_ProductLogo UNSTABLE_ProductLogo--inverted" aria-label="Logo of the product">
+<div class="ProductLogo ProductLogo--inverted" aria-label="Logo of the product">
   <!-- Inverted logo go here -->
 </div>
 ```
@@ -29,7 +26,7 @@ The content of the ProductLogo component can be an image or svg.
 ### Image
 
 ```html
-<div class="UNSTABLE_ProductLogo" aria-label="Logo of the product">
+<div class="ProductLogo" aria-label="Logo of the product">
   <img src="path-to-logo" alt="Product Logo" height="60px" width="120px" aria-hidden="true" />
 </div>
 ```
@@ -42,7 +39,7 @@ to specify the `height` and `width` of the embedded image.
 ### SVG
 
 ```html
-<div class="UNSTABLE_ProductLogo" aria-label="Logo of the product">
+<div class="ProductLogo" aria-label="Logo of the product">
   <svg width="300" height="130">
     <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
   </svg>
@@ -54,11 +51,11 @@ to specify the `height` and `width` of the embedded image.
 ## Full Example
 
 ```html
-<div class="UNSTABLE_ProductLogo" aria-label="Logo of the product">
+<div class="ProductLogo" aria-label="Logo of the product">
   <img src="path-to-logo" alt="Product Logo" width="120" height="60" aria-hidden="true" />
 </div>
 
-<div class="UNSTABLE_ProductLogo">
+<div class="ProductLogo">
   <svg width="300" height="130">
     <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="#fff" />
   </svg>

packages/web/src/scss/components/UNSTABLE_ProductLogo/_UNSTABLE_ProductLogo.scss → packages/web/src/scss/components/ProductLogo/_ProductLogo.scss

@@ -1,12 +1,12 @@
 @use 'theme' as theme;
 
-.UNSTABLE_ProductLogo {
+.ProductLogo {
     display: inline-block;
     max-width: 100%;
 }
 
-.UNSTABLE_ProductLogo > img,
-.UNSTABLE_ProductLogo > svg {
+.ProductLogo > img,
+.ProductLogo > svg {
     width: auto;
     height: theme.$logo-height;
 }

packages/web/src/scss/components/UNSTABLE_ProductLogo/index.html → packages/web/src/scss/components/ProductLogo/index.html

@@ -2,7 +2,7 @@
 
 <section class="UNSTABLE_Section">
   <h2 class="docs-Heading">Default</h2>
-  <div aria-label="Logo of the JobBoard" class="UNSTABLE_ProductLogo">
+  <div aria-label="Logo of the JobBoard" class="ProductLogo">
     <svg width="178" height="44" viewBox="0 0 178 44" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_19404_2964)">
         <path fill-rule="evenodd" clip-rule="evenodd"

packages/web/src/scss/components/ProductLogo/index.scss

@@ -0,0 +1 @@
+@forward 'ProductLogo';

packages/web/src/scss/components/index.scss

@@ -20,6 +20,8 @@
 // @forward 'Modal';
 // @forward 'Pagination';
 // @forward 'Pill';
+@forward 'ProductLogo';
+
 // @forward 'Radio';
 // @forward 'ScrollView';
 // @forward 'Select';
@@ -35,7 +37,6 @@
 @forward 'UNSTABLE_Avatar';
 @forward 'UNSTABLE_EmptyState';
 @forward 'UNSTABLE_PartnerLogo';
-@forward 'UNSTABLE_ProductLogo';
 @forward 'UNSTABLE_Section';
 
 // @forward 'UNSTABLE_Slider';