add basics for essential componentsui-kit-essentials

4 files changed, 114 insertions, 0 deletions

diff --git a/packages/studip-ui/src/components/SuiButton/SuiButton.vue b/packages/studip-ui/src/components/SuiButton/SuiButton.vue
new file mode 100644
index 0000000..27d9c53
--- /dev/null
+++ b/packages/studip-ui/src/components/SuiButton/SuiButton.vue
@@ -0,0 +1,39 @@
+<template>
+    <button 
+    class="sui-btn" 
+    :class="variantClass"
+    :disabled="disabled"
+  >
+  <SuiIcon 
+      v-if="icon && !iconRight" 
+      :name="icon" 
+      aria-hidden="true"
+      class="sui-btn__icon"
+    />
+    
+    <span v-if="label" class="sui-button__label">
+      {{ label }}
+    </span>
+
+    <SuiIcon 
+      v-if="icon && iconRight" 
+      :name="icon" 
+      aria-hidden="true"
+      class="sui-btn__icon"
+    />
+  </button>
+</template>
+<script setup>
+import { computed } from 'vue';
+import SuiIcon from './../SuiIcon/SuiIcon.vue';
+
+const props = defineProps({
+    label: { type: String, default: '' },
+    icon: { type: String, default: null },
+    iconRight: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    variant: { type: String, default: 'primary' }
+});
+
+const variantClass = computed(() => `sui-btn--${props.variant}`);
+</script>
\ No newline at end of file
diff --git a/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.stories.js b/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.stories.js
new file mode 100644
index 0000000..56c1dbb
--- /dev/null
+++ b/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.stories.js
@@ -0,0 +1,45 @@
+// SuiButtonGroup.stories.js
+import SuiButtonGroup from './SuiButtonGroup.vue';
+import SuiButton from './../SuiButton/SuiButton.vue';
+
+const meta = {
+  title: 'Stud.IP UI Elements/ButtonGroup',
+  component: SuiButtonGroup,
+  tags: ['autodocs', 'since:6.3.0', 'new', 'alpha'],
+  subcomponents: { SuiButton },
+  parameters: {
+        docs: {
+            description: {
+                component: ''
+            },
+        },
+    },
+    argTypes: {}
+};
+
+
+
+export default meta;
+
+
+export const SlotValidationTest = {
+  args: {
+  },
+  render: (args) => ({
+    components: { SuiButtonGroup, SuiButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <SuiButtonGroup v-bind="args">
+        <SuiButton label="Button 1" />
+        <div style="background: red; padding: 10px; margin: 5px;">
+          Ich bin ein verbotenes DIV und sollte verschwinden!
+        </div>
+        <SuiButton label="Button 2"  />
+        <span>Ich bin ein verbotener Text und werde gefiltert.</span>
+        <SuiButton label="Button 3" disabled />
+      </SuiButtonGroup>
+    `,
+  }),
+};
\ No newline at end of file
diff --git a/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.vue b/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.vue
new file mode 100644
index 0000000..add111a
--- /dev/null
+++ b/packages/studip-ui/src/components/SuiButtonGroup/SuiButtonGroup.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="button-group">
+    <component 
+      v-for="(vnode, index) in validButtons" 
+      :is="vnode" 
+      :key="index" 
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue';
+import { useSlotFilter } from './../../composables/';
+
+const slots = useSlots();
+const { getValidChildren } = useSlotFilter(slots);
+
+const validButtons = computed(() => getValidChildren('SuiButton'));
+</script>
+
+<style scoped>
+.button-group {
+  display: flex;
+  gap: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/packages/studip-ui/src/components/index.js b/packages/studip-ui/src/components/index.js
index 2fdf184..992fdab 100644
--- a/packages/studip-ui/src/components/index.js
+++ b/packages/studip-ui/src/components/index.js
@@ -1,8 +1,12 @@
+import SuiButton from './SuiButton/SuiButton.vue';
+import SuiButtonGroup from './SuiButtonGroup/SuiButtonGroup.vue';
 import SuiChip from './SuiChip/SuiChip.vue';
 import SuiFormattedTime from './SuiFormattedTime/SuiFormattedTime.vue';
 import SuiIcon from './SuiIcon/SuiIcon.vue';
 
 export {
+    SuiButton,
+    SuiButtonGroup,
     SuiChip,
     SuiFormattedTime,
     SuiIcon,