docs: bo button docs update and ide setting change

.vscode/settings.json

@@ -1,4 +1,10 @@
 {
+  "explorer.fileNesting.enabled": true,
+  "explorer.fileNesting.patterns": {
+    "tsconfig.json": "tsconfig.*.json, env.d.ts",
+    "vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
+    "package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .prettier*, prettier*, .editorconfig"
+  },
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
   },

docs/components/button/button.md

@@ -19,18 +19,17 @@ The component to use is called `bo-button`.
 
 ## Props
 
-| Prop name               | Type              | Default value             |
-| ----------------------- | ----------------- | ------------------------- |
-| `label`                 | `string`          | `undefined`               |
-| `variant`               | `BoButtonVariant` | `BoButtonVariant.primary` |
-| `shape`                 | `BoButtonShape`   | `BoButtonShape.default`   |
-| `type`                  | `HtmlButtonType`  | `button`                  |
-| `disabled`              | `boolean`         | `false`                   |
-| `isLoading`             | `boolean`         | `false`                   |
-| `size`                  | `BoSize`          | `BoSize.default`          |
-| `linkVariantWithShadow` | `boolean`         | `false`                   |
-| `prefixIcon`            | `Icon`            | `Icon.none`               |
-| `suffixIcon`            | `Icon`            | `Icon.none`               |
+| Prop name    | Type              | Default value             |
+| ------------ | ----------------- | ------------------------- |
+| `label`      | `string`          | `undefined`               |
+| `variant`    | `BoButtonVariant` | `BoButtonVariant.primary` |
+| `shape`      | `BoButtonShape`   | `BoButtonShape.default`   |
+| `type`       | `HtmlButtonType`  | `button`                  |
+| `disabled`   | `boolean`         | `false`                   |
+| `isLoading`  | `boolean`         | `false`                   |
+| `size`       | `BoSize`          | `BoSize.default`          |
+| `prefixIcon` | `Icon`            | `Icon.none`               |
+| `suffixIcon` | `Icon`            | `Icon.none`               |
 
 ::: warning Note
 To make the button work properly, either the `label` or the `prefixIcon` prop must be provided.
@@ -46,30 +45,43 @@ to match the icon correctly.
 
 The `disabled` prop can be used to disable the button. When the button is disabled, it will not respond to user interactions and will appear in a disabled state.
 
-<div class="flex flex-row gap-4 w">
-	<bo-button label="Disabled" disabled />
+### Example
+
+<div class="mt-4"> 
+	<bo-button label="Disabled" :disabled="true" />
 </div>
 
+```vue
+<bo-button label="Disabled" :disabled="true" />
+```
+
 ## Loading
 
 The `isLoading` prop can be used to show a loading spinner. When the spinner is shown, the button will be disabled and will not respond to user interactions.
 
-<div class="flex flex-row gap-4 w">
-	<bo-button label="Loading" :isLoading="true" />
-</div>
+<bo-button label="Loading" :isLoading="true" />
+
+### Example
+
+```vue
+<bo-button label="Loading" :isLoading="true" />
+```
 
 ## Button variants
 
-To change the color of the component, you can use the predifened `BoButtonVariant` enum.
+To change the color of the component, you can use the predifened `BoButtonVariant` enum and `variant` prop The available values for the `BoButtonVariant` enum
 
-The available values for the `BoButtonVariant` enum are:
+### Filled variants
 
 - `primary`
 - `secondary`
 - `danger`
 - `warning`
 - `success`
 - `dark`
+
+### Link variants
+
 - `link`
 - `link_secondary`
 - `link_danger`
@@ -79,6 +91,13 @@ The available values for the `BoButtonVariant` enum are:
 
 <bo-button-variants-example />
 
+### Example
+
+```vue
+<bo-button label="Button" :variant="BoButtonVariant.primary" />
+...
+```
+
 ## Button shapes
 
 To change the shape of the component, you can use the predifened `BoButtonShape` enum. The `BoButtonShape` enum includes the following shapes:
@@ -89,6 +108,12 @@ To change the shape of the component, you can use the predifened `BoButtonShape`
 
 <bo-button-shapes-example />
 
+### Example
+
+```vue
+<bo-button label="Button" :shape="BoButtonShape.outline" />
+```
+
 ## Button sizes
 
 The `size` prop can be used to change the size of the button. The `size` prop should be a member of the `BoSize` enum.
@@ -101,19 +126,44 @@ The `size` prop can be used to change the size of the button. The `size` prop sh
 
 <bo-button-size-example />
 
+### Example
+
+```vue
+<bo-button label="Button" :size="BoSize.default" />
+```
+
 ## Button types
 
 To change the type of the component, you can use the predifened `type` prop. The `type` prop should be a string that represents the type of the button. The `type` prop can take the values of the `button`, `submit`, and `reset`.
 
+### Example
+
+```vue
+<bo-button label="Button" :type="HtmlButtonType.submit" />
+```
+
 ## With icon
 
 The `prefixIcon` and `suffixIcon` props can be used to display an icon before and after the label of the button.
 Both of these props should be a member of the `Icon` enum.
 
 <bo-button-icon-variants />
 
+### Example
+
+```vue
+<bo-button label="Button" :prefix-icon="Icon.alert_circle" />
+<bo-button label="Button" :suffix-icon="Icon.alert_circle" />
+```
+
 ## Icon only
 
 To create an icon only button, you can use the `prefixIcon` prop without the `label`. If the label is not provided, the padding and the general size of the button will be aligned
 
 <bo-button-icon-only-variant />
+
+### Example
+
+```vue
+<bo-button :prefix-icon="Icon.alert_circle" />
+```

src/components/bo_button/BoButton.vue

@@ -54,24 +54,13 @@ const props = withDefaults(defineProps<BoButtonProps>(), {
 	size: () => BoSize.default,
 	prefixIcon: () => Icon.none,
 	suffixIcon: () => Icon.none,
-	linkVariantWithShadow: false,
 	type: () => HtmlButtonType.button,
 	shape: () => BoButtonShape.default,
 	variant: () => BoButtonVariant.primary,
 })
 
-const {
-	label,
-	type,
-	variant,
-	size,
-	prefixIcon,
-	suffixIcon,
-	shape,
-	linkVariantWithShadow,
-	disabled,
-	isLoading,
-} = toRefs(props)
+const { label, type, variant, size, prefixIcon, suffixIcon, shape, disabled, isLoading } =
+	toRefs(props)
 
 const defaultClasses: string =
 	/*tw*/ 'bo-button inline-flex items-center justify-center cursor-pointer w-fit'
@@ -188,13 +177,7 @@ const buttonVariantShadowClasses = computed<string>(() => {
 		case BoButtonVariant.link_warning:
 		case BoButtonVariant.link_success:
 		case BoButtonVariant.link_dark:
-			switch (linkVariantWithShadow.value) {
-				case false:
-					return /*tw*/ 'shadow-none'
-				case true:
-				default:
-					return /*tw*/ 'shadow-md'
-			}
+			return /*tw*/ 'shadow-none'
 		case BoButtonVariant.primary:
 		case BoButtonVariant.secondary:
 		case BoButtonVariant.danger:

src/components/bo_button/__test__/bo_button.test.ts

@@ -1,8 +1,4 @@
-import {
-	BoButton,
-	BoButtonShape,
-	BoButtonVariant,
-} from '@/components/bo_button'
+import { BoButton, BoButtonShape, BoButtonVariant } from '@/components/bo_button'
 import { Icon } from '@/components/bo_icon'
 import BoIcon from '@/components/bo_icon/BoIcon.vue'
 import BoLoadingSpinner from '@/components/bo_loading_spinner/BoLoadingSpinner.vue'
@@ -351,11 +347,6 @@ describe('bo_button.vue', () => {
 			await wrapper.setProps({ variant: BoButtonVariant.link })
 			expect(wrapper.classes()).toContain('shadow-none')
 		})
-
-		test('if the prop is set to true the link types buttton should have a shadow', async () => {
-			await wrapper.setProps({ linkVariantWithShadow: true })
-			expect(wrapper.classes()).toContain('shadow-lg')
-		})
 	})
 
 	suite('button loader variants', () => {

src/components/bo_button/types.ts

@@ -13,5 +13,4 @@ export type BoButtonProps = {
 	size?: BoSize
 	prefixIcon?: Icon
 	suffixIcon?: Icon
-	linkVariantWithShadow?: boolean
 }