@designcrowd/fe-shared-lib 1.0.0-test-publish

package/src/atoms/components/Checktile/Checktile.vue

@@ -0,0 +1,73 @@
+<template>
+  <button
+    class="tw-transition-shadow tw-duration-200 tw-ease-out tw-border-none tw-bg-white tw-cursor-pointer"
+    :class="{
+      'hover:tw-shadow-lg': !selected,
+      'tw-rounded-sm': borderRadius === 'sm',
+      'tw-rounded': borderRadius === 'reg',
+      'tw-rounded-md': borderRadius === 'md',
+    }"
+    @click="onClick"
+  >
+    <div
+      class="tw-h-full tw-relative tw-transition-shadow tw-duration-200 tw-ease-out tw-overflow-hidden"
+      :class="{
+        'tw-rounded-sm': borderRadius === 'sm',
+        'tw-rounded': borderRadius === 'reg',
+        'tw-rounded-md': borderRadius === 'md',
+        '!tw-shadow-[0_0_0_2px] !tw-shadow-info-500': selected,
+        '!tw-shadow-[0_0_0_1px] !tw-shadow-secondary-200 hover:!tw-shadow-info-500': !selected,
+      }"
+    >
+      <div class="tw-block tw-overflow-hidden">
+        <slot />
+      </div>
+      <div
+        v-if="displayCheck"
+        :class="{
+          'tw-scale-0': !selected,
+          'tw-scale-100': selected,
+          'tw-absolute tw-bottom-0 tw-right-0 tw--translate-x-2 tw--translate-y-2': checkPosition === 'bottom-right',
+          'tw-absolute tw-right-0 tw-top-1/2 tw--translate-y-1/2 tw-mr-3': checkPosition === 'middle-right',
+        }"
+        class="tw-transition-transform tw-duration-200 tw-ease-out tw-text-white tw-transform tw-bg-info-500 tw-flex tw-items-center tw-justify-center tw-rounded-full tw-w-6 tw-h-6"
+      >
+        <Icon name="check" size="xs" />
+      </div>
+    </div>
+  </button>
+</template>
+<script>
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    selected: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    checkPosition: {
+      type: String,
+      default: 'bottom-right',
+    },
+    displayCheck: {
+      type: Boolean,
+      default: true,
+    },
+    borderRadius: {
+      type: String,
+      required: false,
+      default: 'sm',
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>

package/src/atoms/components/CollapsiblePanel/CollapsiblePanel.mixin.js

@@ -0,0 +1,34 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    isCollapsed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selfIsCollapsed: false,
+    };
+  },
+  watch: {
+    isCollapsed(newVal) {
+      this.selfIsCollapsed = newVal;
+    },
+  },
+  created() {
+    this.selfIsCollapsed = this.isCollapsed;
+  },
+  methods: {
+    toggleCollapsed() {
+      this.selfIsCollapsed = !this.selfIsCollapsed;
+      this.$emit('changed');
+    },
+  },
+});

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

@@ -0,0 +1,40 @@
+import CollapsiblePanel from './CollapsiblePanel.vue';
+
+export default {
+  title: 'Components/CollapsiblePanel',
+  component: CollapsiblePanel,
+};
+
+const data = {
+  components: {
+    CollapsiblePanel,
+  },
+};
+
+export const Simple = () => {
+  return {
+    ...data,
+    template: `
+      <CollapsiblePanel title="Hello">
+        <h1>Content</h1>
+        <p>Content Content Content Content</p>
+      </CollapsiblePanel>
+    `,
+  };
+};
+
+export const WithForm = () => {
+  return {
+    ...data,
+    template: `
+      <CollapsiblePanel title="Form">
+        <form>
+          <label for="fname">First name:</label><br>
+          <input class="tw-border tw-border-grayscale-500 tw-border-solid" type="text" id="fname" name="fname"><br>
+          <label for="lname">Last name:</label><br>
+          <input class="tw-border tw-border-grayscale-500 tw-border-solid" type="text" id="lname" name="lname">
+        </form>
+      </CollapsiblePanel>
+    `,
+  };
+};

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

@@ -0,0 +1,30 @@
+<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 tw-text-md tw-font-sans tw-font-bold tw-text-secondary-800">
+        {{ title }}
+      </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

@@ -0,0 +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" />
+    `,
+  };
+};

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

@@ -0,0 +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>

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

@@ -0,0 +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>
+    `,
+  };
+};

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

@@ -0,0 +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>

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

@@ -0,0 +1,135 @@
+import Dropdown from './Dropdown.vue';
+import DropdownItem from './DropdownItem.vue';
+import Pill from '../Pill/Pill.vue';
+import Button from '../Button/Button.vue';
+
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+      Pill,
+    },
+    template: `
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right">
+          <DropdownItem>
+            <span class="tw-grow">Menu item 1</span>
+            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
+          </DropdownItem>
+          <DropdownItem>
+            <span class="tw-grow">Menu item 2</span>
+            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    `,
+  };
+};
+
+export const Disabled = () => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+    },
+    template: `
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" disabled>
+          <DropdownItem>
+            <span>Menu item 1</span>
+          </DropdownItem>
+          <DropdownItem>
+            <span>Menu item 2</span>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    `,
+  };
+};
+
+export const LongListFixedHeight = () => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+      Pill,
+    },
+    template: `
+      <div class="tw-font-sans tw-w-1/4">
+        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto">
+          <DropdownItem v-for="(item, i) in items" :key="i">
+            <span class="tw-grow">{{ item.display }}</span>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+    `,
+    setup() {
+      return {
+        items: [
+          {
+            display: 'Menu 1',
+          },
+          {
+            display: 'Menu 2',
+          },
+          {
+            display: 'Menu 3',
+          },
+          {
+            display: 'Menu 4',
+          },
+          {
+            display: 'Menu 5',
+          },
+          {
+            display: 'Menu 6',
+          },
+          {
+            display: 'Menu 7',
+          },
+          {
+            display: 'Menu 8',
+          },
+          {
+            display: 'Menu 9',
+          },
+          {
+            display: 'Menu 10',
+          },
+        ],
+      };
+    },
+  };
+};
+
+export const SampleElementClasses = () => {
+  return {
+    components: {
+      Dropdown,
+      DropdownItem,
+      Button,
+      Pill,
+    },
+    template: `
+      <div class="tw-flex tw-gap-2 tw-m-4">
+        <Dropdown menu-align="right" element-classes="tw-h-12">
+          <DropdownItem>
+            <span class="tw-grow">Menu item 1</span>
+            <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
+          </DropdownItem>
+          <DropdownItem>
+            <span class="tw-grow">Menu item 2</span>
+            <Pill class="tw-text-white tw-w-7" :style="{ background: 'red' }">Red</Pill>
+          </DropdownItem>
+        </Dropdown>
+        <Button label="Submit" variant="primary">Button</Button>
+      </div>
+    `,
+  };
+};

package/src/atoms/components/Dropdown/Dropdown.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="tw-relative tw-inline-block tw-w-full">
+    <div
+      class="tw-bg-white tw-border tw-border-grayscale-500 tw-border-solid tw-h-10 tw-flex tw-items-center tw-rounded tw-text-md tw-w-full"
+      :class="[elementClasses, disabled && 'tw-opacity-40 tw-cursor-not-allowed']"
+      @click="() => !disabled && onToggleMenu()"
+    >
+      <div class="tw-text-left tw-flex-auto tw-pl-3">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <Icon
+        :name="isMenuVisible ? 'chevron-up' : 'chevron-down'"
+        class="tw-pt-1 tw-pr-2 tw-flex-none"
+        color="secondary-500"
+        size="sm"
+      />
+    </div>
+
+    <div
+      v-show="isMenuVisible"
+      class="tw-origin-top-right tw-absolute tw-left-0 tw-mt-2 tw-w-full tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5"
+      :class="[
+        menuElementClasses,
+        {
+          'tw-right-0': menuAlign === 'right',
+          'tw-left-0': menuAlign !== 'right',
+        },
+      ]"
+    >
+      <div class="tw-py-1">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    menuAlign: {
+      type: String,
+      default: 'right',
+    },
+    title: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    elementClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    menuElementClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data: () => ({
+    isMenuVisible: false,
+  }),
+  computed: {
+    menuItems() {
+      return (this.$slots.default || []).filter((s) => s.tag);
+    },
+  },
+  methods: {
+    onToggleMenu() {
+      this.isMenuVisible = !this.isMenuVisible;
+    },
+    hideMenu() {
+      this.isMenuVisible = false;
+    },
+    showMenu() {
+      this.isMenuVisible = true;
+    },
+  },
+};
+</script>