From cb6b5a6a035e12df7dfe96214fb6ec6681a932a0 Mon Sep 17 00:00:00 2001 From: Niloy Sikdar Date: Sat, 13 Aug 2022 02:57:28 +0530 Subject: [PATCH] docs(jsdoc): add comments for components Add JSDoc comments for all of the components re #61 Signed-off-by: Niloy Sikdar --- src/components/Button/Button.tsx | 18 ++++++++++++++++++ src/components/Column/Column.tsx | 14 ++++++++++++++ src/components/Divider/Divider.tsx | 22 ++++++++++++++++++++++ src/components/Email/Email.tsx | 6 ++++++ src/components/Image/Image.tsx | 23 +++++++++++++++++++++++ src/components/Link/Link.tsx | 13 +++++++++++++ src/components/Preheader/Preheader.tsx | 6 ++++++ src/components/Quote/Quote.tsx | 6 ++++++ src/components/Section/Section.tsx | 10 ++++++++++ 9 files changed, 118 insertions(+) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 3cf6f1a..fec7f87 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -5,10 +5,28 @@ import { sx } from '../../utils/sx'; type ButtonStyles = 'root' | 'primary' | 'secondary'; +/** + * Interface for PropTypes for the `Button` component. + */ export interface ButtonProps extends BaseStyleProp { + /** + * The content of the component. + */ children?: ReactNode; + /** + * Applies the theme button styles. + * @default 'primary' + */ variant?: 'primary' | 'secondary'; + /** + * The URL to link to when the button is clicked. + * An `a` element will be used as the root node. + */ href: string; + /** + * The target of the link. + * @default '_blank' + */ target?: HTMLAttributeAnchorTarget; } diff --git a/src/components/Column/Column.tsx b/src/components/Column/Column.tsx index bb0ed0f..d9f408d 100644 --- a/src/components/Column/Column.tsx +++ b/src/components/Column/Column.tsx @@ -5,9 +5,23 @@ import { BaseStyleProp } from '../types'; type ColumnStyles = 'root'; +/** + * Interface for PropTypes for the `Column` component. + */ export interface ColumnProps extends BaseStyleProp { + /** + * The content of the component. + */ children?: ReactNode; + /** + * The alignment of the children. + * @default 'center' + */ align?: 'left' | 'center' | 'right'; + /** + * The vertical alignment of the children. + * @default 'top' + */ verticalAlign?: CSSProperties['verticalAlign']; } diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index 0c44fd5..d5598de 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -5,11 +5,33 @@ import { BaseStyleProp } from '../types'; type DividerStyles = 'root'; +/** + * Interface for PropTypes for the `Divider` component. + */ export interface DividerProps extends BaseStyleProp { + /** + * The alignment of the divider. + * @default 'left' + */ align?: 'left' | 'center' | 'right'; + /** + * The color of the divider. + */ color?: CSSProperties['borderColor']; + /** + * The type of the divider. + * @default 'solid' + */ type?: CSSProperties['borderStyle']; + /** + * The thickness of the divider. + * @default '1px' + */ size?: CSSProperties['borderWidth']; + /** + * The width of the divider. + * @default '100%' + */ width?: CSSProperties['width']; } diff --git a/src/components/Email/Email.tsx b/src/components/Email/Email.tsx index 773044e..8d366e1 100644 --- a/src/components/Email/Email.tsx +++ b/src/components/Email/Email.tsx @@ -4,7 +4,13 @@ import { makeStyles } from '../../utils/makeStyles'; type EmailStyles = 'root'; +/** + * Interface for PropTypes for the `Email` component. + */ export interface EmailProps extends BaseStyleProp { + /** + * The content of the component. + */ children?: ReactNode; } diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx index 430ff89..1f9af30 100644 --- a/src/components/Image/Image.tsx +++ b/src/components/Image/Image.tsx @@ -13,12 +13,35 @@ type ImageStyles = | 'captionSection' | 'imageColumn'; +/** + * Interface for PropTypes for the `Image` component. + */ export interface ImageProps extends BaseStyleProp { + /** + * The URL or filepath of the image. + */ src: string; + /** + * The alt text for the image. + */ alt: string; + /** + * The caption for the image. + */ caption?: string; + /** + * The width of the image. + */ width: CSSProperties['width']; + /** + * The height of the image. + * @default 'auto' + */ height?: CSSProperties['height']; + /** + * The alignment of the caption. + * @default 'center' + */ captionAlign?: 'left' | 'center' | 'right'; } diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index 34fe38c..a404eeb 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -4,9 +4,22 @@ import { makeStyles } from '../../utils/makeStyles'; type LinkStyles = 'root'; +/** + * Interface for PropTypes for the `Link` component. + */ export interface LinkProps extends BaseStyleProp { + /** + * The content of the component. + */ children?: ReactNode; + /** + * The URL to link to. + */ href: string; + /** + * The target of the link. + * @default '_blank' + */ target?: HTMLAttributeAnchorTarget; } diff --git a/src/components/Preheader/Preheader.tsx b/src/components/Preheader/Preheader.tsx index 72100f5..db3ba62 100644 --- a/src/components/Preheader/Preheader.tsx +++ b/src/components/Preheader/Preheader.tsx @@ -3,7 +3,13 @@ import { BaseStyleProp } from '../types'; type PreheaderStyles = 'root'; +/** + * Interface for PropTypes for the `Preheader` component. + */ export interface PreheaderProps extends BaseStyleProp { + /** + * The text for the preheader. + */ text: string; } diff --git a/src/components/Quote/Quote.tsx b/src/components/Quote/Quote.tsx index 4efc851..b2af2c9 100644 --- a/src/components/Quote/Quote.tsx +++ b/src/components/Quote/Quote.tsx @@ -4,7 +4,13 @@ import { BaseStyleProp } from '../types'; type QuoteStyles = 'root'; +/** + * Interface for PropTypes for the `Quote` component. + */ export interface QuoteProps extends BaseStyleProp { + /** + * The content of the component. + */ children?: ReactNode; } diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx index 094d29a..a6ffbab 100644 --- a/src/components/Section/Section.tsx +++ b/src/components/Section/Section.tsx @@ -5,8 +5,18 @@ import { BaseStyleProp } from '../types'; type SectionStyles = 'root' | 'body' | 'row'; +/** + * Interface for PropTypes for the `Section` component. + */ export interface SectionProps extends BaseStyleProp { + /** + * The content of the component. + */ children?: ReactNode; + /** + * If `true`, the `section` will take up the full width of its container. + * @default true + */ fullWidth?: boolean; }