From 8c1ffd4cb097b1bdc480d73a35188595a9424257 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 24 Jul 2020 22:35:20 -0700
Subject: [PATCH] chore: use jsdoc to annotate props

---
 src/Accordion/Accordion.svelte       | 11 ++++++++++-
 src/Accordion/AccordionItem.svelte   | 15 +++++++++++++++
 src/Breadcrumb/Breadcrumb.svelte     |  9 +++++++++
 src/Breadcrumb/BreadcrumbItem.svelte |  9 +++++++++
 src/Grid/Column.svelte               | 18 ++++++++----------
 5 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
index 57bf1171..517c51c3 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -1,5 +1,14 @@
 <script>
-  export let align = "end"; // "start" | "end"
+  /**
+   * Specify alignment of accordion item chevron icon
+   * @type {"start" | "end"} [align="end"]
+   */
+  export let align = "end";
+
+  /**
+   * Set to `true` to display skeleton state
+   * @type {boolean} [skeleton=false]
+   */
   export let skeleton = false;
 
   import AccordionSkeleton from "./Accordion.Skeleton.svelte";
diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte
index 3d34937b..ab846a40 100644
--- a/src/Accordion/AccordionItem.svelte
+++ b/src/Accordion/AccordionItem.svelte
@@ -1,6 +1,21 @@
 <script>
+  /**
+   * Specify title of accordion item heading
+   * Alternatively use the named slot "title"
+   * @type {string} [title="title"]
+   */
   export let title = "title";
+
+  /**
+   * Set to `true` to open the first accordion item
+   * @type {boolean} [open=false]
+   */
   export let open = false;
+
+  /**
+   * Define the ARIA label for accordion item chevron icon
+   * @type {string} [iconDescription="Expand/Collapse"]
+   */
   export let iconDescription = "Expand/Collapse";
 
   import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
diff --git a/src/Breadcrumb/Breadcrumb.svelte b/src/Breadcrumb/Breadcrumb.svelte
index b49c9e28..1dcc2c10 100644
--- a/src/Breadcrumb/Breadcrumb.svelte
+++ b/src/Breadcrumb/Breadcrumb.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Set to `true` to hide breadcrumb trailing slash
+   * @type {boolean} [noTrailingSlash=false]
+   */
   export let noTrailingSlash = false;
+
+  /**
+   * Set to `true` to display skeleton state
+   * @type {boolean} [skeleton=false]
+   */
   export let skeleton = false;
 
   import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";
diff --git a/src/Breadcrumb/BreadcrumbItem.svelte b/src/Breadcrumb/BreadcrumbItem.svelte
index 80dbb9e6..79287d0a 100644
--- a/src/Breadcrumb/BreadcrumbItem.svelte
+++ b/src/Breadcrumb/BreadcrumbItem.svelte
@@ -1,5 +1,14 @@
 <script>
+  /**
+   * Use anchor link
+   * @type {string} [href]
+   */
   export let href = undefined;
+
+  /**
+   * Set to `true` if item is the current page
+   * @type {boolean} [isCurrentPage=false]
+   */
   export let isCurrentPage = false;
 
   import { Link } from "../Link";
diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte
index f98225a7..e352c138 100644
--- a/src/Grid/Column.svelte
+++ b/src/Grid/Column.svelte
@@ -6,30 +6,28 @@
 
   /**
    * Aspect ratio of the column
-   * @type {("2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1")} [aspectRatio]
+   * @type {"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"} [aspectRatio]
    */
   export let aspectRatio = undefined;
 
   /**
-   * @typedef {(boolean | number)} ColumnSize
-   * @typedef {Object} ColumnSizeDescriptor
-   * @property {ColumnSize} [ColumnSizeDescriptor.span] Column size
-   * @property {number} [ColumnSizeDescriptor.offset] Column offset
+   * @typedef {boolean | number} ColumnSize
+   * @typedef {{span?: ColumnSize: offset: number}} ColumnSizeDescriptor
    */
 
-  /** @type {ColumnSize|ColumnSizeDescriptor} [sm] */
+  /** @type {ColumnSize | ColumnSizeDescriptor} [sm] */
   export let sm = undefined;
 
-  /** @type {ColumnSize|ColumnSizeDescriptor} [md] */
+  /** @type {ColumnSize | ColumnSizeDescriptor} [md] */
   export let md = undefined;
 
-  /** @type {ColumnSize|ColumnSizeDescriptor} [lg] */
+  /** @type {ColumnSize | ColumnSizeDescriptor} [lg] */
   export let lg = undefined;
 
-  /** @type {ColumnSize|ColumnSizeDescriptor} [xlg] */
+  /** @type {ColumnSize | ColumnSizeDescriptor} [xlg] */
   export let xlg = undefined;
 
-  /** @type {ColumnSize|ColumnSizeDescriptor} [max] */
+  /** @type {ColumnSize | ColumnSizeDescriptor} [max] */
   export let max = undefined;
 
   const breakpoints = ["sm", "md", "lg", "xlg", "max"];