docs: add note for using inline styling at storybook components (#200)

Co-authored-by: Levent Anil Ozen <[email protected]>

src/components/badge/bl-badge.stories.mdx

@@ -52,6 +52,8 @@ ${BadgeTemplate({ content:'In Progress', size:'large', ...args })}
 # Badge
 Badge component can be used for highlighting a status or labeling an item.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 ## 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.
 You dont have to give style parameter you can change color by giving css class like this:

src/components/button/bl-button.stories.mdx

@@ -85,6 +85,8 @@ ${SingleButtonTemplate({kind: 'text', ...args})}`;
 
 Buttons allow users to take actions, and make choices with a single tap.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 ### Usage
 
 * A button should contain at least one text, icon or both (text + icon).

src/components/icon/bl-icon.stories.mdx

@@ -71,7 +71,7 @@ export const AllIcons = (args) => html`<div
 
 Icon component is an **internal** component for using inside other Baklava components to show some decorative icons.
 
-*Inline styles in examples are only for demo purposes. Use regular CSS classes or tag selectors to set styles.*
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
 
 ## Showing Icons
 

src/components/input/bl-input.stories.mdx

@@ -99,6 +99,8 @@ export const LabelStylesTemplate = args => html`
 
 Input component is the component for taking text input from user.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 ## Basic Usage
 
 Currently, input component supports `text` and `number` types, which default is `text`.

src/components/progress-indicator/bl-progress-indicator.stories.mdx

@@ -52,6 +52,7 @@ A progress indicator provides feedback about the duration and progression of a p
 
 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.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
 
 ## Basic Usage
 

src/components/tab-group/bl-tab-group.stories.mdx

@@ -68,6 +68,8 @@ export const TabGroup = (args) => html`
 # Tab Group
 Tab groups organizes the content in a way that each of Tab groups displays a section at a time.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 <Canvas>
 <Story name="Basic Usage">
     {TabGroup.bind({})}

src/components/tab-group/tab-panel/bl-tab-panel.stories.mdx

@@ -28,6 +28,8 @@ export const TabGroup = (args) => html`
 # Tab Panel
 Tab panels are utilized inside tab groups to show tabbed content
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 <Canvas>
 <Story name="Basic Usage">
     {TabGroup.bind({})}

src/components/tab-group/tab/bl-tab.stories.mdx

@@ -58,6 +58,8 @@ 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.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 <Canvas>
 <Story name="Basic Usage">
     {TabsTemplate.bind({})}

src/components/tooltip/bl-tooltip.stories.mdx

@@ -47,6 +47,8 @@ export const PlacementTemplate = (args) => html`
 
 Tooltips display informative text when users hover over an element.
 
+> **Note:** *Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.*
+
 ## Basic Usage
 
 Tooltip can be used with any trigger such as button, icon, text, etc.