docs(ADR): move ADRs under components directories (#865)

Closes #864

Co-authored-by: Buse Selvi <106681486+buseselvi@users.noreply.github.com>

src/components/accordion-group/doc/ADR.md

@@ -0,0 +1,58 @@
+## Figma Design Document
+
+https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?type=design&node-id=15548%3A20910&mode=design&t=25ieOea9LEuP8Yzk-1
+
+## General Usage Example
+
+```html
+<!-- STANDALONE -->
+<bl-accordion caption="Deneme"> Merhaba </bl-accordion>
+
+<!-- LIST VARIANT -->
+<bl-accordion-group>
+ <bl-accordion caption="Deneme"> Merhaba </bl-accordion>
+
+ <bl-accordion icon="eye_on" caption="Deneme"> Merhaba </bl-accordion>
+</bl-accordion-group>
+```
+
+## Rules
+
+* Accordion is a component that allows the user to show and hide sections of related content on a page.
+* The accordion component includes a free content area.
+* The caption can be set either via attribute or **slot**.
+* An icon can be added to the beginning of the caption.
+* Accordion can be disabled.
+* The accordion group component combines accordions and only allows one accordion to be open by default
+
+
+## API Reference
+
+### bl-accordion-group
+
+| Attribute | Type | Description | Default Value |
+|-----------|---------|----------------------------------------------|---------------|
+| multiple | boolean | Allow multiple accordions to be open at once | false |
+
+
+### bl-accordion
+
+| Attribute | Type | Description | Default Value |
+|-----------|---------|------------------------------------|---------------|
+| open | boolean | Whether the accordion is expanded | false |
+| caption | string | Sets accordion caption. | null |
+| icon | string | Add icon to beginning of the title | null |
+| disabled | boolean | Whether the accordion is expanded | false |
+
+#### Slots
+
+| Slot Name | Description |
+|-----------|---------------------------------------------------------------------|
+| title | Setting the accordion title as a slot disables the title attribute. |
+| default | Free content area |
+
+#### Events
+
+| Event | Description |
+|-----------|---------------------------------------------------|
+| bl-toggle | Triggered when the accordion expands or collapses |

src/components/alert/doc/ADR.md

@@ -0,0 +1,62 @@
+## Figma Design Document
+
+https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=796%3A7839
+
+## Implementation
+
+General usage example:
+
+```html
+ <bl-alert
+ variant="error"
+ caption="Default Caption"
+ description="Default Description"
+ icon="close_fill"
+ closable
+ >
+ <span slot="caption">
+ Awesome Caption!
+ </span>
+ Some important description.
+ <bl-button slot="action">
+ Click me!
+ </bl-button>
+ </bl-alert>
+```
+
+### Rules
+
+* `closable` attribute displays a close button in alert component. Emits an event named `bl-close` and component will hide itself via css property.
+* Component will not have default icon but users can use `icon` to use default icons according to variants or `icon="calendar"` to customize icon.
+* `action` slot will only accept `bl-button` component (else will cause an error) and will override some attributes of the slotted button (`variant` will be `secondary` and `kind` will be `text`, `icon` will not be allowed).
+* For mobile design `bl-button` component which can be used in `action` slot will convert itself to icon-only `bl-button`.
+
+## API Reference:
+
+### `bl-alert` component
+
+Alert component displays an informational message to users with additional features if desired.
+
+#### Attributes
+
+| Attribute | Description | Default Value |
+| --------------- | --------------- | --------------- |
+| variant (`string`) | Decides variants of alert box ( `info`, `success`, `warning`, `error` ) | `"info"` |
+| caption (`string`) | Sets alert caption | - |
+| description (`string`) | Sets alert description | - |
+| icon (`string, boolean`) | Allows to customize alert icon | `false` |
+| closable (`boolean`) | Displays a close button when used | `false` |
+
+#### Slots
+
+| Event | Description |
+| --------------- | --------------- |
+| `caption` slot | Will fill alert caption |
+| `default` slot | Will fill alert description |
+| `action` slot | Will fill alert action slot and will accept only `bl-button` component or it will throw an error |
+
+#### Events
+
+| Event | Description |
+| --------------- | --------------- |
+| `bl-close` | Will be triggered each time close button is clicked |

src/components/badge/doc/ADR.md

@@ -0,0 +1,54 @@
+## Figma Design Document
+
+https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=25%3A3610
+
+## Implementation
+
+General usage example:
+
+```html
+<bl-badge>In Progress</bl-badge>
+```
+
+### Rules
+
+* Icon can only be used on Large and Medium badges.
+* There are no specific variants for the badge but using our color palette for badge colors is suggested.
+
+### Usage Examples
+
+Default background color is `--bl-color-accent-primary-background` and default color is `--bl-color-primary`. But any color can be set like this:
+
+```html
+<style>
+.danger-badge {
+--bl-badge-bg-color:var(--bl-color-danger-background);
+--bl-badge-color:var(--bl-color-danger);
+}
+</style>
+
+<bl-badge class="danger-badge">Denied</bl-badge>
+```
+
+The icon can be set like this:
+
+```html
+<bl-badge icon="waiting">In Progress</bl-badge>
+```
+
+The size can be set like this:
+
+```html
+<bl-badge size="large">In Progress</bl-badge>
+```
+
+## API Reference:
+
+#### Attributes
+
+| Attribute | Description | Default Value |
+| --------------- | --------------- | --------------- |
+| size (`string`) | Size of badge(small,medium,large) | medium |
+| icon (`string`) | Name of the icon that will be shown in badge | - |
+
+

src/components/checkbox-group/doc/ADR.md

@@ -0,0 +1,51 @@
+## Figma Design Document
+
+https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=118%3A4068
+
+## Implementation
+
+General usage example:
+
+```html
+<bl-checkbox checked disabled>single checkbox</bl-checkbox>
+```
+
+
+### Rules
+* `Indeterminate` state can be use with a single checkbox.
+* Styling the colors of checkbox component will be possible via `bl-checkbox` CSS properties. Like
+```html
+<style>
+.checkbox-new {
+ --bl-color-primary: rebeccapurple;
+}
+</style>
+
+<bl-checkbox class="checkbox-new">new label</bl-checkbox>
+```
+
+## API Reference:
+
+### `bl-checkbox` component
+
+Checkbox component handles interaction to change checked/unchecked states.
+
+#### Attributes
+
+| Attribute | Description | Default Value |
+| --------------- | --------------- | --------------- |
+| checked (`boolean`) | Sets checkbox checked. By default checkbox is unchecked | false |
+| disabled (`boolean`) | Sets checkbox disabled | - |
+| indeterminate (`boolean`) | Sets checkbox indeterminate | - |
+
+#### Slots
+
+| Name | Description | Default Content |
+| --------------- | --------------- | --------------- |
+| `default` slot | label | - |
+
+#### Events
+
+| Event | Description |
+| --------------- | --------------- |
+| `bl-checkbox-change` | Will be triggered when checkbox clicked ( event.target.checked )|

src/components/dialog/doc/ADR.md

@@ -0,0 +1,50 @@
+## Figma Design Document
+
+https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=1992%3A8280
+
+## Implementation
+
+General usage example:
+
+```html
+<bl-dialog caption='Dialog Title'>
+ <p> Dialog Content </p>
+ <bl-button slot="primary-action">Save Message</bl-button>
+ <bl-button slot="secondary-action" kind="danger">Delete Message</bl-button>
+ <bl-button slot="tertiary-action">Dismiss</bl-button>
+</bl-dialog>
+```
+
+### Rules
+
+* By default a dialog contains a close button and a primary action button.
+* Dialogs are always closeable. By default it closes by close button, by clicking outside of the dialog and by clicking "esc" on keyboard.
+* A dialog should contain at least one content (text, image etc.).
+* Dialogs are always centered on the page, with an overlay behind them that hides the page content.
+* Only large buttons can be used in the action bar and there can be maximum 3 buttons (primary, secondary and tertiary).
+
+## API Reference:
+
+#### Attributes
+
+| Attribute | Description | Default Value |
+| --------------- | --------------- | --------------- |
+| caption (`string`) | Title of the dialog | - |
+| open (`boolean`) | Sets dialog open-close status. By default, the dialog is closed. | false |
+
+#### Slots
+
+| Name | Description | Default Content |
+| --------------- | --------------- | --------------- |
+| `default` slot | Content of dialog | - |
+| `actions` slot | Dialog actions (action buttons) of dialog | - |
+
+#### Events
+
+| Event | Description |
+| --------------- | --------------- |
+| `bl-dialog-open` | Will be triggered every time the dialog is opened |
+| `bl-dialog-close` | Will be triggered every time the dialog is closed |
+
+
+

src/components/drawer/doc/ADR.md

@@ -0,0 +1,53 @@
+## Figma Design Document
+
+https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=2963%3A14146&t=EeXAS4ruHbwtJQAN-1
+
+## Implementation
+
+General usage example:
+
+```html
+<bl-drawer caption='Drawer Title' external-link='https://some-url.com'>
+ content
+</bl-drawer>
+```
+
+### Rules
+
+* Title and external link displayed on header section in drawer. Title is necessary but external link is optional.
+* Close button always displayed on header section and drawer can be closed by clicking close button.
+* By default, Drawer can not close by clicking somewhere outside drawer.
+* Drawer appears right side on the page with full height expanded.
+* Title can be multiline automatically if it does not fit one line.
+* If user does not specify title, title part of header will be rendered empty.
+* There will be an animation when drawer opens and closes. ( Animation topics will be discussed again in later times )
+* There is an attribute about iframe and drawer component handle iframe rendering itself.
+* Only one drawer can display at the same time. When one drawer opens others will be closed.
+
+## API Reference:
+
+### `bl-drawer` component
+
+Description
+
+#### Attributes
+
+| Attribute | Description | Default Value |
+| --------------- | --------------- | --------------- |
+| caption (`string`) | Title of the drawer (optional) | - |
+| external-link (`string`) | External link (optional) | - |
+| embed-url (`string`) | Iframe url (optional) | - |
+| open (`boolean`) | Sets drawer open-close status | - |
+
+#### Slots
+
+| Name | Description | Default Content |
+| --------------- | --------------- | --------------- |
+| `default` slot | Content inside drawer | - |
+
+#### Events
+
+| Event | Description |
+| --------------- | --------------- |
+| `bl-drawer-open` | Will be triggered every time drawer is opened |
+| `bl-drawer-close` | Will be triggered every time drawer is closed |