@designcrowd/fe-shared-lib 1.5.24 → 1.5.25-eng3931

package/src/experiences/components/SideNavigationPanel/MenuCta.vue

@@ -0,0 +1,68 @@
+<template>
+  <a class="menu-cta" :class="variantClasses" @click="handleClick">
+    <Icon v-if="icon" :name="icon" :size="iconSize" />
+    <span class="menu-cta-label">{{ label }}</span>
+  </a>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+
+type MenuCtaVariant = 'primary' | 'secondary' | 'empty';
+
+interface MenuCtaProps {
+  label: string;
+  variant?: MenuCtaVariant;
+  icon: string | undefined;
+  iconSize?: 'sm' | 'md' | 'lg';
+  url: string | undefined;
+}
+
+const props = withDefaults(defineProps<MenuCtaProps>(), {
+  variant: 'primary',
+  iconSize: 'sm',
+});
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+
+const variantClasses = computed(() => {
+  const baseClasses =
+    'tw-w-full tw-py-4 tw-flex tw-items-center tw-justify-center tw-gap-2 tw-rounded-lg tw-font-semibold tw-transition-colors tw-duration-200';
+
+  switch (props.variant) {
+    case 'primary':
+      return `${baseClasses} tw-bg-primary-500 tw-text-white hover:tw-bg-primary-700 tw-border-none`;
+    case 'secondary':
+      return `${baseClasses} tw-bg-secondary-500 tw-text-white hover:tw-bg-secondary-700 tw-border-none`;
+    case 'empty':
+      return `${baseClasses} tw-text-grayscale-700 hover:tw-bg-gray-600`;
+    default:
+      return baseClasses;
+  }
+});
+
+const handleClick = (event: MouseEvent) => {
+  emit('click', event);
+  if (props.url) {
+    window.location.href = props.url;
+  }
+};
+</script>
+
+<style scoped>
+.menu-cta {
+  @apply tw-flex tw-gap-2 tw-items-center tw-rounded-lg;
+  height: 36px;
+}
+
+.menu-cta:last-child {
+  margin-bottom: 0;
+}
+
+.menu-cta-label {
+  @apply tw-text-sm;
+}
+</style>

package/src/experiences/components/SideNavigationPanel/MenuItem.vue

@@ -0,0 +1,27 @@
+<template>
+  <a class="menu-item" :class="{ 'tw-bg-gray-400': isActive }" :href="url">
+    <Icon :name="icon" size="md" />
+    <span class="tw-text-md tw-font-medium tw-text-grayscale-700">{{ label }}</span>
+  </a>
+</template>
+
+<script setup lang="ts">
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+
+type IMenuItem = {
+  label: string;
+  url: string | undefined;
+  // action: Function?; // might need to implement actions on menu items
+  icon: string;
+  isActive: boolean;
+};
+
+const props = defineProps<IMenuItem>();
+</script>
+
+<style scoped>
+.menu-item {
+  @apply tw-p-2 tw-mb-1 tw-flex tw-gap-2 tw-items-center tw-rounded-lg hover:tw-bg-gray-300;
+  height: 36px;
+}
+</style>

package/src/experiences/components/SideNavigationPanel/SideNavigationPanel.stories.js

@@ -0,0 +1,64 @@
+import SideNavigationPanel from './SideNavigationPanel.vue';
+
+export default {
+  title: 'Experiences/SideNavigationPanel',
+  component: SideNavigationPanel,
+  argTypes: {
+    menuItems: {
+      control: 'object',
+      description: 'Array of menu items',
+    },
+  },
+};
+
+const defaultMenuItems = [
+  { id: 1, label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: true },
+  { id: 2, label: 'Designs', icon: 'designs', url: '#designs', isActive: false },
+  { id: 3, label: 'Printing', icon: 'printing', url: '#printing', isActive: false },
+  { id: 4, label: 'Websites', icon: 'website', url: '#websites', isActive: false },
+  { id: 5, label: 'Domains', icon: 'globe', url: '#domains', isActive: false },
+  { id: 6, label: 'Settings', icon: 'settings', url: '#settings', isActive: false },
+];
+
+const defaultCreateNewDesigns = {
+  label: 'Create Designs',
+  url: '#createDesigns',
+};
+
+const Template = (args) => ({
+  components: { SideNavigationPanel },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="width: 90vw; height: 90vh">
+      <SideNavigationPanel v-bind="args" />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  menuItems: defaultMenuItems,
+};
+
+export const WithDifferentActiveItem = Template.bind({});
+WithDifferentActiveItem.args = {
+  menuItems: [
+    { id: 1, label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: false },
+    { id: 2, label: 'Designs', icon: 'designs', url: '#designs', isActive: false },
+    { id: 3, label: 'Printing', icon: 'printing', url: '#printing', isActive: true },
+    { id: 4, label: 'Websites', icon: 'website', url: '#websites', isActive: false },
+    { id: 5, label: 'Domains', icon: 'globe', url: '#domains', isActive: false },
+    { id: 6, label: 'Settings', icon: 'settings', url: '#settings', isActive: false },
+  ],
+};
+
+export const CustomMenuItems = Template.bind({});
+CustomMenuItems.args = {
+  menuItems: [
+    { id: 1, label: 'Dashboard', icon: 'star-hollow', url: '#dashboard', isActive: true },
+    { id: 2, label: 'Projects', icon: 'designs', url: '#projects', isActive: false },
+    { id: 3, label: 'Help', icon: 'settings', url: '#help', isActive: false },
+  ],
+};

package/src/experiences/components/SideNavigationPanel/SideNavigationPanel.vue

@@ -0,0 +1,54 @@
+<template>
+  <!-- Side Navigation Component following these figma designs: https://www.figma.com/design/UUZ56EQZbb1Ua9NBMm6Rt5/DCOM---My-Account-Left-Nav -->
+  <div class="sidebar">
+    <div class="menu">
+      <MenuCta class="tw-mt-2 tw-mb-4" label="Create New Design" variant="primary" icon="plus" icon-size="sm" />
+      <div class="menuitemcontainer">
+        <MenuItem
+          v-for="item in menuItems"
+          :key="item.label"
+          :label="item.label"
+          :url="item.action ? '' : item.url"
+          :icon="item.icon"
+          :is-active="item.isActive"
+        />
+      </div>
+    </div>
+    <div class="ctas tw-flex tw-flex-col tw-gap-2">
+      <MenuCta label="Upgrade" variant="secondary" icon="social-instagram-color" icon-size="md" />
+      <MenuCta label="Rate Design.com" variant="empty" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import defineProps from 'vue';
+import MenuCta from './MenuCta.vue';
+import MenuItem from './MenuItem.vue';
+
+type IMenuItem = {
+  label: string;
+  url: string | undefined;
+  action: Function | undefined; // might need to implement actions on menu items
+  icon: string;
+  isActive: Boolean;
+};
+
+const props = defineProps({
+  menuItems: {
+    type: Array<IMenuItem>,
+    required: true,
+  },
+  createNewDesignCta: {
+    type: Object,
+    required: true,
+  },
+  // ctaItems: {},
+});
+</script>
+<style scoped>
+.sidebar {
+  @apply tw-p-2 tw-flex tw-flex-col tw-h-full tw-justify-between tw-w-[14rem];
+  background-color: rgba(245, 245, 245, 1);
+  border-right: 1px rgba(227, 227, 227, 1) solid;
+}
+</style>

package/src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue

@@ -69,9 +69,9 @@
 </template>
 <script setup lang="ts">
 import { Ref, ref } from 'vue';
-import Modal from '../../../atoms/components/Modal/Modal.vue';
 import Button from '../../../atoms/components/Button/Button.vue';
 import Icon from '../../../atoms/components/Icon/Icon.vue';
+import Modal from '../../../atoms/components/Modal/Modal.vue';
 import { websiteContextualUpgradeModalTr } from '../../../useSharedLibTranslate';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES, type WebsiteContextUpgradeType } from '../../models/websiteContextualModel';
 
@@ -190,7 +190,7 @@ const onUpgradeClick = () => {
 </script>
 <style scoped>
 .bottom-bar {
-  @apply tw-absolute tw-p-4 tw-bottom-0 tw-left-0 tw-w-full tw-border-t tw-border-grayscale-300 md:tw-p-0 md:tw-relative md:tw-border-none;
+  @apply tw-absolute tw-p-4 tw-bottom-0 tw-left-0 tw-w-full tw-border-t md:tw-p-0 md:tw-relative md:tw-border-none;
 }
 .button-size {
   @apply tw-w-full md:tw-max-w-40;