docs: added props generation script

README.md

@@ -74,12 +74,12 @@ below documentation to learn more.
 
 ## Components
 
-- [Accordion](#accordion)
-- Breadcrumbs
-- Calendar
+- [Accordion](./docs/Accordion.md)
+- [Breadcrumbs](./docs/Breadcrumb.md)
+- [Calendar](./docs/Calendar.md)
 - Date Picker
 - Drawer
-- Link
+- [Link](./docs/Link.md)
 - Meter
 - Number Input
 - Pagination

docs-templates/Accordion.md

@@ -3,6 +3,16 @@
 Accessible Accordion component. It follows the
 [WAI-ARIA Accordion Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#accordion).
 
+<!-- CODESANDBOX
+link_title: Accordion Example Live Demo
+js: src/accordion/stories/__js/AccordionBasic.component.jsx
+css: src/accordion/stories/AccordionStyled.css
+-->
+
+# Props
+
+<!-- INJECT_PROPS src/accordion -->
+
 ### Accessibility
 
 - `Accordion` extends the accessibility features of
@@ -22,17 +32,10 @@ Accessible Accordion component. It follows the
 
 ### Composition
 
-- `Accordion` uses
-  [Composite](https://github.com/reakit/reakit/blob/master/docs/composite).
-- `AccordionTrigger` uses
-  [CompositeItem](https://github.com/reakit/reakit/blob/master/docs/composite).
-- `AccordionPanel` uses
-  [DisclosureContent](https://github.com/reakit/reakit/blob/master/docs/disclosure).
+<!-- INJECT_COMPOSITION src/accordion -->
 
 ### Example
 
 ```js
-
 <!-- IMPORT_EXAMPLE src/accordion/stories/__js/AccordionBasic.component.jsx -->
-
 ```

docs-templates/Breadcrumb.md

@@ -4,6 +4,10 @@ Accessible `Breadcrumb` component that provides the required aria attributes for
 it's links. It follows the
 [WAI-ARIA Breadcrumb Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#breadcrumb).
 
+# Props
+
+<!-- INJECT_PROPS src/breadcrumbs -->
+
 ### Accessibilty
 
 - `Breadcrumbs` should have `aria-label` or `aria-labelledby` attribute.
@@ -13,12 +17,10 @@ it's links. It follows the
 
 ### Composition
 
-- `BreadcrumbLink` uses [Link](#Link).
+<!-- INJECT_COMPOSITION src/breadcrumbs -->
 
 ### Example
 
 ```js
-
 <!-- IMPORT_EXAMPLE src/breadcrumbs/stories/__js/Breadcrumbs.component.jsx -->
-
 ```

docs-templates/Calendar.md

@@ -0,0 +1,37 @@
+## Calendar
+
+Accessible `Calendar` component.
+
+<!-- CODESANDBOX
+link_title: Calendar - Open On Sandbox
+js: src/calendar/stories/__js/CalendarBase.component.jsx
+css: src/calendar/stories/CalendarBase.css
+-->
+
+<!-- CODESANDBOX
+link_title: RangeCalendar - Open On Sandbox
+js: src/calendar/stories/__js/CalendarRange.component.jsx
+css: src/calendar/stories/CalendarRange.css
+-->
+
+# Props
+
+<!-- INJECT_PROPS src/calendar -->
+
+# Composition
+
+<!-- INJECT_COMPOSITION src/calendar -->
+
+### Example
+
+#### Base Calendar
+
+```js
+<!-- IMPORT_EXAMPLE src/calendar/stories/__js/CalendarBase.component.jsx -->
+```
+
+#### Range Calendar
+
+```js
+<!-- IMPORT_EXAMPLE src/calendar/stories/__js/CalendarRange.component.jsx -->
+```

docs-templates/Link.md

@@ -4,19 +4,20 @@ Accessible `Link` component that provides the required aria role when used under
 different compositions. It follows the
 [WAI-ARIA Link Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#link).
 
+# Props
+
+<!-- INJECT_PROPS src/link -->
+
 ### Accessibilty
 
 - `Link` has role `link`.
 
 ### Composition
 
-- `Link` uses
-  [Clickable](https://github.com/reakit/reakit/blob/master/docs/clickable)
+<!-- INJECT_COMPOSITION src/link -->
 
 ### Example
 
 ```js
-
 <!-- IMPORT_EXAMPLE src/link/stories/__js/Link.component.jsx -->
-
 ```