chore: adjust articles styles

* change animation on article card hover
* change comments section alignment

1 files changed, 46 insertions, 12 deletions

diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx
index c5bf4ca..e385249 100644
--- a/src/components/atoms/headings/heading.tsx
+++ b/src/components/atoms/headings/heading.tsx
@@ -1,10 +1,20 @@
-import { FC, ReactNode } from 'react';
+import {
+  createElement,
+  ForwardedRef,
+  forwardRef,
+  ForwardRefRenderFunction,
+  ReactNode,
+} from 'react';
 import styles from './heading.module.scss';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 export type HeadingProps = {
   /**
+   * The title alignment. Default: left;
+   */
+  alignment?: 'center' | 'left';
+  /**
    * The heading body.
    */
   children: ReactNode;
@@ -30,31 +40,55 @@ export type HeadingProps = {
   withMargin?: boolean;
 };
 
+type TitleTagProps = Pick<HeadingProps, 'children' | 'className' | 'id'> & {
+  tagName: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+};
+
+const TitleTag = forwardRef<
+  HTMLHeadingElement | HTMLParagraphElement,
+  TitleTagProps
+>(
+  (
+    { children, tagName, ...props },
+    ref: ForwardedRef<HTMLHeadingElement | HTMLParagraphElement>
+  ) => {
+    return createElement(tagName, { ...props, ref }, children);
+  }
+);
+TitleTag.displayName = 'TitleTag';
+
 /**
  * Heading component.
  *
  * Render an HTML heading element or a paragraph with heading styles.
  */
-const Heading: FC<HeadingProps> = ({
-  children,
-  className,
-  id,
-  isFake = false,
-  level,
-  withMargin = true,
-}) => {
-  const TitleTag = isFake ? `p` : (`h${level}` as keyof JSX.IntrinsicElements);
+const Heading: ForwardRefRenderFunction<HTMLDivElement, HeadingProps> = (
+  {
+    alignment = 'left',
+    children,
+    className,
+    id,
+    isFake = false,
+    level,
+    withMargin = true,
+  },
+  ref: ForwardedRef<HTMLHeadingElement | HTMLParagraphElement>
+) => {
+  const tagName = isFake ? 'p' : (`h${level}` as TitleTagProps['tagName']);
   const levelClass = `heading--${level}`;
+  const alignmentClass = `heading--${alignment}`;
   const marginClass = withMargin ? 'heading--margin' : 'heading--regular';
 
   return (
     <TitleTag
-      className={`${styles.heading} ${styles[levelClass]} ${styles[marginClass]} ${className}`}
+      tagName={tagName}
+      className={`${styles.heading} ${styles[levelClass]} ${styles[alignmentClass]} ${styles[marginClass]} ${className}`}
       id={id}
+      ref={ref}
     >
       {children}
     </TitleTag>
   );
 };
 
-export default Heading;
+export default forwardRef(Heading);