@designcrowd/fe-shared-lib 1.5.8 → 1.5.9-dbc-1

package/src/atoms/components/CollapsiblePanel/CollapsiblePanel.vue

@@ -1,33 +1,33 @@
-<template>
-  <div
-    class="tw-bg-white tw-border tw-border-grayscale-500 tw-border-solid tw-flex tw-flex-col tw-mb-4 tw-p-4 tw-rounded-md"
-  >
-    <div
-      class="tw-cursor-pointer tw-text-secondary-500 tw-flex tw-items-center tw-select-none"
-      :class="{ 'tw-mb-2': !selfIsCollapsed }"
-      @click="toggleCollapsed()"
-    >
-      <div class="tw-grow">
-        <div class="tw-text-md tw-font-sans tw-font-bold tw-text-secondary-800">
-          {{ title }}
-        </div>
-        <div v-if="subtitle" class="tw-text-sm tw-text-grayscale-700 tw-my-1">{{ subtitle }}</div>
-      </div>
-      <div class="tw-bg-transparent tw-border-none tw-text-grayscale-600 tw-ml-2">
-        <Icon :name="selfIsCollapsed ? 'chevron-down' : 'chevron-up'" size="sm" />
-      </div>
-    </div>
-    <slot v-if="!selfIsCollapsed" />
-  </div>
-</template>
-<script>
-import Icon from '../Icon/Icon.vue';
-import CollapsibleMixin from './CollapsiblePanel.mixin';
-
-export default {
-  components: {
-    Icon,
-  },
-  mixins: [CollapsibleMixin],
-};
-</script>
+<template>
+  <div
+    class="tw-bg-white tw-border tw-border-grayscale-500 tw-border-solid tw-flex tw-flex-col tw-mb-4 tw-p-4 tw-rounded-md"
+  >
+    <div
+      class="tw-cursor-pointer tw-text-secondary-500 tw-flex tw-items-center tw-select-none"
+      :class="{ 'tw-mb-2': !selfIsCollapsed }"
+      @click="toggleCollapsed()"
+    >
+      <div class="tw-grow">
+        <div class="tw-text-md tw-font-sans tw-font-bold tw-text-secondary-800">
+          {{ title }}
+        </div>
+        <div v-if="subtitle" class="tw-text-sm tw-text-grayscale-700 tw-my-1">{{ subtitle }}</div>
+      </div>
+      <div class="tw-bg-transparent tw-border-none tw-text-grayscale-600 tw-ml-2">
+        <Icon :name="selfIsCollapsed ? 'chevron-down' : 'chevron-up'" size="sm" />
+      </div>
+    </div>
+    <slot v-if="!selfIsCollapsed" />
+  </div>
+</template>
+<script>
+import Icon from '../Icon/Icon.vue';
+import CollapsibleMixin from './CollapsiblePanel.mixin';
+
+export default {
+  components: {
+    Icon,
+  },
+  mixins: [CollapsibleMixin],
+};
+</script>

package/src/atoms/components/ColorPicker/ColorPicker.stories.js

@@ -1,89 +1,89 @@
-import ColorPicker from './ColorPicker.vue';
-
-export default {
-  title: 'Components/Color Picker',
-  component: ColorPicker,
-};
-
-const data = {
-  components: {
-    ColorPicker,
-  },
-  data() {
-    return {
-      value: '#ff0000',
-    };
-  },
-};
-
-export const Sample = () => {
-  return {
-    ...data,
-    template: `
-      <ColorPicker v-model="value" />
-    `,
-  };
-};
-
-export const SampleColorOnly = () => {
-  return {
-    ...data,
-    template: `
-      <ColorPicker v-model="value" mode="color-only" />
-    `,
-  };
-};
-
-export const Label = () => {
-  return {
-    ...data,
-    template: `
-      <ColorPicker v-model="value" label="Your Name" />
-    `,
-  };
-};
-
-export const LabelRequired = () => {
-  return {
-    ...data,
-    template: `
-      <ColorPicker v-model="value" label="Your Name" :required="true" />
-    `,
-  };
-};
-
-export const Warning = () => {
-  return {
-    ...data,
-    template: `
-      <ColorPicker v-model="value" :warning="true" />
-    `,
-  };
-};
-
-export const Error = () => {
-  return {
-    ...data,
-    template: `
-      <ColorPicker v-model="value" :error="true" />
-    `,
-  };
-};
-
-export const Success = () => {
-  return {
-    ...data,
-    template: `
-      <ColorPicker v-model="value" :success="true" />
-    `,
-  };
-};
-
-export const Disabled = () => {
-  return {
-    ...data,
-    template: `
-      <ColorPicker v-model="value" :disabled="true" />
-    `,
-  };
-};
+import ColorPicker from './ColorPicker.vue';
+
+export default {
+  title: 'Components/Color Picker',
+  component: ColorPicker,
+};
+
+const data = {
+  components: {
+    ColorPicker,
+  },
+  data() {
+    return {
+      value: '#ff0000',
+    };
+  },
+};
+
+export const Sample = () => {
+  return {
+    ...data,
+    template: `
+      <ColorPicker v-model="value" />
+    `,
+  };
+};
+
+export const SampleColorOnly = () => {
+  return {
+    ...data,
+    template: `
+      <ColorPicker v-model="value" mode="color-only" />
+    `,
+  };
+};
+
+export const Label = () => {
+  return {
+    ...data,
+    template: `
+      <ColorPicker v-model="value" label="Your Name" />
+    `,
+  };
+};
+
+export const LabelRequired = () => {
+  return {
+    ...data,
+    template: `
+      <ColorPicker v-model="value" label="Your Name" :required="true" />
+    `,
+  };
+};
+
+export const Warning = () => {
+  return {
+    ...data,
+    template: `
+      <ColorPicker v-model="value" :warning="true" />
+    `,
+  };
+};
+
+export const Error = () => {
+  return {
+    ...data,
+    template: `
+      <ColorPicker v-model="value" :error="true" />
+    `,
+  };
+};
+
+export const Success = () => {
+  return {
+    ...data,
+    template: `
+      <ColorPicker v-model="value" :success="true" />
+    `,
+  };
+};
+
+export const Disabled = () => {
+  return {
+    ...data,
+    template: `
+      <ColorPicker v-model="value" :disabled="true" />
+    `,
+  };
+};

package/src/atoms/components/ColorPicker/ColorPicker.vue

@@ -1,95 +1,95 @@
-<template>
-  <div
-    class="tw-box-border"
-    :class="{
-      'tw-w-32': mode === 'color-and-text',
-      'tw-w-10': mode === 'color-only',
-    }"
-  >
-    <label
-      v-if="label"
-      :for="`scl-input-${id}`"
-      class="tw-font-sans tw-text-grayscale-600 tw-text-sm tw-mb-2 tw-block tw-font-semibold"
-      :class="{
-        'tw-sr-only': showLabelScreenReaderOnly,
-      }"
-    >
-      {{ label }}
-      <span v-if="required" class="tw-text-error-500">*</span>
-    </label>
-    <div
-      :class="{
-        'tw-opacity-50': disabled,
-      }"
-      class="tw-cursor-pointer tw-flex tw-overflow-hidden tw-h-10 tw-items-center tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-rounded tw-border tw-border-solid tw-border-grayscale-500"
-    >
-      <div
-        :style="{ backgroundColor: color }"
-        class="tw-flex-none tw-h-full tw-w-10 tw-border-t-0 tw-border-l-0 tw-border-b-0 tw-border-r tw-border-solid tw-border-grayscale-500 tw-relative"
-      >
-        <input
-          :id="id ? `scl-input-${id}` : null"
-          ref="input"
-          :value="color"
-          type="color"
-          class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer"
-          :disabled="disabled"
-          @input.stop="onColorChange($event.target.value)"
-        />
-      </div>
-      <div v-if="mode === 'color-and-text'" class="tw-w-full tw-h-full">
-        <input
-          :value="color"
-          type="text"
-          :disabled="disabled"
-          maxlength="7"
-          minlength="4"
-          class="tw-w-full tw-h-full tw-px-3 tw-uppercase tw-border-0 tw-p-0 tw-font-sans focus:tw-outline-none"
-          :class="{
-            'tw-bg-error-100 tw-text-error-700 ': error,
-            'tw-bg-warning-100 tw-text-warning-700 ': warning,
-            'tw-bg-success-100 tw-text-success-700 ': success,
-            'tw-bg-white tw-text-secondary-500 ': !error && !warning && !success,
-          }"
-          @input.stop="onColorChange($event.target.value)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import FormControlMixin from '../FormControl/FormControl.mixin';
-
-export default {
-  mixins: [FormControlMixin],
-  props: {
-    modelValue: {
-      type: String,
-      required: true,
-    },
-    mode: {
-      type: String,
-      default: 'color-and-text', // color-and-text | color-only
-    },
-  },
-  data() {
-    return {
-      color: this.modelValue,
-    };
-  },
-  watch: {
-    color(modelValue) {
-      this.$emit('update:modelValue', modelValue);
-    },
-    value(modelValue) {
-      this.color = modelValue;
-    },
-  },
-  methods: {
-    onColorChange(value) {
-      this.color = value;
-      this.$emit('input', value);
-    },
-  },
-};
-</script>
+<template>
+  <div
+    class="tw-box-border"
+    :class="{
+      'tw-w-32': mode === 'color-and-text',
+      'tw-w-10': mode === 'color-only',
+    }"
+  >
+    <label
+      v-if="label"
+      :for="`scl-input-${id}`"
+      class="tw-font-sans tw-text-grayscale-600 tw-text-sm tw-mb-2 tw-block tw-font-semibold"
+      :class="{
+        'tw-sr-only': showLabelScreenReaderOnly,
+      }"
+    >
+      {{ label }}
+      <span v-if="required" class="tw-text-error-500">*</span>
+    </label>
+    <div
+      :class="{
+        'tw-opacity-50': disabled,
+      }"
+      class="tw-cursor-pointer tw-flex tw-overflow-hidden tw-h-10 tw-items-center tw-bg-white tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-rounded tw-border tw-border-solid tw-border-grayscale-500"
+    >
+      <div
+        :style="{ backgroundColor: color }"
+        class="tw-flex-none tw-h-full tw-w-10 tw-border-t-0 tw-border-l-0 tw-border-b-0 tw-border-r tw-border-solid tw-border-grayscale-500 tw-relative"
+      >
+        <input
+          :id="id ? `scl-input-${id}` : null"
+          ref="input"
+          :value="color"
+          type="color"
+          class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-opacity-0 tw-cursor-pointer"
+          :disabled="disabled"
+          @input.stop="onColorChange($event.target.value)"
+        />
+      </div>
+      <div v-if="mode === 'color-and-text'" class="tw-w-full tw-h-full">
+        <input
+          :value="color"
+          type="text"
+          :disabled="disabled"
+          maxlength="7"
+          minlength="4"
+          class="tw-w-full tw-h-full tw-px-3 tw-uppercase tw-border-0 tw-p-0 tw-font-sans focus:tw-outline-none"
+          :class="{
+            'tw-bg-error-100 tw-text-error-700 ': error,
+            'tw-bg-warning-100 tw-text-warning-700 ': warning,
+            'tw-bg-success-100 tw-text-success-700 ': success,
+            'tw-bg-white tw-text-secondary-500 ': !error && !warning && !success,
+          }"
+          @input.stop="onColorChange($event.target.value)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import FormControlMixin from '../FormControl/FormControl.mixin';
+
+export default {
+  mixins: [FormControlMixin],
+  props: {
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    mode: {
+      type: String,
+      default: 'color-and-text', // color-and-text | color-only
+    },
+  },
+  data() {
+    return {
+      color: this.modelValue,
+    };
+  },
+  watch: {
+    color(modelValue) {
+      this.$emit('update:modelValue', modelValue);
+    },
+    value(modelValue) {
+      this.color = modelValue;
+    },
+  },
+  methods: {
+    onColorChange(value) {
+      this.color = value;
+      this.$emit('input', value);
+    },
+  },
+};
+</script>

package/src/atoms/components/CopyToClipboardText/CopyToClipboardText.stories.js

@@ -1,41 +1,41 @@
-import CopyToClipboardText from './CopyToClipboardText.vue';
-
-export default {
-  title: 'Components/CopyToClipboardText',
-  component: CopyToClipboardText,
-};
-
-const data = {
-  components: {
-    CopyToClipboardText,
-  },
-};
-
-export const Sample = () => {
-  return {
-    ...data,
-    template: `
-      <CopyToClipboardText text="Copy me!"/>
-    `,
-  };
-};
-
-export const WithoutTooltip = () => {
-  return {
-    ...data,
-    template: `
-      <CopyToClipboardText text="Copy me!" :should-show-tooltip="false"/>
-    `,
-  };
-};
-
-export const Truncated = () => {
-  return {
-    ...data,
-    template: `
-      <div style="width: 200px; border: solid blue 1px">
-        <CopyToClipboardText text="This sentence is too large to fit" />
-      </div>
-    `,
-  };
-};
+import CopyToClipboardText from './CopyToClipboardText.vue';
+
+export default {
+  title: 'Components/CopyToClipboardText',
+  component: CopyToClipboardText,
+};
+
+const data = {
+  components: {
+    CopyToClipboardText,
+  },
+};
+
+export const Sample = () => {
+  return {
+    ...data,
+    template: `
+      <CopyToClipboardText text="Copy me!"/>
+    `,
+  };
+};
+
+export const WithoutTooltip = () => {
+  return {
+    ...data,
+    template: `
+      <CopyToClipboardText text="Copy me!" :should-show-tooltip="false"/>
+    `,
+  };
+};
+
+export const Truncated = () => {
+  return {
+    ...data,
+    template: `
+      <div style="width: 200px; border: solid blue 1px">
+        <CopyToClipboardText text="This sentence is too large to fit" />
+      </div>
+    `,
+  };
+};

package/src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue

@@ -1,71 +1,71 @@
-<template>
-  <div class="tw-flex tw-w-full tw-items-center tw-gap-2">
-    <p class="tw-overflow-x-hidden tw-truncate" :title="text">
-      {{ text }}
-    </p>
-    <Tooltip
-      class="tw-items-center"
-      direction="top"
-      alignment="center"
-      color="grayscale-700"
-      :should-show-icon="false"
-      :should-show-tooltip="shouldShowTooltip && internalTooltipText"
-      full-width
-      is-rounded-corner
-    >
-      <template #open>
-        <Icon
-          name="duplicate"
-          alt="Duplicate icon"
-          :size="iconSize"
-          class="tw-p-1 tw-rounded tw-cursor-pointer tw-text-grayscale-600 hover:tw-bg-grayscale-400"
-          :should-display-title="false"
-          @click="onCopyClick"
-          @mouseleave="internalTooltipText = tooltipText"
-        />
-      </template>
-      <template #content>
-        <p
-          class="tw-flex tw-z-50 tw-text-grayscale-600 tw-font-normal tw-text-sm tw-justify-center tw-whitespace-nowrap tw-select-none"
-        >
-          {{ internalTooltipText }}
-        </p>
-      </template>
-    </Tooltip>
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue';
-import Tooltip from '../Tooltip/Tooltip.vue';
-import Icon from '../Icon/Icon.vue';
-
-const props = defineProps({
-  text: {
-    type: String,
-    required: true,
-  },
-  tooltipText: {
-    type: String,
-    default: 'Copy to clipboard',
-  },
-  tooltipCopiedText: {
-    type: String,
-    default: 'Copied!',
-  },
-  shouldShowTooltip: {
-    type: Boolean,
-    default: true,
-  },
-  iconSize: {
-    type: String,
-    default: 'sm',
-  },
-});
-
-const internalTooltipText = ref(props.tooltipText);
-
-const onCopyClick = () => {
-  internalTooltipText.value = props.tooltipCopiedText;
-  navigator.clipboard.writeText(props.text);
-};
-</script>
+<template>
+  <div class="tw-flex tw-w-full tw-items-center tw-gap-2">
+    <p class="tw-overflow-x-hidden tw-truncate" :title="text">
+      {{ text }}
+    </p>
+    <Tooltip
+      class="tw-items-center"
+      direction="top"
+      alignment="center"
+      color="grayscale-700"
+      :should-show-icon="false"
+      :should-show-tooltip="shouldShowTooltip && internalTooltipText"
+      full-width
+      is-rounded-corner
+    >
+      <template #open>
+        <Icon
+          name="duplicate"
+          alt="Duplicate icon"
+          :size="iconSize"
+          class="tw-p-1 tw-rounded tw-cursor-pointer tw-text-grayscale-600 hover:tw-bg-grayscale-400"
+          :should-display-title="false"
+          @click="onCopyClick"
+          @mouseleave="internalTooltipText = tooltipText"
+        />
+      </template>
+      <template #content>
+        <p
+          class="tw-flex tw-z-50 tw-text-grayscale-600 tw-font-normal tw-text-sm tw-justify-center tw-whitespace-nowrap tw-select-none"
+        >
+          {{ internalTooltipText }}
+        </p>
+      </template>
+    </Tooltip>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import Tooltip from '../Tooltip/Tooltip.vue';
+import Icon from '../Icon/Icon.vue';
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  tooltipText: {
+    type: String,
+    default: 'Copy to clipboard',
+  },
+  tooltipCopiedText: {
+    type: String,
+    default: 'Copied!',
+  },
+  shouldShowTooltip: {
+    type: Boolean,
+    default: true,
+  },
+  iconSize: {
+    type: String,
+    default: 'sm',
+  },
+});
+
+const internalTooltipText = ref(props.tooltipText);
+
+const onCopyClick = () => {
+  internalTooltipText.value = props.tooltipCopiedText;
+  navigator.clipboard.writeText(props.text);
+};
+</script>