docs: adr and figma links have been added to component docs (#384)

Trendyol · Jan 24, 2023 · c874c5d · c874c5d
1 parent 7b947dd
commit c874c5d
Show file tree

Hide file tree

Showing 24 changed files with 83 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -26,4 +26,10 @@ This way library will be served from a very high performant CDN and all of the B
 > **⚠️ Because the scripts of the custom components are loaded into the DOM later, the baklava components may appear unstyled on the screen for a while. In order to avoid this 'FOUCE' effect, you can follow the instructions at this
  [link](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).**
 
-Please check our [Storybook Documentation](https://trendyol.github.io/baklava/) for detailed information about design system, components and contribution guideline.
+## Useful Links
+
+* [Storybook Documentation](https://trendyol.github.io/baklava/)
+* [Figma Design Document](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide)
+* [Project Board](https://github.com/orgs/Trendyol/projects/4)
+* [Discussion Board](https://github.com/Trendyol/baklava/discussions)
+* [Mobile (React-Native) Implementation](https://github.com/Trendyol/baklava-react-native)
diff --git a/src/components/alert/bl-alert.stories.mdx b/src/components/alert/bl-alert.stories.mdx
@@ -48,6 +48,10 @@ export const SingleAlertTemplate = (args) => html`<bl-alert
   }</bl-alert>`;
 
 # Alert
+
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/138)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=25%3A3607)</bl-badge>
+
 Alert component displays an informational message to users with additional features if desired.
 
 ### Usage

diff --git a/src/components/badge/bl-badge.stories.mdx b/src/components/badge/bl-badge.stories.mdx
@@ -50,9 +50,13 @@ ${BadgeTemplate({ content:'In Progress', size:'large', ...args })}
 
 
 # Badge
+
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/130)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=25%3A3610)</bl-badge>
+
 Badge component can be used for highlighting a status or labeling an item.
 
-<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
 
 ## Badge Variants
 There are no specific variants for the badge but we suggest using our color palette for badge colors. If you need else colors you can change color by using `--bl-badge-bg-color` and `--bl-badge-color` variables.

diff --git a/src/components/button/bl-button.stories.mdx b/src/components/button/bl-button.stories.mdx
@@ -79,9 +79,12 @@ ${SingleButtonTemplate({size: 'small', ...args})}`
 
 # Button
 
+<bl-badge icon="document">ADR</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=4%3A5584)</bl-badge>
+
 Buttons allow users to take actions, and make choices with a single tap.
 
-<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
 
 ### Usage
 

diff --git a/src/components/checkbox-group/bl-checkbox-group.stories.mdx b/src/components/checkbox-group/bl-checkbox-group.stories.mdx
@@ -5,7 +5,7 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo
 import { userEvent } from '@storybook/testing-library';
 
 <Meta
-  title="Components/Checkbox Group"
+  title="Components/Checkbox/Checkbox Group"
   component="bl-checkbox-group"
   argTypes={{
     label: {

diff --git a/src/components/checkbox-group/checkbox/bl-checkbox.stories.mdx b/src/components/checkbox-group/checkbox/bl-checkbox.stories.mdx
@@ -3,7 +3,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';
 
 <Meta
-  title="Components/Checkbox"
+  title="Components/Checkbox/Checkbox"
   component="bl-checkbox"
   argTypes={{
     label: {
@@ -47,6 +47,10 @@ export const CheckboxDifferentBackgroundTemplate = (args) => html`<div style="pa
 </div>`;
 
 # Checkbox
+
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/136)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=118%3A4068)</bl-badge>
+
 Checkbox component can be used to control checked / unchecked statuses.
 
 ### Usage

diff --git a/src/components/dialog/bl-dialog.stories.mdx b/src/components/dialog/bl-dialog.stories.mdx
@@ -131,9 +131,12 @@ style = "font: var(--bl-font-body-text-2)">
 
 # Dialog
 
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/137)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=1992%3A8280)</bl-badge>
+
 Dialogs inform users about a task ansd can contain critical information, require decisions, or involve multiple tasks.
 
-<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
 
 ### Design Rules
 

diff --git a/src/components/drawer/bl-drawer.stories.mdx b/src/components/drawer/bl-drawer.stories.mdx
@@ -72,9 +72,12 @@ export const StoryTemplate = (args) => html`
 
 # Drawer
 
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/192)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=2963%3A14146)</bl-badge>
+
 A drawer presents context-specific information and/or actions without leaving the current page
 
-<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
 
 ### Design Rules
 

diff --git a/src/components/dropdown/bl-dropdown.stories.mdx b/src/components/dropdown/bl-dropdown.stories.mdx
@@ -5,7 +5,7 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo
 import { userEvent } from '@storybook/testing-library';
 
 <Meta
-  title="Components/Dropdown Button"
+  title="Components/Dropdown Button/Dropdown"
   component="bl-dropdown"
   argTypes={{
     label: {
@@ -79,9 +79,12 @@ ${SingleDropdownButtonTemplate({size: 'small', ...args})}`
 
 # Dropdown Button
 
+<bl-badge icon="document">ADR</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=2158%3A8508)</bl-badge>
+
 Dropdown Button is used to display a list of actions.
 
-<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
 
 ## Dropdown Button Variants
 

diff --git a/src/components/dropdown/group/bl-dropdown-group.stories.mdx b/src/components/dropdown/group/bl-dropdown-group.stories.mdx
@@ -8,7 +8,7 @@ import {
 } from '@storybook/addon-docs';
 
 <Meta
-  title="Components/Dropdown Group"
+  title="Components/Dropdown Button/Dropdown Group"
   component="bl-dropdown-group"
   argTypes={{
     caption: {

diff --git a/src/components/dropdown/item/bl-dropdown-item.stories.mdx b/src/components/dropdown/item/bl-dropdown-item.stories.mdx
@@ -8,7 +8,7 @@ import {
 } from '@storybook/addon-docs';
 
 <Meta
-  title="Components/Dropdown Item"
+  title="Components/Dropdown Button/Dropdown Item"
   component="bl-dropdown-item"
   argTypes={{
     icon: {

diff --git a/src/components/icon/bl-icon.stories.mdx b/src/components/icon/bl-icon.stories.mdx
@@ -69,9 +69,12 @@ export const AllIcons = (args) => html`<div
 
 # Icon
 
+<bl-badge icon="document">ADR</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=0%3A1)</bl-badge>
+
 Icon component is an **internal** component for using inside other Baklava components to show some decorative icons.
 
-<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
 
 ## Showing Icons
 

diff --git a/src/components/input/bl-input.stories.mdx b/src/components/input/bl-input.stories.mdx
@@ -102,6 +102,9 @@ export const LabelStylesTemplate = args => html`
 
 # Input
 
+<bl-badge icon="document">ADR</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=4%3A5586)</bl-badge>
+
 Input component is the component for taking text input from user.
 
 <bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>

diff --git a/src/components/pagination/bl-pagination.stories.mdx b/src/components/pagination/bl-pagination.stories.mdx
@@ -85,6 +85,9 @@ export const PaginationTemplate = (args) => html`
 
 # Pagination
 
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/139)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=118%3A4074)</bl-badge>
+
 The Pagination component enables the user to select a specific page from a range of pages. Number of content per page can also be selected by the user
 
 

diff --git a/src/components/progress-indicator/bl-progress-indicator.stories.mdx b/src/components/progress-indicator/bl-progress-indicator.stories.mdx
@@ -48,11 +48,14 @@ export const WithMaxTemplate = (args) => html`
 
 # Progress Indicator
 
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/151)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=151%3A2960)</bl-badge>
+
 A progress indicator provides feedback about the duration and progression of a process to indicate how long a user will be waiting.
 
 Progress indicator component used for a long operation or a process that can take a considerable or unknown amount of time. It visually shows the progression of a system operation such as downloading, uploading, loading data, submitting a form, or saving updates.
 
-<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
 
 ## Basic Usage
 

diff --git a/src/components/radio-group/bl-radio-group.stories.mdx b/src/components/radio-group/bl-radio-group.stories.mdx
@@ -5,7 +5,7 @@ import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addo
 import { userEvent } from '@storybook/testing-library';
 
 <Meta
-  title="Components/Radio Group"
+  title="Components/Radio/Radio Group"
   component="bl-radio-group"
   argTypes={{
     label: {
@@ -59,6 +59,9 @@ export const focusSecondOption = async ({ }) => {
 
 # Radio Group Component
 
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/135)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=1510%3A6857)</bl-badge>
+
 Radio Group component is a form field component to take a selection from user with a list of options. It needs to be used with `bl-radio` component.
 
 <Canvas>

diff --git a/src/components/radio-group/radio/bl-radio.stories.mdx b/src/components/radio-group/radio/bl-radio.stories.mdx
@@ -4,7 +4,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addon-docs';
 
 <Meta
-  title="Components/Radio"
+  title="Components/Radio/Radio"
   component="bl-radio"
   argTypes={{
     label: {

diff --git a/src/components/select/bl-select.stories.mdx b/src/components/select/bl-select.stories.mdx
@@ -9,7 +9,7 @@ import {
 import { userEvent } from '@storybook/testing-library';
 
 <Meta
-  title="Components/Select"
+  title="Components/Select/Select"
   component="bl-select"
   parameters={{
     layout: 'centered',
@@ -83,6 +83,9 @@ export const SelectOptionsSelectedTemplate = (args) => html`<bl-select
 
 # Select
 
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/88)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=25%3A3606)</bl-badge>
+
 Select component is a component for selecting a value from a list of options.
 Each option should be wrapped with `bl-select-option` component.
 

diff --git a/src/components/select/option/bl-select-option.stories.mdx b/src/components/select/option/bl-select-option.stories.mdx
@@ -8,7 +8,7 @@ import {
 } from '@storybook/addon-docs';
 
 <Meta
-  title="Components/SelectOption"
+  title="Components/Select/SelectOption"
   component="bl-select-option"
   argTypes={{
     disabled: {

diff --git a/src/components/switch/bl-switch.stories.mdx b/src/components/switch/bl-switch.stories.mdx
@@ -35,6 +35,10 @@ export const SwitchWithLabel = (args) => html`
 `
 
 # Switch
+
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/266)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=118%3A4070)</bl-badge>
+
 Switch component can be used to toggle On or Off states of any single item.
 
 ### Usage

diff --git a/src/components/tab-group/bl-tab-group.stories.mdx b/src/components/tab-group/bl-tab-group.stories.mdx
@@ -5,7 +5,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addon-docs';
 
 <Meta
-  title="Components/TabGroup"
+  title="Components/Tab/TabGroup"
   component="bl-tab-group"
   argTypes={{
     icon: {
@@ -66,9 +66,13 @@ export const TabGroup = (args) => html`
     `
 
 # Tab Group
+
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/134)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=4%3A5585)</bl-badge>
+
 Tab groups organizes the content in a way that each of Tab groups displays a section at a time.
 
-<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
 
 <Canvas>
 <Story name="Basic Usage">

diff --git a/src/components/tab-group/tab-panel/bl-tab-panel.stories.mdx b/src/components/tab-group/tab-panel/bl-tab-panel.stories.mdx
@@ -5,7 +5,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addon-docs';
 
 <Meta
-  title="Components/TabPanel"
+  title="Components/Tab/TabPanel"
   component="bl-tab-panel"
   argTypes={{
     tab: {
@@ -28,7 +28,7 @@ export const TabGroup = (args) => html`
 # Tab Panel
 Tab panels are utilized inside tab groups to show tabbed content
 
-<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
 
 <Canvas>
 <Story name="Basic Usage">

diff --git a/src/components/tab-group/tab/bl-tab.stories.mdx b/src/components/tab-group/tab/bl-tab.stories.mdx
@@ -5,7 +5,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addon-docs';
 
 <Meta
-  title="Components/Tab"
+  title="Components/Tab/Tab"
   component="bl-tab"
 />
 
@@ -58,7 +58,7 @@ export const SelectedDisabledTogetherTemplate = (args) => html`
 # Tab
 Within tab groups, tabs are used to represent and activate tab panels. A tab can be disabled by setting the disabled prop and can be selected by selected prop.
 
-<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
 
 <Canvas>
 <Story name="Basic Usage">

diff --git a/src/components/tooltip/bl-tooltip.stories.mdx b/src/components/tooltip/bl-tooltip.stories.mdx
@@ -45,9 +45,12 @@ export const PlacementTemplate = (args) => html`
 
 # Tooltip
 
+<bl-badge icon="document">ADR</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=25%3A3611)</bl-badge>
+
 Tooltips display informative text when users hover over an element.
 
-<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
 
 ## Basic Usage