chore: add doc comments

Author: eshankvaish

src/Shared/Components/Button/Button.component.tsx

@@ -6,6 +6,56 @@ import { BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP, BUTTON_SIZE_TO_LOADER_SIZE_MAP } fr
 import { getButtonDerivedClass } from './utils'
 import './button.scss'
 
+/**
+ * Generic component for Button.
+ * Should be used in combination of variant, size and style.
+ *
+ * @example Default button
+ * ```tsx
+ * <Button text="Hello World"  />
+ * ```
+ *
+ * @example Custom variant
+ * ```tsx
+ * <Button text="Hello World" variant={ButtonVariantType.secondary}  />
+ * ```
+ *
+ * @example Custom size
+ * ```tsx
+ * <Button text="Hello World" size={ComponentSizeType.medium}  />
+ * ```
+ *
+ * @example Custom style
+ * ```tsx
+ * <Button text="Hello World" style={ButtonStyleType.positive}  />
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <Button text="Hello World" disabled  />
+ * ```
+ *
+ * @example Loading state
+ * ```tsx
+ * <Button text="Hello World" isLoading  />
+ * ```
+ *
+ * @example With start icon
+ * ```tsx
+ * <Button text="Hello World" startIcon={<ICCube />}  />
+ * ```
+ *
+ * @example With end icon
+ * ```tsx
+ * <Button text="Hello World" endIcon={<ICCube />}  />
+ * ```
+ *
+ * @example With tippy
+ * ```tsx
+ * <Button text="Hello World" showTippy tippyContent="Tippy content"  />
+ * ```
+ *
+ */
 const Button = ({
     variant = ButtonVariantType.primary,
     size = ComponentSizeType.large,

src/Shared/Components/Button/button.scss

@@ -3,12 +3,14 @@
     color: $text-color;
     border: 1px solid $border-color;
 
+    // Only stroke icons are supposed to be used with button
     svg,
     svg * {
         stroke: $text-color;
     }
 
     // Custom state for loader
+    // Added using css to ensure using the respective text-color
     .loader {
         visibility: visible;
         position: absolute;
@@ -102,6 +104,7 @@
         }
     }
 
+    // Base styling is same for text and link button
     &__text,
     &__link {
         $background: transparent;
@@ -128,6 +131,7 @@
         }
     }
 
+    // Pseudo states for text button
     &__text {
         &--default {
             @include pseudo-states(var(--B100), var(--B200));
@@ -150,6 +154,7 @@
         }
     }
 
+    // Overrides for link button
     &__link {
 
         &--default,
@@ -167,6 +172,7 @@
         }
     }
 
+    // Hide the visibility for the button child elements when loading is true
     &--loading>* {
         visibility: hidden;
     }

src/Shared/Components/Button/types.ts

@@ -18,16 +18,49 @@ export enum ButtonStyleType {
 }
 
 export type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'styles' | 'className'> & {
+    /**
+     * Variant of the button
+     *
+     * @default 'ButtonVariantType.primary'
+     */
     variant?: ButtonVariantType
+    /**
+     * Size of the button
+     *
+     * @default 'ComponentSizeType.large'
+     */
     size?: ComponentSizeType
+    /**
+     * Style to be applied on the button
+     *
+     * @default 'ButtonStyleType.default'
+     */
     style?: ButtonStyleType
+    /**
+     * Text to be displayed in the button
+     */
     text: string
+    /**
+     * If provided, icon to be displayed at the start of the button
+     */
     startIcon?: ReactElement
+    /**
+     * If provided, icon to be displayed at the end of the button
+     */
     endIcon?: ReactElement
+    /**
+     * If true, the loading state is shown for the button with disabled
+     */
     isLoading?: boolean
 } & (
         | {
+              /**
+               * If true, the tippy is shown for the button
+               */
               showTippy: boolean
+              /**
+               * Tippy content to be shown for use cases like disabled etc
+               */
               tippyContent: TooltipProps['content']
           }
         | {