Add JSDoc annoatation to ll props that should be i18n'd (#1914)

Also found a minor issue with `Badge`'s default value

config/i18nIgnoredProps.js

@@ -25,6 +25,7 @@
  */
 
 const ours = [
+  'align',
   'icon',
   'iconBefore',
   'iconAfter',

packages/components/src/Badge/Badge.tsx

@@ -53,9 +53,12 @@ type BadgeIntent =
 export interface BadgeProps
   extends SpaceProps,
     CompatibleHTMLProps<HTMLSpanElement> {
+  /**
+   * I18n recommended: content that is user visible should be treated for i18n
+   */
   children: ReactNode
   /**
-   *  @default `default`
+   * @default key
    **/
   intent?: BadgeIntent
 

packages/components/src/Chip/Chip.tsx

@@ -26,13 +26,7 @@
 
 import { useTranslation } from 'react-i18next'
 import { reset } from '@looker/design-tokens'
-import React, {
-  forwardRef,
-  KeyboardEvent,
-  MouseEvent,
-  ReactNode,
-  Ref,
-} from 'react'
+import React, { forwardRef, KeyboardEvent, MouseEvent, Ref } from 'react'
 import styled from 'styled-components'
 import {
   useClickable,
@@ -47,7 +41,9 @@ import { TruncateProps, truncate } from '../Text/truncate'
 export interface ChipProps
   extends GenericClickProps<HTMLSpanElement>,
     TruncateProps {
-  children: ReactNode
+  /**
+   * I18n recommended: content that is user visible should be treated for i18n
+   */
   prefix?: string
   onDelete?: (
     e?: MouseEvent<HTMLSpanElement> | KeyboardEvent<HTMLSpanElement>

packages/components/src/CopyToClipboard/CopyToClipboard.tsx

@@ -28,21 +28,22 @@ import React, { useRef, useState, FC, cloneElement } from 'react'
 import { ButtonOutline } from '../Button/ButtonOutline'
 
 /**
- * This component allows user to copy contents from the, passed in ref, to the clipboard.
  */
-
 export interface CopyToClipboardProps {
   /**
    * Content to be copied into the clipboard
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   content: string
   /**
    * button's label | a JSX element to replace the button
+   * I18n recommended: content that is user visible should be treated for i18n
    * @default 'Copy to Clipboard'
    */
   children?: string | JSX.Element
   /**
    * button's successfully copied label | a JSX element to replace the button
+   * I18n recommended: content that is user visible should be treated for i18n
    * @default 'Copied'
    */
   success?: string | JSX.Element

packages/components/src/DataTable/Column/DataTableCell.tsx

@@ -46,6 +46,9 @@ import { FocusableCell } from './FocusableCell'
 
 export interface DataTableCellProps
   extends CompatibleHTMLProps<HTMLTableDataCellElement> {
+  /**
+   * I18n recommended: content that is user visible should be treated for i18n
+   */
   description?: ReactNode
   focusVisible?: boolean
   indicator?: ReactNode

packages/components/src/DataTable/Item/DataTableAction.tsx

@@ -30,7 +30,9 @@ import React, { ReactNode } from 'react'
 import { MenuItem } from '../../Menu'
 
 export interface DataTableActionProps extends CompatibleHTMLProps<HTMLElement> {
-  children?: ReactNode
+  /**
+   * I18n recommended: content that is user visible should be treated for i18n
+   */
   detail?: ReactNode
   icon?: IconNames
   /**

packages/components/src/DataTable/Item/DataTableItem.tsx

@@ -43,6 +43,7 @@ export interface DataTableItemProps
   /**
    *  Sets the tooltip text and a hidden text label for the actions button (accessible to assistive technology)
    *  If unprovided by the user, a default string will be used instead
+   * I18n recommended: content that is user visible should be treated for i18n
    *  @default 'Options'
    */
   actionsTooltip?: string
@@ -54,7 +55,9 @@ export interface DataTableItemProps
    * A boolean indicating whether this item is selectable or not (the item will appear greyed out if true)
    */
   disabled?: boolean
-
+  /**
+   * I18n recommended: content that is user visible should be treated for i18n
+   */
   children: JSX.Element | JSX.Element[]
   /*
    * A ReactNode (IconButton) that will be placed as a primary action on the right side of the row

packages/components/src/DataTable/Item/DataTableRow.tsx

@@ -46,6 +46,10 @@ import {
 export interface DataTableRowProps
   extends DataTableCheckboxProps,
     Omit<CompatibleHTMLProps<HTMLElement>, 'onChange' | 'checked'> {
+  /**
+   * Content displayed after selection checkbox (optional) and row cells.
+   * Used for DataTableActions
+   */
   secondary?: ReactNode
   hasCheckbox?: boolean
   /**

packages/components/src/DataTable/Table.tsx

@@ -41,6 +41,9 @@ import { edgeShadow } from './utils/edgeShadow'
 import { getNextFocus } from './getNextFocus'
 
 export interface TableProps extends DataTableProps {
+  /**
+   * I18n recommended: content that is user visible should be treated for i18n
+   */
   caption: string
   columnsVisible: string[]
 }

packages/components/src/Dialog/Confirm/ConfirmLayout.tsx

@@ -31,11 +31,13 @@ import { DialogLayout } from '../Layout'
 interface ConfirmLayoutProps {
   /**
    * Header content
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   title: string
 
   /**
    * Primary dialog content
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   message: ReactElement | string
   /**

packages/components/src/Dialog/Confirm/ConfirmationDialog.tsx

@@ -36,6 +36,7 @@ export type ConfirmationCallback = (close: () => void) => void
 export interface ConfirmationProps extends DialogProps {
   /**
    * Cancel button text
+   * I18n recommended: content that is user visible should be treated for i18n
    * @default 'Cancel'
    */
   cancelLabel?: string
@@ -51,11 +52,15 @@ export interface ConfirmationProps extends DialogProps {
   cancelColor?: StatefulColor
   /**
    * Confirmation button text
+   *
+   * I18n recommended: content that is user visible should be treated for i18n
    * @default 'Confirm'
    */
   confirmLabel?: string
   /**
    * Additional information about the action requiring confirmation
+   *
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   message: ReactElement | string
   /**
@@ -69,6 +74,8 @@ export interface ConfirmationProps extends DialogProps {
   onConfirm: ConfirmationCallback
   /**
    * Dialog title text
+   *
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   title: string
 }

packages/components/src/Dialog/Dialog.tsx

@@ -39,6 +39,8 @@ export interface DialogProps extends Omit<UseDialogProps, 'content'> {
    * Prop is only marked optional to support legacy implementations.
    *
    * If `content` is not supplied `children` will used as the Dialog content instead
+   *
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   content?: ReactNode
 }

packages/components/src/Form/Fields/Field.tsx

@@ -25,7 +25,7 @@
  */
 
 import { width, WidthProps } from '@looker/design-tokens'
-import React, { FunctionComponent, ReactNode, useContext } from 'react'
+import React, { FunctionComponent, useContext } from 'react'
 import styled, { css } from 'styled-components'
 import omit from 'lodash/omit'
 import pick from 'lodash/pick'
@@ -39,11 +39,6 @@ import { FieldBaseProps } from './FieldBase'
 import { RequiredStar } from './RequiredStar'
 
 export interface FieldProps extends FieldBaseProps, WidthProps {
-  /*
-   * optional extra description
-   */
-  description?: ReactNode
-
   /**
    * Id of the input element to match a label to.
    */
@@ -58,7 +53,6 @@ export interface FieldProps extends FieldBaseProps, WidthProps {
    * @default false
    */
   hideLabel?: boolean
-
   /**
    *
    */

packages/components/src/Form/Fields/FieldBase.tsx

@@ -36,6 +36,7 @@ export interface FieldBaseProps {
   disabled?: boolean
   /**
    * Defines the label for the field.
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   label?: string
   /**
@@ -44,14 +45,15 @@ export interface FieldBaseProps {
   required?: boolean
   /**
    * notes and details added to the top right corner of the field
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   detail?: ReactNode
   /**
    * notes and more info added to the bottom of the field
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   description?: ReactNode
   /**
-   *
    * Holds the type of validation (error, warning, etc.) and corresponding message.
    */
   validationMessage?: ValidationMessageProps

packages/components/src/Form/Fieldset/Fieldset.tsx

@@ -68,7 +68,8 @@ export interface FieldsetProps
   wrap?: boolean
 
   /**
-   *  Displayed above the children of Fieldset
+   * Displayed above the children of Fieldset
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   legend?: ReactNode
   /*
@@ -134,7 +135,6 @@ const FieldsetLayout = forwardRef(
         gap={gap}
         ref={ref}
         role="group"
-        // eslint-disable-next-line i18next/no-literal-string
         align="start"
         flexWrap={wrap ? 'wrap' : undefined}
       >

packages/components/src/Form/ValidationMessage/ValidationMessage.tsx

@@ -38,6 +38,7 @@ export interface ValidationMessageProps {
   type?: ValidationType
   /**
    * The validation message to render.
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   message?: string
 }

packages/components/src/Icon/Icon.tsx

@@ -63,6 +63,7 @@ export interface IconProps
    * Explicitly specify a title for the SVG rendered by the icon.
    * NOTE: If title is not specified `aria-hidden="true"` will be applied to hide the SVG from
    * screen-readers
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   title?: string
 }

packages/components/src/List/ListItem.tsx

@@ -72,14 +72,17 @@ export interface ListItemProps
    * @private
    */
   density?: DensityRamp
-  /*
+  /**
    * optional extra description
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   description?: ReactNode
   /**
    * Detail element placed right of the item children. Prop value can take one of two forms:
    * 1. ReactNode
    * 2. Object with content and options properties
+   *
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   detail?: Detail
   /**

packages/components/src/Tooltip/types.ts

@@ -52,6 +52,7 @@ export interface UseTooltipProps {
   /**
    * Content to display inside the tooltip. Can be a string or JSX.
    * If not defined, the Tooltip will not render.
+   * I18n recommended: content that is user visible should be treated for i18n
    */
   content?: ReactNode
   /**

packages/components/src/Truncate/Truncate.tsx

@@ -23,14 +23,13 @@
  SOFTWARE.
 
  */
-import React, { FC, useState, useCallback, ReactNode } from 'react'
+import React, { FC, useState, useCallback } from 'react'
 import styled from 'styled-components'
 import { width as widthHelper, WidthProps } from 'styled-system'
 import { useIsTruncated } from '../utils/useIsTruncated'
 import { useTooltip } from '../Tooltip'
 
 export interface TruncateProps extends WidthProps {
-  children: ReactNode
   className?: string
 }