@vc-shell/framework 1.0.38 → 1.0.39

package/components/atoms/vc-badge/vc-badge.stories.ts

@@ -0,0 +1,27 @@
+/**
+ * Badge component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcBadge from "./vc-badge.vue";
+
+export default {
+  title: "atoms/vc-badge",
+  component: VcBadge,
+};
+
+const Template: Story = (args) => ({
+  components: { VcBadge },
+  setup() {
+    return { args };
+  },
+  template: '<vc-badge v-bind="args">42</vc-badge>',
+});
+
+export const Badge = Template.bind({});
+Badge.storyName = "vc-badge";
+Badge.args = {
+  active: false,
+  disabled: false,
+  clickable: true,
+};

package/components/atoms/vc-badge/vc-badge.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="inline-block rounded-[var(--badge-border-radius)] py-1 px-2 text-base font-normal bg-[color:var(--badge-background-color)] text-[color:var(--badge-text-color)] border border-solid border-[color:var(--badge-border-color)] transition duration-200"
+    :class="{
+      'bg-[color:var(--badge-background-color-active)] text-[color:var(--badge-text-color-active)] border-[color:var(--badge-border-color-active)]':
+        active,
+      'cursor-pointer hover:bg-[color:var(--badge-background-color-active)] hover:text-[color:var(--badge-text-color-hover)] hover:border-[color:var(--badge-border-color-hover)]':
+        clickable,
+      'cursor-not-allowed bg-[color:var(--badge-background-color-disabled)] text-[color:var(--badge-text-color-disabled)] border-[color:var(--badge-border-color-disabled)] hover:bg-[color:var(--badge-background-color-disabled)] hover:text-[color:var(--badge-text-color-disabled)] hover:border-[color:var(--badge-border-color-disabled)]':
+        disabled,
+    }"
+    @click="onClick"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  clickable: {
+    type: Boolean,
+    default: true,
+  },
+});
+const emit = defineEmits(["click"]);
+
+function onClick(): void {
+  if (props.clickable && !props.disabled) {
+    emit("click");
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --badge-background-color: #ffffff;
+  --badge-background-color-hover: #fafafa;
+  --badge-background-color-active: #fafafa;
+  --badge-background-color-disabled: #f2f2f2;
+
+  --badge-text-color: #455668;
+  --badge-text-color-hover: #3b4959;
+  --badge-text-color-active: #3b4959;
+  --badge-text-color-disabled: #8296ab;
+
+  --badge-border-radius: 35px;
+
+  --badge-border-color: #a1bfd4;
+  --badge-border-color-hover: #8fb3cc;
+  --badge-border-color-active: #8fb3cc;
+  --badge-border-color-disabled: #b2cbdc;
+}
+</style>

package/components/atoms/vc-button/vc-button.stories.ts

@@ -0,0 +1,34 @@
+/**
+ * Button component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcButton from "./vc-button.vue";
+
+export default {
+  title: "atoms/vc-button",
+  component: VcButton,
+  argTypes: {
+    variant: {
+      options: ["primary", "secondary", "special"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+const Template: Story = (args) => ({
+  components: { VcButton },
+  setup() {
+    return { args };
+  },
+  template: '<vc-button v-bind="args">I am a button</vc-button>',
+});
+
+export const Button = Template.bind({});
+Button.storyName = "vc-button";
+Button.args = {
+  icon: "fas fa-star",
+  variant: "primary",
+  disabled: false,
+  small: false,
+};

package/components/atoms/vc-button/vc-button.vue

@@ -0,0 +1,219 @@
+<template>
+  <button
+    class="vc-button"
+    :class="[
+      `vc-button_${variant}`,
+      {
+        'vc-button_small': small,
+        'vc-button_outline': outline,
+        'vc-button_selected': selected,
+      },
+    ]"
+    @click="onClick"
+    :disabled="disabled"
+  >
+    <VcIcon
+      v-if="icon"
+      class="vc-button__icon"
+      :icon="icon"
+      :size="small ? 'xs' : 's'"
+    ></VcIcon>
+    <span v-if="$slots['default']" class="vc-button__title">
+      <slot></slot>
+    </span>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "@/components";
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: undefined,
+  },
+
+  variant: {
+    type: String,
+    enum: ["primary", "secondary", "special", "danger", "widget", "onlytext"],
+    default: "primary",
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  small: {
+    type: Boolean,
+    default: false,
+  },
+
+  outline: {
+    type: Boolean,
+    default: false,
+  },
+
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["click"]);
+
+function onClick(e: Event): void {
+  if (!props.disabled) {
+    e.preventDefault();
+    emit("click", e);
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --button-primary-background-color: #41afe6;
+  --button-primary-background-color-hover: #319ed4;
+  --button-primary-background-color-active: #319ed4;
+  --button-primary-background-color-disabled: #a9ddf6;
+
+  --button-primary-text-color: #ffffff;
+  --button-primary-text-color-hover: #ffffff;
+  --button-primary-text-color-active: #ffffff;
+  --button-primary-text-color-disabled: #ffffff;
+
+  --button-secondary-background-color: #ffffff;
+  --button-secondary-background-color-hover: #ffffff;
+  --button-secondary-background-color-active: #ffffff;
+  --button-secondary-background-color-disabled: #ffffff;
+
+  --button-secondary-border-color: #43b0e6;
+  --button-secondary-border-color-hover: #319ed4;
+  --button-secondary-border-color-active: #319ed4;
+  --button-secondary-border-color-disabled: #a9ddf6;
+
+  --button-secondary-text-color: #43b0e6;
+  --button-secondary-text-color-hover: #319ed4;
+  --button-secondary-text-color-active: #319ed4;
+  --button-secondary-text-color-disabled: #a9ddf6;
+
+  --button-special-background-color: #f89406;
+  --button-special-background-color-hover: #eb8b03;
+  --button-special-background-color-active: #eb8b03;
+  --button-special-background-color-disabled: #fed498;
+
+  --button-danger-background-color: #ff4a4a;
+  --button-danger-background-color-hover: #d73a3a;
+  --button-danger-background-color-active: #d73a3a;
+  --button-danger-background-color-disabled: #ff5e5e;
+
+  --button-special-text-color: #ffffff;
+  --button-special-text-color-hover: #ffffff;
+  --button-special-text-color-active: #ffffff;
+  --button-special-text-color-disabled: #ffffff;
+
+  --button-widget-background-color: #ffffff;
+  --button-widget-background-color-hover: #f2faff;
+  --button-widget-background-color-active: #eaf6ff;
+  --button-widget-background-color-disabled: #fafafa;
+
+  --button-widget-border-color: #eaedf3;
+  --button-widget-border-color-hover: #d3e2ec;
+  --button-widget-border-color-active: #deecf4;
+
+  --button-border-radius: 3px;
+  --button-padding: 14px;
+  --button-padding-small: 12px;
+  --button-height: 36px;
+  --button-height-small: 28px;
+}
+
+$variants: primary, secondary, special, danger, widget;
+
+.vc-button {
+  @apply inline-flex items-center font-medium text-sm cursor-pointer box-border transition duration-200 rounded-[var(--button-border-radius)] px-[var(--button-padding)] h-[var(--button-height)];
+
+  &__icon + &__title {
+    @apply ml-2;
+  }
+
+  @each $variant in $variants {
+    &_#{$variant} {
+      @apply bg-[color:var(--button-#{$variant}-background-color)]
+      text-left
+      text-[color:var(--button-#{$variant}-text-color)]
+      border border-solid border-[color:var(--button-#{$variant}-background-color)]
+      hover:bg-[color:var(--button-#{$variant}-background-color-hover)]
+      hover:text-[color:var(--button-#{$variant}-text-color-hover)]
+      hover:border-[color:var(--button-#{$variant}-background-color-hover)]
+      focus:bg-[color:var(--button-#{$variant}-background-color-active)]
+      focus:text-[color:var(--button-#{$variant}-text-color-active)]
+      focus:bg-[color:var(--button-#{$variant}-background-color-active)]
+      disabled:cursor-not-allowed
+      disabled:bg-[color:var(--button-#{$variant}-background-color-disabled)]
+      disabled:text-[color:var(--button-#{$variant}-text-color-disabled)]
+      disabled:border-[color:var(--button-#{$variant}-background-color-disabled)];
+    }
+  }
+
+  &_widget {
+    @apply h-auto border-[color:var(--button-widget-border-color)]
+    shadow-[1px_4px_10px_rgba(197,206,214,0.24)]
+    rounded-[4px]
+    p-[15px]
+    border-[color:var(--button-widget-background-color)]
+    hover:bg-[color:var(--button-widget-background-color-hover)]
+    focus:bg-[color:var(--button-widget-background-color-active)]
+    focus:border-[color:var(--button-widget-border-color-active)]
+    disabled:cursor-not-allowed
+    disabled:bg-[color:var(--button-widget-background-color-disabled)]
+    disabled:border-[color:var(--button-widget-background-color-disabled)];
+
+    .vc-button__icon {
+      @apply text-[30px] text-[color:#a9bfd2];
+    }
+  }
+
+  &_small {
+    @apply h-[var(--button-height-small)]
+      px-[var(--button-padding-small)]
+      font-normal
+      text-xs;
+
+    .vc-button__icon + .vc-button__title {
+      @apply ml-1;
+    }
+  }
+
+  &_outline {
+    @apply bg-transparent
+    text-[color:var(--button-secondary-text-color)]
+    border-[color:var(--button-secondary-border-color)]
+    hover:text-[color:var(--button-secondary-text-color-hover)]
+    hover:border-[color:var(--button-secondary-border-color-hover)]
+    hover:bg-transparent
+    focus:text-[color:var(--button-secondary-text-color-hover)]
+    focus:border-[color:var(--button-secondary-border-color-active)]
+    focus:bg-transparent
+    disabled:cursor-not-allowed
+    disabled:text-[color:var(--button-secondary-text-color-disabled)]
+    disabled:border-[color:var(--button-secondary-border-color-disabled)]
+    disabled:bg-transparent;
+  }
+
+  &_onlytext {
+    @apply text-[color:var(--button-secondary-text-color)]
+    p-0 border-none bg-transparent h-auto
+    hover:bg-transparent
+    hover:text-[color:var(--button-secondary-text-color-hover)]
+    focus:bg-transparent
+    focus:text-[color:var(--button-secondary-text-color-hover)];
+  }
+
+  &_selected {
+    &.vc-button_widget {
+      @apply bg-[color:var(--button-widget-background-color-hover)];
+    }
+  }
+}
+</style>

package/components/atoms/vc-card/vc-card.vue

@@ -0,0 +1,137 @@
+<template>
+  <div
+    class="vc-card"
+    :class="[{ 'vc-card_collapsable': isCollapsable }, `vc-card_${variant}`]"
+  >
+    <div class="vc-card__header" v-if="header" @click="onHeaderClick">
+      <VcIcon v-if="icon" class="vc-card__icon" :icon="icon" size="xl"></VcIcon>
+      <div class="vc-card__title">{{ header }}</div>
+      <div v-if="$slots['actions']" class="vc-card__actions">
+        <slot name="actions"></slot>
+      </div>
+      <VcIcon
+        v-if="isCollapsable"
+        class="vc-card__collapse"
+        :icon="`fas fa-chevron-${isCollapsedInternal ? 'down' : 'up'}`"
+        size="s"
+      ></VcIcon>
+    </div>
+    <transition name="fade">
+      <div
+        :class="[{ 'vc-flex': fill }, 'vc-card__body']"
+        v-show="!isCollapsedInternal"
+      >
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+const props = defineProps({
+  header: {
+    type: String,
+    default: undefined,
+  },
+
+  icon: {
+    type: String,
+    default: undefined,
+  },
+
+  isCollapsable: {
+    type: Boolean,
+    default: false,
+  },
+
+  isCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+
+  fill: {
+    type: Boolean,
+    default: false,
+  },
+
+  variant: {
+    type: String,
+    enum: ["default", "success", "danger"],
+    default: "default",
+  },
+});
+const emit = defineEmits(["header:click", "state:collapsed"]);
+const isCollapsedInternal = ref(props.isCollapsed);
+
+function onHeaderClick() {
+  if (props.isCollapsable) {
+    isCollapsedInternal.value = !isCollapsedInternal.value;
+    emit("state:collapsed", isCollapsedInternal.value);
+  }
+  emit("header:click");
+}
+</script>
+
+<style lang="scss">
+:root {
+  --card-background: #ffffff;
+  --card-border-radius: 6px;
+  --card-box-shadow: 1px 1px 7px rgba(126, 142, 157, 0.15);
+  --card-header-background: #f4f8fb;
+  --card-header-color: #83a3be;
+
+  --card-header-background-success: #e9f7df;
+  --card-header-background-danger: #ffe6e6;
+
+  --card-header-color-success: #99c17a;
+  --card-header-color-danger: #f34747;
+}
+
+$variants: success, danger;
+
+.vc-card {
+  @apply bg-[color:var(--card-background)] border
+  border-[color:#eef0f2] border-solid box-border
+  shadow-[1px_1px_7px_rgba(126,142,157,0.15)]
+  rounded-[var(--card-border-radius)] overflow-hidden
+  flex-grow flex flex-col;
+
+  &__header {
+    @apply bg-[color:var(--card-header-background)] px-4 py-3 flex items-center content-between w-full box-border;
+  }
+
+  &_collapsable &__header {
+    @apply cursor-pointer;
+  }
+
+  &__title {
+    @apply uppercase flex-grow
+    text-[color:var(--card-header-color)]
+    text-base font-bold uppercase;
+  }
+
+  &__icon {
+    @apply text-[color:var(--card-header-color)] mr-3;
+  }
+
+  &__collapse {
+    @apply text-[color:var(--card-header-color)] ml-3;
+  }
+
+  &__body {
+    @apply flex-grow box-border;
+  }
+
+  @each $variant in $variants {
+    &_#{$variant} {
+      .vc-card__header {
+        @apply bg-[color:var(--card-header-background-#{$variant})];
+      }
+      .vc-card__title {
+        @apply text-[color:var(--card-header-color-#{$variant})];
+      }
+    }
+  }
+}
+</style>

package/components/atoms/vc-checkbox/vc-checkbox.stories.ts

@@ -0,0 +1,25 @@
+/**
+ * Checkbox component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcCheckbox from "./vc-checkbox.vue";
+
+export default {
+  title: "atoms/vc-checkbox",
+  component: VcCheckbox,
+};
+
+const Template: Story = (args) => ({
+  components: { VcCheckbox },
+  setup() {
+    return { args };
+  },
+  template: '<vc-checkbox v-bind="args"></vc-checkbox>',
+});
+
+export const Checkbox = Template.bind({});
+Checkbox.storyName = "vc-checkbox";
+Checkbox.args = {
+  checked: false,
+};

package/components/atoms/vc-checkbox/vc-checkbox.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="vc-checkbox" :class="{ 'vc-checkbox_disabled': disabled }">
+    <label class="vc-checkbox__label">
+      <input
+        type="checkbox"
+        class="vc-checkbox__input"
+        :checked="modelValue"
+        :disabled="disabled"
+        @change="onChange"
+      />
+      <span class="vc-checkbox__checkmark"></span>
+      <span v-if="$slots['default']" class="ml-2">
+        <slot></slot>
+      </span>
+      <span
+        v-if="required"
+        class="text-[color:var(--checkbox-required-color)] ml-1"
+        >*</span
+      >
+    </label>
+
+    <slot v-if="errorMessage" name="error">
+      <VcHint class="vc-checkbox__error mt-1">
+        {{ errorMessage }}
+      </VcHint>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  required: {
+    type: Boolean,
+    default: false,
+  },
+
+  name: {
+    type: String,
+    default: "Field",
+  },
+
+  errorMessage: {
+    type: String,
+    default: undefined
+  }
+});
+const emit = defineEmits(["update:modelValue"]);
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    emit("update:modelValue", value);
+  }
+);
+
+// Handle input event to propertly validate value and emit changes
+function onChange(e: InputEvent) {
+  const newValue = (e.target as HTMLInputElement).checked;
+  emit("update:modelValue", newValue);
+}
+</script>
+
+<style lang="scss">
+:root {
+  --checkbox-size: 14px;
+  --checkbox-border-radius: 2px;
+  --checkbox-background-color: #ffffff;
+  --checkbox-image: url("data:image/svg+xml;utf8,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='0.8' y='0.8' width='12.4' height='12.4' rx='1.7' stroke='%23ABC0D3' stroke-width='1.6'/></svg>");
+  --checkbox-image-checked: url("data:image/svg+xml;utf8,<svg width='15' height='14' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M11.91 2.49661C12.4736 1.9331 13.3872 1.9331 13.9507 2.49661C14.5142 3.06011 14.5142 3.97374 13.9507 4.53725L7.7195 10.7684C7.52877 10.9592 7.29793 11.0853 7.05413 11.147C6.56096 11.2966 6.00345 11.1765 5.61355 10.7866L3.27419 8.44723C2.71069 7.88372 2.71069 6.97009 3.27419 6.40659C3.8377 5.84308 4.75133 5.84308 5.31484 6.40658L6.65745 7.7492L11.91 2.49661Z' fill='%23ABC0D3'/><path fill-rule='evenodd' clip-rule='evenodd' d='M2.85185 0C1.27682 0 0 1.27682 0 2.85185V11.1481C0 12.7232 1.27682 14 2.85185 14H11.1481C12.7232 14 14 12.7232 14 11.1481V7.25926H12.4444V11.1481C12.4444 11.8641 11.8641 12.4444 11.1481 12.4444H2.85185C2.13593 12.4444 1.55556 11.8641 1.55556 11.1481V2.85185C1.55556 2.13593 2.13593 1.55556 2.85185 1.55556H11.1481C11.474 1.55556 11.7718 1.6758 11.9996 1.87434L13.3636 1.05592C12.8407 0.411698 12.0425 0 11.1481 0H2.85185Z' fill='%23ABC0D3'/></svg>");
+  --checkbox-color-error: #f14e4e;
+  --checkbox-required-color: #f14e4e;
+}
+
+.vc-checkbox {
+  &__label {
+    @apply inline-flex select-none cursor-pointer text-base items-center;
+  }
+
+  &__input {
+    @apply absolute opacity-0 z-[-1] m-0;
+  }
+
+  &__error {
+    --hint-color: var(--checkbox-color-error);
+  }
+
+  &__checkmark {
+    @apply h-[var(--checkbox-size)];
+
+    &:before {
+      @apply inline-block box-border
+      w-[var(--checkbox-size)]
+      h-[var(--checkbox-size)]
+      shrink-0
+      grow-0
+      rounded-[var(--checkbox-border-radius)]
+      bg-no-repeat
+      bg-left-top
+      bg-[length:auto_var(--checkbox-size)]
+      bg-[color:var(--checkbox-background-color)]
+      bg-[image:var(--checkbox-image)]
+      content-[""];
+    }
+  }
+
+  &__input:checked ~ &__checkmark:before {
+    @apply bg-[image:var(--checkbox-image-checked)];
+  }
+
+  &_disabled &__checkmark:before {
+    @apply bg-[#fafafa];
+  }
+
+  &_disabled &__label {
+    @apply cursor-auto;
+  }
+}
+</style>

package/components/atoms/vc-col/vc-col.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="vc-col flex flex-col min-w-0 basis-0" :style="{ flexGrow: size }">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  size: {
+    type: String,
+    default: "1",
+  },
+});
+</script>
+
+<style lang="scss">
+.vc-col {
+  .vc-app_mobile & {
+    @apply grow #{!important};
+  }
+}
+</style>

package/components/atoms/vc-container/vc-container.stories.ts

@@ -0,0 +1,31 @@
+/**
+ * Container component.
+ * @author Iurii A Taranov <me@flanker72.ru>
+ */
+import { Story } from "@storybook/vue3";
+import VcContainer from "./vc-container.vue";
+
+export default {
+  title: "atoms/vc-container",
+  component: VcContainer,
+};
+
+const Template: Story = (args) => ({
+  components: { VcContainer },
+  setup() {
+    return { args };
+  },
+  template: `<div style="width: 400px; height: 300px"><vc-container v-bind="args">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque tortor id lacus viverra, ut mollis libero auctor. Curabitur viverra, justo eu convallis pulvinar, dui nisi luctus quam, ut egestas tortor dolor quis nisi. Sed dignissim tellus ac enim dignissim dapibus. Duis vitae ipsum sit amet leo ornare fringilla sit amet a felis. Quisque finibus elementum dolor eu rhoncus. Donec dapibus non nisl blandit lobortis. Suspendisse pellentesque elit nunc, at auctor orci dignissim sed. Cras malesuada nibh id porttitor hendrerit.</p>
+    <p>Maecenas ut malesuada risus, a euismod ligula. Mauris fringilla arcu a vestibulum varius. Phasellus et quam facilisis, egestas magna ut, ultrices est. Maecenas accumsan sit amet metus sit amet laoreet. Sed at accumsan orci, id tincidunt nibh. Nam laoreet eu nisl a condimentum. Fusce ac blandit justo. Vestibulum sollicitudin eros euismod, cursus arcu ac, blandit eros. Phasellus tempor mi et iaculis pulvinar. Cras blandit, tortor sit amet fermentum aliquet, metus ipsum ultricies est, eu congue dui nunc nec ligula.</p>
+    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque porttitor felis non turpis volutpat, ut consequat nulla vestibulum. Donec ipsum dui, convallis a faucibus eget, vehicula faucibus quam. Maecenas et velit odio. Suspendisse posuere faucibus est vel condimentum. Mauris et est placerat risus tincidunt rutrum. Sed venenatis nunc a mollis dignissim. Nam felis nisl, blandit in venenatis et, sollicitudin ut eros. Quisque ornare lacus metus, sed placerat lacus malesuada et. Sed venenatis, turpis in porta suscipit, libero ex tristique erat, nec pretium lectus justo malesuada dolor.</p>
+    <p>Vivamus non nisi quis elit pellentesque pharetra quis eget augue. Donec tincidunt nunc id placerat tincidunt. Mauris ultrices quam id risus sodales, at euismod mauris convallis. Morbi quis aliquam nibh. Cras vitae mi a risus dapibus lacinia sit amet eu erat. Morbi ligula ex, aliquet ac nunc a, tempus lacinia lacus. Integer pretium arcu augue, vitae egestas libero rutrum eu.</p>
+    <p>Suspendisse malesuada nisl tempor tellus ullamcorper, ut varius enim molestie. Suspendisse eleifend at libero id ultricies. Duis sagittis quis metus eget condimentum. Praesent iaculis viverra mauris et mattis. Pellentesque cursus, turpis sed venenatis volutpat, nibh tortor eleifend eros, non varius neque lectus ut dolor. Sed eget lectus et risus hendrerit molestie. Cras lorem enim, rutrum sed pellentesque in, tristique et diam. Donec aliquet dolor sit amet cursus facilisis. Donec a placerat nibh.</p>
+  </vc-container></div>`,
+});
+
+export const Container = Template.bind({});
+Container.storyName = "vc-container";
+Container.args = {
+  shadow: false,
+};