docs: ✏️ Generate documentation for the grid feature

phun-ky · Aug 2, 2024 · 6ab2a4e · 6ab2a4e
1 parent 2306cee
commit 6ab2a4e
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 7 deletions.
diff --git a/api/README.md b/api/README.md
@@ -10,6 +10,7 @@
 - [features/a11y/utils/styles](modules/features_a11y_utils_styles.md)
 - [features/dissect](modules/features_dissect.md)
 - [features/dissect/utils/styles](modules/features_dissect_utils_styles.md)
+- [features/grid](modules/features_grid.md)
 - [features/mark](modules/features_mark.md)
 - [features/measure](modules/features_measure.md)
 - [features/spacing](modules/features_spacing.md)

diff --git a/api/modules/features_grid.md b/api/modules/features_grid.md
@@ -0,0 +1,78 @@
+[@phun-ky/speccer](../README.md) / features/grid
+
+# Module: features/grid
+
+## Functions
+
+### create
+
+▸ **create**(`targetElement`, `styles`): `HTMLDivElement`
+
+Creates a visual grid overlay for a given target element.
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `targetElement` | `HTMLElement` | The target element to create the grid overlay for. |
+| `styles` | `CSSStyleDeclaration` | The computed styles of the target element. |
+
+#### Returns
+
+`HTMLDivElement`
+
+The created grid container element.
+
+**`Example`**
+
+```ts
+const targetElement = document.getElementById('target');
+if (targetElement) {
+  const styles = window.getComputedStyle(targetElement);
+  const gridOverlay = create(targetElement, styles);
+  document.body.appendChild(gridOverlay);
+}
+```
+
+#### Defined in
+
+features/grid/index.ts:24
+
+___
+
+### element
+
+▸ **element**(`targetElement`): `Promise`\<`void`\>
+
+Create a visual overlay to present the column gaps for a grid container
+
+Adds a visual grid overlay to the target element if it has the appropriate data attribute and is a grid.
+
+![dissect](https://github.com/phun-ky/speccer/blob/main/public/grid.png?raw=true)
+
+#### Parameters
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `targetElement` | `HTMLElement` | The target element to add the grid overlay to. |
+
+#### Returns
+
+`Promise`\<`void`\>
+
+A promise that resolves once the overlay has been added.
+
+**`Example`**
+
+```ts
+const targetElement = document.getElementById('target');
+if (targetElement) {
+  element(targetElement).then(() => {
+    console.log('Grid overlay added');
+  });
+}
+```
+
+#### Defined in
+
+features/grid/index.ts:89
diff --git a/api/modules/main.md b/api/modules/main.md
@@ -17,7 +17,24 @@
 
 #### Defined in
 
-[main.ts:31](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L31)
+[main.ts:40](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L40)
+
+___
+
+### grid
+
+• `Const` **grid**: `Object`
+
+#### Type declaration
+
+| Name | Type |
+| :------ | :------ |
+| `create` | (`targetElement`: `HTMLElement`, `styles`: `CSSStyleDeclaration`) => `HTMLDivElement` |
+| `element` | (`targetElement`: `HTMLElement`) => `Promise`\<`void`\> |
+
+#### Defined in
+
+[main.ts:30](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L30)
 
 ___
 
@@ -34,7 +51,7 @@ ___
 
 #### Defined in
 
-[main.ts:41](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L41)
+[main.ts:50](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L50)
 
 ___
 
@@ -51,7 +68,7 @@ ___
 
 #### Defined in
 
-[main.ts:36](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L36)
+[main.ts:45](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L45)
 
 ___
 
@@ -70,7 +87,7 @@ ___
 
 #### Defined in
 
-[main.ts:51](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L51)
+[main.ts:60](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L60)
 
 ___
 
@@ -87,7 +104,7 @@ ___
 
 #### Defined in
 
-[main.ts:26](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L26)
+[main.ts:35](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L35)
 
 ___
 
@@ -104,7 +121,7 @@ ___
 
 #### Defined in
 
-[main.ts:46](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L46)
+[main.ts:55](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L55)
 
 ## Functions
 
@@ -118,4 +135,4 @@ ___
 
 #### Defined in
 
-[main.ts:58](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L58)
+[main.ts:67](https://github.com/phun-ky/speccer/blob/main/src/main.ts#L67)