@designcrowd/fe-shared-lib 1.5.27-ENG-3954 → 1.5.27

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

@@ -1,62 +0,0 @@
-<template>
-  <component :is="componentTag" class="menu-item" :class="variantClasses" v-bind="componentAttrs" @click="handleClick">
-    <Icon v-if="icon" :name="icon" :size="iconSize" />
-    <span>{{ label }}</span>
-  </component>
-</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;
-  iconSize?: 'sm' | 'md' | 'lg';
-  url?: string;
-  action?: () => void;
-}
-
-const props = withDefaults(defineProps<MenuCtaProps>(), {
-  variant: 'primary',
-  iconSize: 'sm',
-});
-
-const emit = defineEmits<{
-  click: [event: MouseEvent];
-}>();
-
-const componentTag = computed(() => (props.action ? 'button' : 'a'));
-
-const componentAttrs = computed(() => (props.action ? {} : { href: props.url }));
-
-const variantClasses = computed(() => {
-  switch (props.variant) {
-    case 'primary':
-      return 'tw-bg-primary-500 tw-text-white hover:tw-bg-primary-700';
-    case 'secondary':
-      return 'tw-justify-center tw-bg-secondary-500 tw-text-white hover:tw-bg-secondary-700';
-    case 'empty':
-      return 'tw-justify-center tw-text-grayscale-700 hover:tw-bg-gray-600 tw-text-center';
-    default:
-      return '';
-  }
-});
-
-const handleClick = (event: MouseEvent) => {
-  if (props.action) {
-    props.action();
-  }
-  emit('click', event);
-};
-</script>
-
-<style scoped>
-.menu-item {
-  @apply tw-p-2 tw-flex tw-gap-2 tw-items-center tw-rounded-lg tw-font-normal tw-cursor-pointer;
-  height: 36px;
-}
-</style>

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

@@ -1,47 +0,0 @@
-<template>
-  <component
-    :is="componentTag"
-    class="menu-item"
-    :class="{ 'tw-bg-grayscale-400': isActive, 'hover:tw-bg-grayscale-300': !isActive }"
-    v-bind="componentAttrs"
-    @click="handleClick"
-  >
-    <Icon class="icon" :name="icon" size="sm" />
-    <span class="tw-text-md tw-font-medium tw-text-grayscale-700">{{ label }}</span>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import Icon from '../../../atoms/components/Icon/Icon.vue';
-
-type IMenuItem = {
-  label: string;
-  url?: string;
-  action?: () => void;
-  icon: string;
-  isActive: boolean;
-};
-
-const props = defineProps<IMenuItem>();
-
-const componentTag = computed(() => (props.action ? 'button' : 'a'));
-
-const componentAttrs = computed(() => (props.action ? {} : { href: props.url }));
-
-const handleClick = () => {
-  if (props.action) {
-    props.action();
-  }
-};
-</script>
-
-<style scoped>
-.menu-item {
-  @apply tw-p-2 tw-mb-1 tw-flex tw-gap-2 tw-items-center tw-rounded-lg tw-cursor-pointer;
-  height: 36px;
-}
-.icon svg {
-  color: var(--text-secondary, rgba(61, 61, 61, 1));
-}
-</style>

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

@@ -1,219 +0,0 @@
-import SideNavigationPanel from './SideNavigationPanel.vue';
-
-export default {
-  title: 'Experiences/SideNavigationPanel',
-  component: SideNavigationPanel,
-  argTypes: {
-    menuItems: {
-      control: 'object',
-      description: 'Array of menu items with label, url, icon, and isActive properties',
-    },
-    createNewDesignCta: {
-      control: 'object',
-      description: 'CTA object for "Create New Design" button with url property',
-    },
-    upgradeCta: {
-      control: 'object',
-      description: 'CTA object for "Upgrade" button with url property',
-    },
-    rateCta: {
-      control: 'object',
-      description: 'CTA object for "Rate Design.com" button with action property',
-    },
-  },
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-// Default menu items representing a typical navigation structure
-const defaultMenuItems = [
-  { label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: true, action: undefined },
-  { label: 'Designs', icon: 'designs', url: '#designs', isActive: false, action: undefined },
-  { label: 'Printing', icon: 'printing', url: '#printing', isActive: false, action: undefined },
-  { label: 'Websites', icon: 'website', url: '#websites', isActive: false, action: undefined },
-  { label: 'Domains', icon: 'globe', url: '#domains', isActive: false, action: undefined },
-  { label: 'Settings', icon: 'settings', url: '#settings', isActive: false, action: undefined },
-];
-
-const defaultCreateNewDesignCta = {
-  url: '#create-new-design',
-};
-
-const defaultUpgradeCta = {
-  url: '#upgrade',
-};
-
-const defaultRateCta = {
-  action: () => console.log('Rate Design.com clicked'),
-};
-
-const Template = (args) => ({
-  components: { SideNavigationPanel },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div style="width: 100vw; height: 100vh; display: flex;">
-      <SideNavigationPanel v-bind="args" />
-      <div style="flex: 1; padding: 2rem; background: white;">
-        <h1 style="font-size: 2rem; margin-bottom: 1rem;">Content Area</h1>
-        <p>This is where your main content would appear. The side navigation panel is on the left.</p>
-        <p style="margin-top: 1rem;">Click on the menu items to see the active state change (in a real app).</p>
-      </div>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  menuItems: defaultMenuItems,
-  createNewDesignCta: defaultCreateNewDesignCta,
-  upgradeCta: defaultUpgradeCta,
-  rateCta: defaultRateCta,
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Default side navigation panel with all CTAs and the first menu item active.',
-    },
-  },
-};
-
-export const DesignsActive = Template.bind({});
-DesignsActive.args = {
-  menuItems: [
-    { label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: false, action: undefined },
-    { label: 'Designs', icon: 'designs', url: '#designs', isActive: true, action: undefined },
-    { label: 'Printing', icon: 'printing', url: '#printing', isActive: false, action: undefined },
-    { label: 'Websites', icon: 'website', url: '#websites', isActive: false, action: undefined },
-    { label: 'Domains', icon: 'globe', url: '#domains', isActive: false, action: undefined },
-    { label: 'Settings', icon: 'settings', url: '#settings', isActive: false, action: undefined },
-  ],
-  createNewDesignCta: defaultCreateNewDesignCta,
-  upgradeCta: defaultUpgradeCta,
-  rateCta: defaultRateCta,
-};
-DesignsActive.parameters = {
-  docs: {
-    description: {
-      story: 'Side navigation panel with the "Designs" menu item active.',
-    },
-  },
-};
-
-export const SettingsActive = Template.bind({});
-SettingsActive.args = {
-  menuItems: [
-    { label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: false, action: undefined },
-    { label: 'Designs', icon: 'designs', url: '#designs', isActive: false, action: undefined },
-    { label: 'Printing', icon: 'printing', url: '#printing', isActive: false, action: undefined },
-    { label: 'Websites', icon: 'website', url: '#websites', isActive: false, action: undefined },
-    { label: 'Domains', icon: 'globe', url: '#domains', isActive: false, action: undefined },
-    { label: 'Settings', icon: 'settings', url: '#settings', isActive: true, action: undefined },
-  ],
-  createNewDesignCta: defaultCreateNewDesignCta,
-  upgradeCta: defaultUpgradeCta,
-  rateCta: defaultRateCta,
-};
-SettingsActive.parameters = {
-  docs: {
-    description: {
-      story: 'Side navigation panel with the "Settings" menu item active.',
-    },
-  },
-};
-
-export const NoActiveItem = Template.bind({});
-NoActiveItem.args = {
-  menuItems: [
-    { label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: false, action: undefined },
-    { label: 'Designs', icon: 'designs', url: '#designs', isActive: false, action: undefined },
-    { label: 'Printing', icon: 'printing', url: '#printing', isActive: false, action: undefined },
-    { label: 'Websites', icon: 'website', url: '#websites', isActive: false, action: undefined },
-    { label: 'Domains', icon: 'globe', url: '#domains', isActive: false, action: undefined },
-    { label: 'Settings', icon: 'settings', url: '#settings', isActive: false, action: undefined },
-  ],
-  createNewDesignCta: defaultCreateNewDesignCta,
-  upgradeCta: defaultUpgradeCta,
-  rateCta: defaultRateCta,
-};
-NoActiveItem.parameters = {
-  docs: {
-    description: {
-      story: 'Side navigation panel with no active menu item.',
-    },
-  },
-};
-
-export const WithActionBasedMenuItems = Template.bind({});
-WithActionBasedMenuItems.args = {
-  menuItems: [
-    { label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: true, action: undefined },
-    { label: 'Designs', icon: 'designs', url: '#designs', isActive: false, action: undefined },
-    {
-      label: 'Export Data',
-      icon: 'download',
-      url: undefined,
-      isActive: false,
-      action: () => console.log('Export data action triggered'),
-    },
-    { label: 'Websites', icon: 'website', url: '#websites', isActive: false, action: undefined },
-    { label: 'Settings', icon: 'settings', url: '#settings', isActive: false, action: undefined },
-  ],
-  createNewDesignCta: defaultCreateNewDesignCta,
-  upgradeCta: defaultUpgradeCta,
-  rateCta: defaultRateCta,
-};
-WithActionBasedMenuItems.parameters = {
-  docs: {
-    description: {
-      story:
-        'Side navigation panel with an action-based menu item (Export Data) that triggers a function instead of navigation. Check console for action output.',
-    },
-  },
-};
-
-export const MinimalMenuItems = Template.bind({});
-MinimalMenuItems.args = {
-  menuItems: [
-    { label: 'Dashboard', icon: 'star-hollow', url: '#dashboard', isActive: true, action: undefined },
-    { label: 'Projects', icon: 'designs', url: '#projects', isActive: false, action: undefined },
-    { label: 'Help', icon: 'help', url: '#help', isActive: false, action: undefined },
-  ],
-  createNewDesignCta: defaultCreateNewDesignCta,
-  upgradeCta: defaultUpgradeCta,
-  rateCta: defaultRateCta,
-};
-MinimalMenuItems.parameters = {
-  docs: {
-    description: {
-      story: 'Side navigation panel with a minimal set of menu items.',
-    },
-  },
-};
-
-export const ExtendedMenuItems = Template.bind({});
-ExtendedMenuItems.args = {
-  menuItems: [
-    { label: 'Logos', icon: 'star-hollow', url: '#logos', isActive: false, action: undefined },
-    { label: 'Designs', icon: 'designs', url: '#designs', isActive: false, action: undefined },
-    { label: 'Printing', icon: 'printing', url: '#printing', isActive: false, action: undefined },
-    { label: 'Websites', icon: 'website', url: '#websites', isActive: true, action: undefined },
-    { label: 'Domains', icon: 'globe', url: '#domains', isActive: false, action: undefined },
-    { label: 'Marketing', icon: 'megaphone', url: '#marketing', isActive: false, action: undefined },
-    { label: 'Analytics', icon: 'chart', url: '#analytics', isActive: false, action: undefined },
-    { label: 'Billing', icon: 'creditcard', url: '#billing', isActive: false, action: undefined },
-    { label: 'Settings', icon: 'settings', url: '#settings', isActive: false, action: undefined },
-  ],
-  createNewDesignCta: defaultCreateNewDesignCta,
-  upgradeCta: defaultUpgradeCta,
-  rateCta: defaultRateCta,
-};
-ExtendedMenuItems.parameters = {
-  docs: {
-    description: {
-      story: 'Side navigation panel with an extended list of menu items to test scrolling behavior.',
-    },
-  },
-};

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

@@ -1,57 +0,0 @@
-<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 tw-mb-4">
-      <MenuCta class="tw-mt-2 tw-mb-4" label="Create New Design" variant="primary" icon="plus" icon-size="xs" />
-      <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="crown" icon-size="sm" />
-      <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;
-}
-.ctas {
-  text-align: center;
-}
-</style>