added dependencies to story for buttons (#786)

* added dependencies to story for buttons

* fix for all

Author: ChristianHoffmannS2

packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts

@@ -1,11 +1,15 @@
 /* eslint-disable no-console */
 import { html } from 'lit';
-import { BlrIconButtonType } from './index';
+import type { BlrIconButtonType } from './index';
+
 import { BlrIconButtonRenderFunction } from './renderFunction';
 import { PureIconKeys } from '@boiler/icons';
 import { ActionVariants, ActionSizes } from '../../../../globals/constants';
 import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../../index';
+
 // Shared Style inside the Stories
 const sharedStyles = html`
   <style>

packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts

@@ -6,6 +6,9 @@ import { PureIconKeys } from '@boiler/icons';
 import { ActionSizes, ActionVariants, IconPositionVariant, ButtonDisplayOptions } from '../../../../globals/constants';
 import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../../index';
+
 // Shared Style inside the Stories
 const sharedStyles = html`
   <style>

packages/ui-library/src/components/feedback/loader/index.stories.ts

@@ -4,6 +4,9 @@ import { FeedbackSizes, FeedbackVariants } from '../../../globals/constants';
 import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 import { html } from 'lit-html';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 // Shared Style inside the Stories
 const sharedStyles = html`
   <style>

packages/ui-library/src/components/feedback/tooltip/index.stories.ts

@@ -10,6 +10,9 @@ import { FormSizesType } from '../../../globals/types';
 import { Placement as PlacementType } from '@floating-ui/dom';
 import { BlrTooltipBubbleRenderFunction } from './tooltip-bubble/renderFunction';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 export default {
   title: 'Design System/Web Components/Feedback/Tooltip/Tooltip',
   argTypes: {

packages/ui-library/src/components/feedback/tooltip/tooltip-bubble/index.stories.ts

@@ -3,6 +3,9 @@ import { BlrTooltipBubbleType } from '.';
 import { BlrTooltipBubbleRenderFunction } from './renderFunction';
 import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../../index';
+
 export default {
   title: 'Design System/Web Components/Feedback/Tooltip/TooltipBubble',
   argTypes: {

packages/ui-library/src/components/forms/checkbox/index.stories.ts

@@ -6,6 +6,9 @@ import { InputSizes } from '../../../globals/constants';
 import { PureIconKeys } from '@boiler/icons';
 import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 // Shared Style inside the Stories
 const sharedStyles = html`
   <style>

packages/ui-library/src/components/forms/number-input/index.stories.ts

@@ -7,6 +7,9 @@ import { PureIconKeys } from '@boiler/icons/icons-optimized';
 import { html } from 'lit-html';
 import { action } from '@storybook/addon-actions';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 const sharedStyles = html`
   <style>
     .wrapper {

packages/ui-library/src/components/forms/radio/radio-input-group/index.stories.ts

@@ -5,6 +5,9 @@ import { getIconName } from '../../../../utils/get-icon-name';
 import { IconKeys } from '@boiler/icons';
 import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../../index';
+
 export default {
   title: 'Design System/Web Components/Forms/RadioGroup',
   argTypes: {

packages/ui-library/src/components/forms/radio/radio-input/index.stories.ts

@@ -6,6 +6,9 @@ import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 import { html } from 'lit-html';
 import { action } from '@storybook/addon-actions';
 
+// this loads the all components instances and registers their html tags
+import '../../../../index';
+
 const sharedStyles = html`
   <style>
     .wrapper {

packages/ui-library/src/components/forms/select/index.stories.ts

@@ -6,6 +6,9 @@ import { FormSizes } from '../../../globals/constants';
 import { PureIconKeys } from '@boiler/icons';
 import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 // Shared Style inside the Stories
 const sharedStyles = html`
   <style>

packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.stories.ts

@@ -5,6 +5,9 @@ import { Sizes } from '../../../../../globals/constants';
 import { PureIconKeys } from '@boiler/icons';
 import { Themes } from '../../../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../../../index';
+
 export default {
   title: 'Design System/Web Components/Forms/Slider/SliderSingleValue',
   argTypes: {

packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.stories.ts

@@ -6,6 +6,9 @@ import { Sizes } from '../../../../../globals/constants';
 import { PureIconKeys } from '@boiler/icons';
 import { Themes } from '../../../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../../../index';
+
 export default {
   title: 'Design System/Web Components/Forms/Slider/SliderSingleValue',
   argTypes: {

packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/index.stories.ts

@@ -5,6 +5,9 @@ import { Sizes } from '../../../../../globals/constants';
 import { PureIconKeys } from '@boiler/icons';
 import { Themes } from '../../../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../../../index';
+
 export default {
   title: 'Design System/Web Components/Forms/Slider/SliderTwoValues',
   argTypes: {

packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.stories.ts

@@ -5,6 +5,9 @@ import { Sizes } from '../../../../../globals/constants';
 import { PureIconKeys } from '@boiler/icons';
 import { Themes } from '../../../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../../../index';
+
 export default {
   title: 'Design System/Web Components/Forms/Slider/SliderTwoValues',
   argTypes: {

packages/ui-library/src/components/forms/text-input/index.stories.ts

@@ -7,6 +7,9 @@ import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 import { action } from '@storybook/addon-actions';
 import { html } from 'lit-html';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 // Shared Style inside the Stories
 const sharedStyles = html`
   <style>

packages/ui-library/src/components/forms/textarea/index.stories.ts

@@ -7,6 +7,9 @@ import { action } from '@storybook/addon-actions';
 import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 import { PureIconKeys } from '@boiler/icons';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 // Shared Style inside the Stories
 const sharedStyles = html`
   <style>

packages/ui-library/src/components/forms/toggle-switch/index.stories.ts

@@ -5,6 +5,9 @@ import { PureIconKeys } from '@boiler/icons';
 import { FormSizes, IconPositionVariant } from '../../../globals/constants';
 import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 export default {
   title: 'Design System/Web Components/Forms/ToggleSwitch',
   argTypes: {

packages/ui-library/src/components/internal-components/counter/index.stories.ts

@@ -5,6 +5,9 @@ import { html } from 'lit-html';
 import { BlrCounterType } from './index';
 import { BlrCounterRenderFunction } from './renderFunction';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 // Shared Style inside the Stories
 const sharedStyles = html`
   <style>

packages/ui-library/src/components/internal-components/form-caption-group/form-caption/index.stories.ts

@@ -5,6 +5,9 @@ import { BlrFormCaptionType } from './index';
 import { BlrFormCaptionRenderFunction } from './renderFunction';
 import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../../index';
+
 export default {
   title: 'Design System/Web Components/Internal Components/FormCaptionGroup/FormCaption',
   argTypes: {

packages/ui-library/src/components/internal-components/form-caption-group/index.stories.ts

@@ -4,6 +4,9 @@ import { html } from 'lit-html';
 import { BlrFormCaptionRenderFunction } from './form-caption/renderFunction';
 import { FormSizes } from '../../../globals/constants';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 export default {
   title: 'Design System/Web Components/Internal Components/FormCaptionGroup',
   argTypes: {

packages/ui-library/src/components/internal-components/form-label/index.stories.ts

@@ -5,6 +5,9 @@ import { BlrFormLabelType } from './index';
 import { BlrFormLabelRenderFunction } from './renderFunction';
 import { html } from 'lit-html';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 const sharedStyles = html`
   <style>
     .stories-form-label {

packages/ui-library/src/components/navigation/tab-bar/index.stories.ts

@@ -11,6 +11,9 @@ import {
 } from '../../../globals/constants';
 import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 export default {
   title: 'Design System/Web Components/Navigation/TabBar',
   argTypes: {

packages/ui-library/src/components/ui/button-group/index.stories.ts

@@ -1,11 +1,14 @@
 /* eslint-disable no-console */
 import { BlrButtonGroupType } from './index';
-import { BlrButtonGroupFunction } from './renderFunction';
+import { BlrButtonGroupRenderFunction } from './renderFunction';
 import { BlrTextButtonRenderFunction } from '../../actions/buttons/text-button/renderFunction';
 import { BlrIconButtonRenderFunction } from '../../actions/buttons/icon-button/renderFunction';
 import { html } from 'lit';
 import { ButtonGroupAlignmentVariants, ButtonGroupSizes } from '../../../globals/constants';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 export default {
   title: 'Design System/Web Components/UI/Button Group',
   argTypes: {
@@ -72,8 +75,8 @@ const contentTextButtons = html`
 `;
 
 export const BlrButtonGroup = (params: BlrButtonGroupType) => html`
-  Text-Buttons ${BlrButtonGroupFunction(params, contentTextButtons)} Icon-Buttons
-  ${BlrButtonGroupFunction(params, contentIconButtons)}
+  Text-Buttons ${BlrButtonGroupRenderFunction(params, contentTextButtons)} Icon-Buttons
+  ${BlrButtonGroupRenderFunction(params, contentIconButtons)}
 `;
 
 BlrButtonGroup.storyName = 'BlrButtonGroup';

packages/ui-library/src/components/ui/divider/index.stories.ts

@@ -4,6 +4,9 @@ import { BlrDividerRenderFunction } from './renderFunction';
 import { DividerVariations } from '../../../globals/constants';
 import { Themes } from '../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 export default {
   title: 'Design System/Web Components/UI/Divider',
   argTypes: {

packages/ui-library/src/components/ui/icon/icon-link/index.stories.ts

@@ -5,6 +5,9 @@ import { PureIconKeys } from '@boiler/icons';
 import { ActionVariants, ActionSizes } from '../../../../globals/constants';
 import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 
+// this loads the all components instances and registers their html tags
+import '../../../../index';
+
 export default {
   title: 'Design System/Web Components/UI/Icon',
   argTypes: {

packages/ui-library/src/components/ui/icon/index.stories.ts

@@ -10,6 +10,9 @@ import { calculateIconName } from '../../../utils/calculate-icon-name';
 import { classMap } from 'lit/directives/class-map.js';
 import { SizesType } from '../../../globals/types';
 
+// this loads the all components instances and registers their html tags
+import '../../../index';
+
 export default {
   title: 'Design System/Web Components/UI/Icon',
   argTypes: {