From b836f0a9f8b783e3328983ad087aa2b7b297b43a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 15 Apr 2022 14:38:54 +0200
Subject: chore: add a CommentForm component

---
 src/components/atoms/buttons/button.stories.tsx  | 4 ++--
 src/components/atoms/buttons/button.tsx          | 6 ++----
 src/components/atoms/buttons/buttons.module.scss | 8 ++++++--
 src/components/atoms/headings/heading.tsx        | 6 ++++++
 4 files changed, 16 insertions(+), 8 deletions(-)

(limited to 'src/components/atoms')

diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx
index 1061d83..d47a1ea 100644
--- a/src/components/atoms/buttons/button.stories.tsx
+++ b/src/components/atoms/buttons/button.stories.tsx
@@ -65,7 +65,7 @@ export default {
         type: 'select',
       },
       description: 'Button kind.',
-      options: ['primary', 'secondary', 'tertiary'],
+      options: ['primary', 'secondary', 'tertiary', 'neutral'],
       table: {
         category: 'Options',
         defaultValue: { summary: 'secondary' },
@@ -93,7 +93,7 @@ export default {
         type: 'select',
       },
       description: 'The link shape.',
-      options: ['circle', 'rectangle', 'square'],
+      options: ['circle', 'rectangle', 'square', 'initial'],
       table: {
         category: 'Options',
         defaultValue: { summary: 'rectangle' },
diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx
index b223046..545c5c5 100644
--- a/src/components/atoms/buttons/button.tsx
+++ b/src/components/atoms/buttons/button.tsx
@@ -9,7 +9,7 @@ export type ButtonProps = {
   /**
    * Button accessible label.
    */
-  ariaLabel?: string;
+  'aria-label'?: string;
   /**
    * Button state. Default: false.
    */
@@ -25,7 +25,7 @@ export type ButtonProps = {
   /**
    * Button shape. Default: rectangle.
    */
-  shape?: 'circle' | 'rectangle' | 'square';
+  shape?: 'circle' | 'rectangle' | 'square' | 'initial';
   /**
    * Button type attribute. Default: button.
    */
@@ -39,7 +39,6 @@ export type ButtonProps = {
  */
 const Button: FC<ButtonProps> = ({
   className = '',
-  ariaLabel,
   children,
   disabled = false,
   kind = 'secondary',
@@ -55,7 +54,6 @@ const Button: FC<ButtonProps> = ({
       type={type}
       disabled={disabled}
       className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
-      aria-label={ariaLabel}
       {...props}
     >
       {children}
diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss
index 87c92db..8e3e196 100644
--- a/src/components/atoms/buttons/buttons.module.scss
+++ b/src/components/atoms/buttons/buttons.module.scss
@@ -10,6 +10,10 @@
   font-weight: 600;
   transition: all 0.3s ease-in-out 0s;
 
+  &--initial {
+    border-radius: 0;
+  }
+
   &--rectangle {
     padding: var(--spacing-2xs) var(--spacing-md);
   }
@@ -107,7 +111,7 @@
             fun.convert-px(-4) var(--color-shadow-light),
           fun.convert-px(7) fun.convert-px(10) fun.convert-px(12)
             fun.convert-px(-3) var(--color-shadow-light);
-        transform: scale(1.1);
+        transform: scale(var(--scale-up, 1.1));
       }
 
       &:focus {
@@ -119,7 +123,7 @@
         box-shadow: 0 0 0 0 var(--color-shadow);
         color: var(--color-primary-dark);
         text-decoration: underline transparent 0;
-        transform: scale(0.94);
+        transform: scale(var(--scale-down, 0.94));
       }
     }
   }
diff --git a/src/components/atoms/headings/heading.tsx b/src/components/atoms/headings/heading.tsx
index 3048534..4703b5d 100644
--- a/src/components/atoms/headings/heading.tsx
+++ b/src/components/atoms/headings/heading.tsx
@@ -8,6 +8,10 @@ export type HeadingProps = {
    * Set additional classnames.
    */
   className?: string;
+  /**
+   * The heading id.
+   */
+  id?: string;
   /**
    * Use an heading element or only its styles. Default: false.
    */
@@ -30,6 +34,7 @@ export type HeadingProps = {
 const Heading: FC<HeadingProps> = ({
   children,
   className,
+  id,
   isFake = false,
   level,
   withMargin = true,
@@ -41,6 +46,7 @@ const Heading: FC<HeadingProps> = ({
   return (
     <TitleTag
       className={`${styles.heading} ${styles[levelClass]} ${styles[marginClass]} ${className}`}
+      id={id}
     >
       {children}
     </TitleTag>
-- 
cgit v1.2.3