@dative-gpi/foundation-shared-components 1.0.16 → 1.0.18

package/components/FSButton.vue

@@ -2,11 +2,9 @@
   <FSClickable
     v-if="$props.variant !== 'icon'"
     :editable="$props.editable"
-    :padding="$props.padding"
+    :padding="padding"
     :variant="$props.variant"
-    :height="$props.height"
     :color="$props.color"
-    :width="$props.width"
     :load="$props.load"
     :href="$props.href"
     :to="$props.to"
@@ -15,7 +13,7 @@
     v-bind="$attrs"
   >
     <FSRow
-      v-if="$props.axis === 'horizontal'"
+      v-if="$props.direction === 'row'"
       align="center-center"
       width="fill"
       :wrap="false"
@@ -166,7 +164,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue, useSlots } from "vue";
 import { type RouteLocation } from "vue-router";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -178,6 +176,12 @@ import FSIcon from "./FSIcon.vue";
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
+const PADDING_ICON_ONLY = "7px";
+const PADDING_LABEL_ONLY = ["9px 16px", "9px 12px"];
+const PADDING_ICON_LABEL = ["7px 16px", "7px 12px"];
+
+const DEFAULT_PADDING = PADDING_ICON_LABEL;
+
 export default defineComponent({
   name: "FSButton",
   components: {
@@ -188,20 +192,10 @@ export default defineComponent({
     FSRow
   },
   props: {
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: () => ["40px", "36px"]
-    },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "fit-content"
-    },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
       required: false,
-      default: "0 16px"
+      default: DEFAULT_PADDING
     },
     to: {
       type: [String, Object] as PropType<string | RouteLocation | null>,
@@ -236,17 +230,17 @@ export default defineComponent({
     iconSize: {
       type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
       required: false,
-      default: "l"
+      default: () => ["24", "20"]
     },
     variant: {
       type: String as PropType<"standard" | "full" | "icon">,
       required: false,
       default: "standard"
     },
-    axis: {
-      type: String as PropType<"horizontal" | "vertical">,
+    direction: {
+      type: String as PropType<"row" | "column">,
       required: false,
-      default: "horizontal"
+      default: "row"
     },
     color: {
       type: String as PropType<ColorBase>,
@@ -271,6 +265,7 @@ export default defineComponent({
     const colors = computed(() => getColors(props.color));
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
+    const slots = useSlots();
 
     const style = computed((): StyleValue => {
       if (!props.editable) {
@@ -314,6 +309,27 @@ export default defineComponent({
       }
     });
 
+    const padding = computed(() => {
+      if(props.padding !== DEFAULT_PADDING){
+        return props.padding;
+      }
+
+      const hasIcon = props.prependIcon || props.appendIcon || props.icon
+        || !!slots.prepend || !!slots.append;
+      
+      const hasLabel = props.label || !!slots.default;
+
+      if(!hasLabel && hasIcon){
+        return PADDING_ICON_ONLY;
+      }
+      else if(hasLabel && !hasIcon)
+      {
+        return PADDING_LABEL_ONLY;
+      }
+
+      return DEFAULT_PADDING;
+    })
+
     const onClick = (event: MouseEvent) => {
       if (!props.to && !props.href && props.editable && !props.load) {
         emit("click", event);
@@ -325,6 +341,7 @@ export default defineComponent({
       loadColor,
       colors,
       style,
+      padding,
       onClick
     };
   }

package/components/FSEditImage.vue

@@ -1,298 +1,53 @@
 <template>
-  <FSCol
-    gap="8px"
-  >
-    <slot
-      v-if="!$props.hideHeader"
-      name="label"
-    >
-      <FSRow
-        :wrap="false"
-      >
-        <FSSpan
-          v-if="$props.label"
-          class="fs-edit-image-label"
-          font="text-overline"
-          :style="style"
-        >
-          {{ $props.label }}
-        </FSSpan>
-        <FSSpan
-          v-if="$props.label && $props.required"
-          class="fs-edit-image-label"
-          style="margin-left: -8px;"
-          font="text-overline"
-          :ellipsis="false"
-          :style="style"
-        >
-          *
-        </FSSpan>
-      </FSRow>
-    </slot>
-    <FSCard
-      v-if="['standard'].includes($props.variant)"
-      padding="12px"
-      width="100%"
-    >
-      <FSRow
-        align="center-left"
-        :wrap="false"
-      >
-        <FSRow
-          gap="24px"
-          :wrap="false"
-        >
-          <FSImage
-            v-if="$props.imageId || $props.modelValue"
-            :aspectRatio="$props.aspectRatio"
-            :height="$props.height"
-            :width="$props.width"
-            :imageId="$props.imageId"
-            :imageB64="$props.modelValue"
-          />
-          <FSCard
-            v-else
-            borderStyle="dashed"
-            :aspectRatio="$props.aspectRatio"
-            :height="$props.height"
-            :width="$props.width"
-          />
-          <FSCol
-            align="center-left"
-            height="fill"
-            width="hug"
-            gap="10px"
-          >
-            <FSText
-              v-if="fileSelected && fileSelected.fileName"
-              font="text-body"
-              :lineClamp="2"
-            >
-              {{ fileSelected.fileName }}
-            </FSText>
-            <FSCol
-              gap="0px"
-            >
-              <FSText
-                class="fs-edit-image-overline"
-                font="text-overline"
-                :style="style"
-              >
-                {{ $tr('ui.edit-image.format', 'PNG or JPG format') }}
-              </FSText>
-              <FSText
-                class="fs-edit-image-overline"
-                font="text-overline"
-                :style="style"
-              >
-                {{ $tr('ui.edit-image.size', '10 MB Maximum') }}
-              </FSText>
-            </FSCol>
-          </FSCol>
-        </FSRow>
-        <v-spacer />
-        <FSRow
-          width="hug"
-        >
-          <FSButtonFileMini
-            accept="image/*"
-            :readFile="false"
-            @update:metadata="onUpload"
-          />
-          <FSButtonRemoveMini
-            @click="onRemove"
-          />
-        </FSRow>
-      </FSRow>
-    </FSCard>
-    <FSRow
-      v-else-if="$props.imageId || $props.modelValue"
-      :width="$props.width"
-      class="fs-edit-image-full"
-    >
-      <FSImage
-        :aspectRatio="$props.aspectRatio"
-        :height="$props.height"
-        :width="$props.width"
-        :imageId="$props.imageId"
-        :imageB64="$props.modelValue"
-      />
-      <FSRow
-        class="fs-edit-image-full-toolbar"
-        padding="4px"
-      >
-        <FSButtonFileMini
-          accept="image/*"
-          :readFile="false"
-          @update:metadata="onUpload"
-        />
-        <FSButtonRemoveMini
-          @click="onRemove"
-        />
-      </FSRow>
-    </FSRow>
-    <FSClickable
-      v-else
-      borderStyle="dashed"
-      variant="background"
-      :height="$props.height"
-      :width="$props.width"
-      @click="() => invisibleButtonRef.input.click()"
-    >
-      <FSRow
-        align="center-center"
-        :wrap="false"
-      >
-        <FSIcon>
-          mdi-plus-box-outline
-        </FSIcon>
-        <FSText
-          font="text-body"
-          :lineClamp="2"
-        >
-          {{ $tr('ui.edit-image.add-image', 'Add an image.') }}
-        </FSText>
-        <FSButtonFileMini
-          class="fs-edit-image-hidden-button"
-          ref="invisibleButtonRef"
-          accept="image/*"
-          :readFile="false"
-          @update:metadata="onUpload"
-        />
-      </FSRow>
-    </FSClickable>
-  </FSCol>
+  <FSEditImageUI
+    :source="source"
+    :blurHash="image"
+    @error="onError"
+    @update:source="$emit('update:imageId', $event)"
+    v-bind="$attrs"
+  />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { ColorEnum, type FileImage } from "@dative-gpi/foundation-shared-components/models";
-import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
+import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config";
 
-import FSButtonRemoveMini from "./buttons/FSButtonRemoveMini.vue";
-import FSButtonFileMini from "./buttons/FSButtonFileMini.vue";
-import FSClickable from "./FSClickable.vue";
-import FSImage from "./FSImage.vue";
-import FSCard from "./FSCard.vue";
-import FSText from "./FSText.vue";
-import FSCol from "./FSCol.vue";
-import FSRow from "./FSRow.vue";
+import { useImage } from "@dative-gpi/foundation-shared-services/composables";
+
+import FSEditImageUI from "./FSEditImageUI.vue";
 
 export default defineComponent({
   name: "FSEditImage",
   components: {
-    FSButtonRemoveMini,
-    FSButtonFileMini,
-    FSClickable,
-    FSImage,
-    FSCard,
-    FSText,
-    FSCol,
-    FSRow
+    FSEditImageUI
   },
   props: {
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: null
-    },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: null
-    },
-    label: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     imageId: {
       type: String as PropType<string | null>,
       required: false,
       default: null
-    },
-    aspectRatio: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    modelValue: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
-    variant: {
-      type: String as PropType<"standard" | "full">,
-      required: false,
-      default: "standard"
-    },
-    hideHeader: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false
     }
   },
-  emits: ["update:modelValue", "update:imageId"],
-  setup(props, { emit }) {
-    const { isExtraSmall } = useBreakpoints();
-    const { getColors } = useColors();
-    const { readFile } = useFiles();
-
-    const fileSelected = ref<FileImage>({ fileName: "", fileContent: null });
-    const invisibleButtonRef = ref<HTMLFormElement | null>(null);
-
-    const errors = getColors(ColorEnum.Error);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
-
-    const style = computed((): StyleValue => ({
-      "--fs-edit-image-overline-text-color": lights.dark,
-      "--fs-edit-image-color"              : darks.base,
-      "--fs-edit-image-error-color"        : errors.base
-    }));
-
-    const onUpload = async (payload: File) => {
-      const content = (await readFile(payload)) as string;
-      fileSelected.value.fileName = payload.name;
-      fileSelected.value.fileContent = content;
-      emit("update:modelValue", content.substring(content.indexOf(',') + 1));
+  emits: ["update:imageId"],
+  setup(props) {
+    const { get: getImage, entity: image } = useImage();
+    
+    const source = computed(() => {
+      return props.imageId ? IMAGE_RAW_URL(props.imageId) : null;
+    })
+
+    const onError = (): void => {
       if (props.imageId) {
-        emit("update:imageId", null);
+        console.log("onError");
+        getImage(props.imageId);
       }
     };
 
-    const onRemove = () => {
-      fileSelected.value.fileName = "";
-      fileSelected.value.fileContent = null;
-      if (props.modelValue) {
-        emit("update:modelValue", null);
-      }
-      else {
-        emit("update:imageId", null);
-      }
-    };
-
-    watch(() => props.modelValue, () => {
-      if (!props.modelValue) {
-        fileSelected.value.fileName = "";
-        fileSelected.value.fileContent = null;
-      }
-    });
-
     return {
-      invisibleButtonRef,
-      fileSelected,
-      isExtraSmall,
-      style,
-      onUpload,
-      onRemove
+      image,
+      source,
+      onError
     };
   }
 });

package/components/FSEditImageUI.vue

@@ -0,0 +1,301 @@
+<template>
+  <FSCol
+    gap="8px"
+  >
+    <slot
+      v-if="!$props.hideHeader"
+      name="label"
+    >
+      <FSRow
+        :wrap="false"
+      >
+        <FSSpan
+          v-if="$props.label"
+          class="fs-edit-image-label"
+          font="text-overline"
+          :style="style"
+        >
+          {{ $props.label }}
+        </FSSpan>
+        <FSSpan
+          v-if="$props.label && $props.required"
+          class="fs-edit-image-label"
+          style="margin-left: -8px;"
+          font="text-overline"
+          :ellipsis="false"
+          :style="style"
+        >
+          *
+        </FSSpan>
+      </FSRow>
+    </slot>
+    <FSCard
+      v-if="['standard'].includes($props.variant)"
+      padding="12px"
+      width="100%"
+    >
+      <FSRow
+        align="center-left"
+        :wrap="false"
+      >
+        <FSRow
+          gap="24px"
+          :wrap="false"
+        >
+          <FSImageUI
+            v-if="$props.source || $props.modelValue"
+            :aspectRatio="$props.aspectRatio"
+            :height="$props.height"
+            :width="$props.width"
+            :source="$props.source"
+            :imageB64="$props.modelValue"
+            v-bind="$attrs"
+          />
+          <FSCard
+            v-else
+            borderStyle="dashed"
+            :aspectRatio="$props.aspectRatio"
+            :height="$props.height"
+            :width="$props.width"
+          />
+          <FSCol
+            align="center-left"
+            height="fill"
+            width="hug"
+            gap="10px"
+          >
+            <FSText
+              v-if="fileSelected && fileSelected.fileName"
+              font="text-body"
+              :lineClamp="2"
+            >
+              {{ fileSelected.fileName }}
+            </FSText>
+            <FSCol
+              gap="0px"
+            >
+              <FSText
+                class="fs-edit-image-overline"
+                font="text-overline"
+                :style="style"
+              >
+                {{ $tr('ui.edit-image.format', 'PNG or JPG format') }}
+              </FSText>
+              <FSText
+                class="fs-edit-image-overline"
+                font="text-overline"
+                :style="style"
+              >
+                {{ $tr('ui.edit-image.size', '10 MB Maximum') }}
+              </FSText>
+            </FSCol>
+          </FSCol>
+        </FSRow>
+        <v-spacer />
+        <FSRow
+          width="hug"
+        >
+          <FSButtonFileMini
+            accept="image/*"
+            :readFile="false"
+            @update:metadata="onUpload"
+          />
+          <FSButtonRemoveMini
+            @click="onRemove"
+          />
+        </FSRow>
+      </FSRow>
+    </FSCard>
+    <FSRow
+      v-else-if="$props.source || $props.modelValue"
+      :width="$props.width"
+      class="fs-edit-image-full"
+    >
+      <FSImageUI
+        :aspectRatio="$props.aspectRatio"
+        :height="$props.height"
+        :width="$props.width"
+        :source="$props.source"
+        :imageB64="$props.modelValue"
+        v-bind="$attrs"
+      />
+      <FSRow
+        class="fs-edit-image-full-toolbar"
+        padding="4px"
+      >
+        <FSButtonFileMini
+          accept="image/*"
+          :readFile="false"
+          @update:metadata="onUpload"
+        />
+        <FSButtonRemoveMini
+          @click="onRemove"
+        />
+      </FSRow>
+    </FSRow>
+    <FSClickable
+      v-else
+      borderStyle="dashed"
+      variant="background"
+      :height="$props.height"
+      :width="$props.width"
+      @click="() => invisibleButtonRef.input.click()"
+    >
+      <FSRow
+        align="center-center"
+        :wrap="false"
+      >
+        <FSIcon>
+          mdi-plus-box-outline
+        </FSIcon>
+        <FSText
+          font="text-body"
+          :lineClamp="2"
+        >
+          {{ $tr('ui.edit-image.add-image', 'Add an image.') }}
+        </FSText>
+        <FSButtonFileMini
+          class="fs-edit-image-hidden-button"
+          ref="invisibleButtonRef"
+          accept="image/*"
+          :readFile="false"
+          @update:metadata="onUpload"
+        />
+      </FSRow>
+    </FSClickable>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
+
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum, type FileImage } from "@dative-gpi/foundation-shared-components/models";
+import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
+
+import FSButtonRemoveMini from "./buttons/FSButtonRemoveMini.vue";
+import FSButtonFileMini from "./buttons/FSButtonFileMini.vue";
+import FSClickable from "./FSClickable.vue";
+import FSImageUI from "./FSImageUI.vue";
+import FSCard from "./FSCard.vue";
+import FSText from "./FSText.vue";
+import FSCol from "./FSCol.vue";
+import FSRow from "./FSRow.vue";
+
+export default defineComponent({
+  name: "FSEditImageUI",
+  components: {
+    FSButtonRemoveMini,
+    FSButtonFileMini,
+    FSClickable,
+    FSImageUI,
+    FSCard,
+    FSText,
+    FSCol,
+    FSRow
+  },
+  props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: null
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    source: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    aspectRatio: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    variant: {
+      type: String as PropType<"standard" | "full">,
+      required: false,
+      default: "standard"
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "update:source"],
+  setup(props, { emit }) {
+    const { isExtraSmall } = useBreakpoints();
+    const { getColors } = useColors();
+    const { readFile } = useFiles();
+
+    const fileSelected = ref<FileImage>({ fileName: "", fileContent: null });
+    const invisibleButtonRef = ref<HTMLFormElement | null>(null);
+
+    const errors = getColors(ColorEnum.Error);
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): StyleValue => ({
+      "--fs-edit-image-overline-text-color": lights.dark,
+      "--fs-edit-image-color"              : darks.base,
+      "--fs-edit-image-error-color"        : errors.base
+    }));
+
+    const onUpload = async (payload: File) => {
+      const content = (await readFile(payload)) as string;
+      fileSelected.value.fileName = payload.name;
+      fileSelected.value.fileContent = content;
+      emit("update:modelValue", content.substring(content.indexOf(',') + 1));
+      if (props.source) {
+        emit("update:source", null);
+      }
+    };
+
+    const onRemove = () => {
+      fileSelected.value.fileName = "";
+      fileSelected.value.fileContent = null;
+      if (props.modelValue) {
+        emit("update:modelValue", null);
+      }
+      else {
+        emit("update:source", null);
+      }
+    };
+
+    watch(() => props.modelValue, () => {
+      if (!props.modelValue) {
+        fileSelected.value.fileName = "";
+        fileSelected.value.fileContent = null;
+      }
+    });
+
+    return {
+      invisibleButtonRef,
+      fileSelected,
+      isExtraSmall,
+      style,
+      onUpload,
+      onRemove
+    };
+  }
+});
+</script>

package/components/FSImage.vue

@@ -1,6 +1,6 @@
 <template>
   <FSImageUI
-    :blurhash="image"
+    :blurHash="image"
     :source="source"
     @error="onError"
     v-bind="$attrs"

package/components/buttons/FSButtonAddMini.vue

@@ -1,7 +1,6 @@
 <template>
   <FSButton
     prependIcon="mdi-plus-circle-outline"
-    padding="0 7px"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonCancelMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-cancel"
-    padding="0 7px"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonDuplicateMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-content-copy"
-    padding="0 7px"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonEditMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-pencil-outline"
-    padding="0 7px"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonFileMini.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <FSButton
-      padding="0 7px"
+      
       :prependIcon="$props.icon"
       :color="ColorEnum.Light"
       @click="onClick"

package/components/buttons/FSButtonNextMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-chevron-right"
-    padding="0 7px"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonPreviousMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-chevron-left"
-    padding="0 7px"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonRedoMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-redo-variant"
-    padding="0 7px"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonRemoveMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-delete-outline"
-    padding="0 7px"
+    
     :color="ColorEnum.Error"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonSaveMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-content-save-outline"
-    padding="0 7px"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonSearchMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-magnify"
-    padding="0 7px"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonUndoMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-undo-variant"
-    padding="0 7px"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonUpdateMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-pencil-outline"
-    padding="0 7px"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonValidateMini.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-check"
-    padding="0 7px"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/fields/FSTranslateRichTextField.vue

@@ -41,16 +41,16 @@
     >
       <FSButton
         prependIcon="mdi-cancel"
+        width="100%"
         :label="$tr('ui.translateRichTextField.cancelButton.label', 'Cancel')"
-        :fullWidth="true"
         @click="onCancelTranslations"
       />
       <FSButton
         v-if="$props.editable"
         prependIcon="mdi-check"
         color="primary"
+        width="100%"
         :label="$tr('ui.translateRichTextField.validateButton.label', 'Validate translations')"
-        :fullWidth="true"
         @click="onSubmitTranslations"
       />
     </FSRow>
@@ -68,8 +68,8 @@
       <FSButton
         prependIcon="mdi-translate"
         color="primary"
+        width="100%"
         :label="$tr('ui.translateRichTextField.translateButton.label', 'Manage translations')"
-        :fullWidth="true"
         @click="() => $emit('update:translationsExpanded', true)"
       />
     </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.16",
-    "@dative-gpi/foundation-shared-services": "1.0.16"
+    "@dative-gpi/foundation-shared-domain": "1.0.18",
+    "@dative-gpi/foundation-shared-services": "1.0.18"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^0.0.75",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "ed54fe2f03db8e7af8bbf5fcc585a2b4cd52f52e"
+  "gitHead": "8e464715fcb19efb4752474ffcded0508d44da53"
 }

package/styles/globals/text_fonts.scss

@@ -10,13 +10,13 @@
     @include web {
         font-size: 36px !important;
         line-height: 40px !important;
-        letter-spacing: -0.72px !important;
+        letter-spacing: -2% !important;
     }
 
     @include mobile {
-        font-size: 29px !important;
+        font-size: 28px !important;
         line-height: 32px !important;
-        letter-spacing: -1.45px !important;
+        letter-spacing: -5% !important;
     }
 }
 
@@ -26,15 +26,15 @@
     font-weight: 600 !important;
 
     @include web {
-        font-size: 27px !important;
+        font-size: 26px !important;
         line-height: 32px !important;
-        letter-spacing: -0.81px !important;
+        letter-spacing: -3% !important;
     }
 
     @include mobile {
         font-size: 22px !important;
         line-height: 24px !important;
-        letter-spacing: -0.88px !important;
+        letter-spacing: -4% !important;
     }
 }
 
@@ -44,33 +44,15 @@
     font-weight: 600 !important;
 
     @include web {
-        font-size: 21px !important;
+        font-size: 20px !important;
         line-height: 24px !important;
-        letter-spacing: -0.63px !important;
+        letter-spacing: -3% !important;
     }
 
     @include mobile {
-        font-size: 17px !important;
-        line-height: 20px !important;
-        letter-spacing: -0.51px !important;
-    }
-}
-
-.text-h4 {
-    font-family: 'Montserrat', sans-serif !important;
-    font-style: normal !important;
-    font-weight: 500 !important;
-
-    @include web {
         font-size: 16px !important;
         line-height: 20px !important;
-        letter-spacing: -0.48px !important;
-    }
-
-    @include mobile {
-        font-size: 14px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.41px !important;
+        letter-spacing: -3% !important;
     }
 }
 
@@ -82,14 +64,14 @@
 
     @include web {
         font-size: 14px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.48px !important;
+        line-height: 20px !important;
+        letter-spacing: -3% !important;
     }
 
     @include mobile {
         font-size: 12px !important;
-        line-height: 14px !important;
-        letter-spacing: -0.39px !important;
+        line-height: 16px !important;
+        letter-spacing: -3% !important;
     }
 }
 
@@ -101,14 +83,14 @@
 
     @include web {
         font-size: 14px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.48px !important;
+        line-height: 20px !important;
+        letter-spacing: -3% !important;
     }
 
     @include mobile {
         font-size: 12px !important;
-        line-height: 14px !important;
-        letter-spacing: -0.39px !important;
+        line-height: 16px !important;
+        letter-spacing: -3% !important;
     }
 }
 
@@ -121,14 +103,14 @@
         font-weight: 600 !important;
         font-size: 12px !important;
         line-height: 16px !important;
-        letter-spacing: 0.08px !important;
+        letter-spacing: 0 !important;
     }
 
     @include mobile {
         font-weight: 500 !important;
         font-size: 10px !important;
         line-height: 16px !important;
-        letter-spacing: 0.19px !important;
+        letter-spacing: 0 !important;
     }
 }
 
@@ -141,12 +123,12 @@
     @include web {
         font-size: 12px !important;
         line-height: 16px !important;
-        letter-spacing: 0.08px !important;
+        letter-spacing: 0 !important;
     }
 
     @include mobile {
         font-size: 10px !important;
         line-height: 16px !important;
-        letter-spacing: 0.19px !important;
+        letter-spacing: 0 !important;
     }
 }