feat(divider): deprecate color attribute & update doc with badge

Author: dpellier

packages/ods-react/src/components/divider/src/components/divider/Divider.tsx

@@ -1,12 +1,14 @@
 import classNames from 'classnames';
 import { type ComponentPropsWithRef, type FC, type JSX, forwardRef } from 'react';
-import { DIVIDER_COLOR, type DividerColor } from '../../constants/divider-color';
+import { type DividerColor } from '../../constants/divider-color';
 import { DIVIDER_SPACING, type DividerSpacing } from '../../constants/divider-spacing';
 import style from './divider.module.scss';
 
 interface DividerProp extends ComponentPropsWithRef<'hr'> {
   /**
+   * @deprecated
    * The color preset to use.
+   * DEPRECATED: Color will now always be primary, if you need another color, prefer overriding it using css.
    */
   color?: DividerColor,
   /**
@@ -17,10 +19,14 @@ interface DividerProp extends ComponentPropsWithRef<'hr'> {
 
 const Divider: FC<DividerProp> = forwardRef(({
   className,
-  color = DIVIDER_COLOR.primary,
+  color,
   spacing = DIVIDER_SPACING._2,
   ...props
 }, ref): JSX.Element => {
+  if (color) {
+    console.warn('[DEPRECATED]: Color will now always be primary, if you need another color, prefer overriding it using css.');
+  }
+
   return (
     <hr
       className={ classNames(

packages/ods-react/src/components/divider/src/components/divider/divider.module.scss

@@ -4,12 +4,15 @@ $spacings: 0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 64;
   .divider {
     transform: scaleY(1);
     border: none;
+    background-color: var(--ods-color-neutral-100);
     height: 1px;
 
+    // [Deprecated] will be removed in next major version
     &--neutral {
       background-color: var(--ods-color-neutral-700);
     }
 
+    // [Deprecated] will be removed in next major version
     &--primary {
       background-color: var(--ods-color-neutral-100);
     }

packages/ods-react/src/components/divider/src/constants/divider-color.ts

@@ -1,12 +1,24 @@
 import { COLOR } from '../../../../utils/colors';
 
+/**
+ * @deprecated
+ * Color will now always be primary, if you need another color, prefer overriding it using css.
+ */
 enum DIVIDER_COLOR {
   neutral = COLOR.neutral,
   primary = COLOR.primary,
 }
 
+/**
+ * @deprecated
+ * Color will now always be primary, if you need another color, prefer overriding it using css.
+ */
 type DividerColor = `${DIVIDER_COLOR}`;
 
+/**
+ * @deprecated
+ * Color will now always be primary, if you need another color, prefer overriding it using css.
+ */
 const DIVIDER_COLORS = Object.freeze(Object.values(DIVIDER_COLOR));
 
 export {

packages/ods-react/src/components/divider/src/dev.stories.tsx

@@ -1,15 +1,22 @@
-import { Divider } from '.';
+import { DIVIDER_COLOR, Divider } from '.';
 import style from './dev.module.css';
 
 export default {
   component: Divider,
   title: 'Divider dev',
 };
 
+export const CustomStyle = () => (
+  <Divider className={ style[ 'custom-divider' ] } />
+);
+
 export const Default = () => (
   <Divider />
 );
 
-export const CustomStyle = () => (
-  <Divider className={ style[ 'custom-divider' ] } />
+export const Deprecated = () => (
+  <>
+    <Divider color={ DIVIDER_COLOR.primary } />
+    <Divider color={ DIVIDER_COLOR.neutral } />
+  </>
 );

packages/storybook/src/components/technicalSpecification/ClassModule.tsx

@@ -1,4 +1,4 @@
-import { ICON_NAME, Icon } from '@ovhcloud/ods-react';
+import { BADGE_COLOR, BADGE_SIZE, ICON_NAME, Badge, Icon } from '@ovhcloud/ods-react';
 import { CodeOrSourceMdx } from '@storybook/blocks';
 import { Table } from '@storybook/components';
 import React, { type JSX, useMemo } from 'react';
@@ -75,6 +75,14 @@ const ClassModule = ({ component, extraInfo }: ClassModuleProp): JSX.Element =>
                   <tr key={ idx }>
                     <td>
                       { prop.name }
+                      {
+                        prop.deprecated &&
+                        <Badge
+                          color={ BADGE_COLOR.warning }
+                          size={ BADGE_SIZE.sm }>
+                          Deprecated
+                        </Badge>
+                      }
                     </td>
 
                     <td>

packages/storybook/src/components/technicalSpecification/TechnicalSpecification.tsx

@@ -1,3 +1,4 @@
+import { BADGE_COLOR, BADGE_SIZE, Badge } from '@ovhcloud/ods-react';
 import { CodeOrSourceMdx } from '@storybook/blocks';
 import { type ModuleExports } from '@storybook/types';
 import React, { Fragment, type JSX, useMemo } from 'react';
@@ -56,7 +57,16 @@ const TechnicalSpecification = ({ data, extraInfo, of }: Props): JSX.Element =>
             enums.map((enumObj, idx) => (
               <Fragment key={ idx }>
                 <Heading label={ enumObj.name }
-                         level={ 3 } />
+                         level={ 3 }>
+                  {
+                    enumObj.deprecated &&
+                    <Badge
+                      color={ BADGE_COLOR.warning }
+                      size={ BADGE_SIZE.sm }>
+                      Deprecated
+                    </Badge>
+                  }
+                </Heading>
 
                 <EnumList
                   className={ styles['technical-specification__enums__keys'] }

packages/storybook/src/helpers/docgen.ts

@@ -2,11 +2,13 @@ import { type Documentation, type FunctionSignatureType, type LiteralType, type
 
 enum TAG {
   defaultValue = '@default-value',
+  deprecated = '@deprecated',
   internal = '@internal',
   type = '@type',
 }
 
 type ComponentProp = {
+  deprecated: boolean,
   description: string,
   defaultValue: string,
   isOptional: boolean,
@@ -47,6 +49,7 @@ function getComponentProp(name: string, prop: PropDescriptor): ComponentProp | u
   }
 
   return {
+    deprecated: tagsMap.has(TAG.deprecated),
     description: prop.description || '',
     defaultValue: prop.defaultValue?.value?.toString() || tagsMap.get(TAG.defaultValue) || 'undefined',
     isOptional: !prop.required,

packages/storybook/src/helpers/typedoc.ts

@@ -9,6 +9,7 @@ type TypedocEnumMember = {
 
 type ComponentTypedoc = {
   enums: {
+    deprecated?: boolean,
     members: TypedocEnumMember[],
     name: string,
   }[],
@@ -41,6 +42,7 @@ function getComponentTypedoc(data: ProjectReflection): ComponentTypedoc {
     .filter((declaration) => declaration.type && declaration.type.type === 'union');
 
   const enums = enumDeclarations.map((enumDeclaration) => ({
+    deprecated: enumDeclaration.comment?.blockTags.some(({ tag }) => tag === TAG.deprecated),
     name: enumDeclaration.name,
     members: filterByKinds(enumDeclaration.children, [ReflectionKind.EnumMember])
       .map((member) => ({
@@ -49,6 +51,7 @@ function getComponentTypedoc(data: ProjectReflection): ComponentTypedoc {
       })),
   }));
   const fakeEnums = fakeEnumDeclarations.map((fakeEnumDeclaration) => ({
+    deprecated: false,
     name: fakeEnumDeclaration.name,
     members: filterByKinds((fakeEnumDeclaration.type as ReflectionType)?.declaration.children, [ReflectionKind.EnumMember])
       .map((member) => ({
@@ -59,6 +62,7 @@ function getComponentTypedoc(data: ProjectReflection): ComponentTypedoc {
 
   return {
     enums: sortByName(enums.concat(fakeEnums).map((enumDoc) => ({
+      deprecated: enumDoc.deprecated,
       name: enumDoc.name,
       members: sortByName(enumDoc.members),
     }))),