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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.5.26",
+  "version": "1.5.27-ENG-3954",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/src/atoms/components/Button/variants/ButtonGray.vue

@@ -1,15 +1,14 @@
 <template>
   <button
     v-if="!url"
-    class="tw-font-sans tw-border-2 tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300"
+    class="tw-font-sans tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300"
     :class="[
       classes,
       computedClasses,
       {
         'no-rounded-l': !rounded && !roundedLeft,
         'no-rounded-r': !rounded && !roundedRight,
-        'tw-cursor-pointer tw-bg-grayscale-300 tw-border-grayscale-300 hover:tw-border-grayscale-500 hover:tw-bg-grayscale-500':
-          !disabled,
+        'tw-cursor-pointer tw-bg-grayscale-300 hover:tw-bg-grayscale-500': !disabled,
         'tw-bg-grayscale-100 tw-border-grayscale-300 tw-cursor-not-allowed': disabled,
       },
     ]"
@@ -23,16 +22,15 @@
   <a
     v-else
     :href="computedUrl"
-    class="tw-justify-center tw-font-sans tw-inline-flex tw-border-2 tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300 tw-no-underline"
+    class="tw-justify-center tw-font-sans tw-inline-flex tw-font-bold tw-text-grayscale-800 hover:tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300 tw-no-underline"
     :class="[
       classes,
       computedClasses,
       {
         'no-rounded-l': !rounded && !roundedLeft,
         'no-rounded-r': !rounded && !roundedRight,
-        'tw-cursor-pointer tw-bg-grayscale-300 tw-border-grayscale-300 hover:tw-border-grayscale-500 hover:tw-bg-grayscale-500':
-          !disabled,
-        'tw-bg-grayscale-100 tw-border-grayscale-100 tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer tw-bg-grayscale-300 hover:tw-bg-grayscale-500': !disabled,
+        'tw-bg-grayscale-100 tw-cursor-not-allowed': disabled,
       },
     ]"
     :download="download"

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

@@ -14,12 +14,8 @@ export const IconSample = () => {
       return {
         sizes: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
         icons: [
-          { name: 'websites-upgrade-to-add-page' },
-          { name: 'websites-upgrade-to-contact-form' },
-          { name: 'websites-upgrade-to-remove-watermark' },
-          { name: 'websites-upgrade-to-publish' },
-          { name: 'websites-upgrade-to-videos' },
-          { name: 'websites-upgrade-to-maps' },
+          { name: 'crown' },
+          { name: 'crown-alt' },
           { name: 'add-page' },
           { name: 'ai' },
           { name: 'arrow-down' },
@@ -387,7 +383,6 @@ export const IconSample = () => {
             <div class="tw-grid tw-grid-cols-8 tw-gap-4 tw-items-center" style="grid-template-columns: repeat(8, minmax(0, 1fr));">
               <Icon
                 v-for="size in sizes"
-                viewBox="0 0 96 96"
                 :name="icon.name"
                 :alt-text="icon.altText"
                 :size="size"

package/src/atoms/components/Icon/Icon.vue

@@ -50,12 +50,12 @@ import IconAttach from './icons/attach.vue';
 import IconAuthFacebookWhite from './icons/auth-facebook-white.vue';
 import IconAuthFacebook from './icons/auth-facebook.vue';
 import IconAuthGoogle from './icons/auth-google.vue';
-import IconBriefcase from './icons/briefcase.vue';
 import IconBackground from './icons/background.vue';
 import IconBannerCentered from './icons/banner-centered.vue';
 import IconBannerLeft from './icons/banner-left.vue';
 import IconBanner from './icons/banner.vue';
 import IconBcMast from './icons/bc-mast.vue';
+import IconBriefcase from './icons/briefcase.vue';
 import IconBrush from './icons/brush.vue';
 import IconBusinessCardFilled from './icons/business-card-filled.vue';
 import IconBusiness from './icons/business.vue';
@@ -105,6 +105,8 @@ import IconCopy from './icons/copy.vue';
 import IconFilterCrazyDomains from './icons/crazy-domains/filter.vue';
 import IconGlobeCrazyDomains from './icons/crazy-domains/globe.vue';
 import IconHomeCrazyDomains from './icons/crazy-domains/home.vue';
+import IconCrownAlt from './icons/crown-alt.vue';
+import IconCrown from './icons/crown.vue';
 import IconDelete from './icons/delete.vue';
 import IconDesigns from './icons/designs.vue';
 import IconDesktop from './icons/desktop.vue';
@@ -222,11 +224,14 @@ import IconSocialInstagramCrazyDomains from './icons/crazy-domains/social-instag
 import IconSocialTwitterCrazyDomains from './icons/crazy-domains/social-twitter.vue';
 import IconSocialYoutubeCrazyDomains from './icons/crazy-domains/social-youtube.vue';
 import IconCrop from './icons/crop.vue';
+import IconDigitalBusinessCardFilled from './icons/digital-business-card-filled.vue';
 import IconFormMessage from './icons/form-message.vue';
 import IconGodaddy from './icons/godaddy/logo.vue';
 import IconIconStyleCircleBg from './icons/icon-style-circle-bg.vue';
 import IconIconStyleNoBg from './icons/icon-style-no-bg.vue';
 import IconIconStyleSquareBg from './icons/icon-style-square-bg.vue';
+import IconLinkInBioFilled from './icons/link-in-bio-filled.vue';
+import IconMedia from './icons/media.vue';
 import IconMinusCircleLight from './icons/minus-circle-light.vue';
 import IconMinus from './icons/minus.vue';
 import IconMobile from './icons/mobile.vue';
@@ -254,9 +259,8 @@ import IconQuestion from './icons/question.vue';
 import IconQuote from './icons/quote.vue';
 import IconReload from './icons/reload.vue';
 import IconReorderable from './icons/reorderable.vue';
-import IconResize from './icons/resize.vue';
-import IconMedia from './icons/media.vue';
 import IconRequestPayment from './icons/request-payment.vue';
+import IconResize from './icons/resize.vue';
 import IconSearch from './icons/search.vue';
 import IconSecure from './icons/secure.vue';
 import IconSend from './icons/send.vue';
@@ -265,7 +269,6 @@ import IconSettings from './icons/settings.vue';
 import IconShare from './icons/share.vue';
 import IconShieldTick from './icons/shield-tick.vue';
 import IconShop from './icons/shop.vue';
-import IconStop from './icons/stop.vue';
 import IconSms from './icons/sms.vue';
 import IconSocialFacebookColor from './icons/social-facebook-color.vue';
 import IconSocialFacebook from './icons/social-facebook.vue';
@@ -277,6 +280,7 @@ import IconSocialTwitterColor from './icons/social-twitter-color.vue';
 import IconStarFilled from './icons/star-filled.vue';
 import IconStarHollow from './icons/star-hollow.vue';
 import IconSticker from './icons/sticker.vue';
+import IconStop from './icons/stop.vue';
 import IconStyles from './icons/styles.vue';
 import IconSubmit from './icons/submit.vue';
 import IconTemplates from './icons/templates.vue';
@@ -304,8 +308,6 @@ import IconWatchlistFilled from './icons/watchlist-filled.vue';
 import IconWatchlistHollowAlt from './icons/watchlist-hollow-alt.vue';
 import IconWatchlistHollow from './icons/watchlist-hollow.vue';
 import IconWebsiteFilled from './icons/website-filled.vue';
-import IconDigitalBusinessCardFilled from './icons/digital-business-card-filled.vue';
-import IconLinkInBioFilled from './icons/link-in-bio-filled.vue';
 import IconWebsite from './icons/website.vue';
 import IconWholesale from './icons/wholesale.vue';
 import IconZoomIn from './icons/zoom-in.vue';
@@ -327,6 +329,7 @@ import IconShape from './icons/shape.vue';
 // New icons copied from dcom
 import IconAnnotateHeart from './icons/annotate-heart.vue';
 import IconAward from './icons/award.vue';
+import IconBezierCurveOutline from './icons/bezier-curve-outline.vue';
 import IconBezierCurve from './icons/bezier-curve.vue';
 import IconBrowser from './icons/browser.vue';
 import IconCardVertical from './icons/card-vertical.vue';
@@ -336,12 +339,11 @@ import IconHeadphones from './icons/headphones.vue';
 import IconImage from './icons/image.vue';
 import IconLightning from './icons/lightning.vue';
 import IconLogo from './icons/logo.vue';
-import IconPen from './icons/pen.vue';
+import IconPaletteOutline from './icons/palette-outline.vue';
 import IconPenOutline from './icons/pen-outline.vue';
 import IconPenSparkle from './icons/pen-sparkle.vue';
+import IconPen from './icons/pen.vue';
 import IconSparkleSquare from './icons/sparkle-square.vue';
-import IconBezierCurveOutline from './icons/bezier-curve-outline.vue';
-import IconPaletteOutline from './icons/palette-outline.vue';
 
 // Maker Icons
 import IconMakerAlignCenter from './icons/maker/align-center.vue';
@@ -422,18 +424,18 @@ import IconFlipVertical from './icons/flip-vertical.vue';
 import IconVolumeMuted from './icons/volume-muted.vue';
 import IconVolume from './icons/volume.vue';
 
-import IconFile from './icons/file.vue';
-import IconPenTool from './icons/pen-tool.vue';
-import IconClipboardCheck from './icons/clipboard-check.vue';
 import IconBadge from './icons/badge.vue';
 import IconCalculator from './icons/calculator.vue';
+import IconClipboardCheck from './icons/clipboard-check.vue';
+import IconFile from './icons/file.vue';
+import IconPenTool from './icons/pen-tool.vue';
 import IconWebsitesUpgradeToAddPage from './icons/websites/upgrade-to-add-page.vue';
 import IconWebsitesUpgradeToContactForm from './icons/websites/upgrade-to-contact-form.vue';
-import IconWebsitesUpgradeToRemoveWatermark from './icons/websites/upgrade-to-remove-watermark.vue';
+import IconWebsitesUpgradeToGoogleAd from './icons/websites/upgrade-to-google-ad.vue';
+import IconWebsitesUpgradeToMaps from './icons/websites/upgrade-to-maps.vue';
 import IconWebsitesUpgradeToPublish from './icons/websites/upgrade-to-publish.vue';
+import IconWebsitesUpgradeToRemoveWatermark from './icons/websites/upgrade-to-remove-watermark.vue';
 import IconWebsitesUpgradeToVideos from './icons/websites/upgrade-to-videos.vue';
-import IconWebsitesUpgradeToMaps from './icons/websites/upgrade-to-maps.vue';
-import IconWebsitesUpgradeToGoogleAd from './icons/websites/upgrade-to-google-ad.vue';
 
 import IconGroup from './icons/group.vue';
 import IconPremiumContent from './icons/premium-content.vue';
@@ -506,6 +508,7 @@ export default {
     IconColumn2,
     IconColumn3,
     IconColumn4,
+    IconCrownAlt,
     IconCopy,
     IconDelete,
     IconDesigns,
@@ -612,6 +615,7 @@ export default {
     IconDisplayStyleContact5,
     IconDisplayStyleContact6,
     IconLetterheadFilled,
+    IconCrown,
     IconLink,
     IconLocation,
     IconLock,

package/src/atoms/components/Icon/icons/crown-alt.vue

@@ -0,0 +1,5 @@
+<template>
+  <path
+    d="M12.55 12.125C12.6521 12.125 12.7323 12.1536 12.7906 12.2109C12.8635 12.2826 12.9 12.3685 12.9 12.4688V13.1562C12.9 13.2565 12.8635 13.3353 12.7906 13.3926C12.7323 13.4642 12.6521 13.5 12.55 13.5H3.45C3.34792 13.5 3.26042 13.4642 3.1875 13.3926C3.12917 13.3353 3.1 13.2565 3.1 13.1562V12.4688C3.1 12.3685 3.12917 12.2826 3.1875 12.2109C3.26042 12.1536 3.34792 12.125 3.45 12.125H12.55ZM13.2063 5.55078C13.4104 5.35026 13.6583 5.25 13.95 5.25C14.2417 5.25 14.4896 5.35026 14.6938 5.55078C14.8979 5.7513 15 5.99479 15 6.28125C15 6.56771 14.8979 6.8112 14.6938 7.01172C14.4896 7.21224 14.2417 7.3125 13.95 7.3125C13.9062 7.3125 13.8479 7.30534 13.775 7.29102L12.2 11.4375H3.8L2.225 7.29102C2.15208 7.30534 2.09375 7.3125 2.05 7.3125C1.75833 7.3125 1.51042 7.21224 1.30625 7.01172C1.10208 6.8112 1 6.56771 1 6.28125C1 5.99479 1.10208 5.7513 1.30625 5.55078C1.51042 5.35026 1.75833 5.25 2.05 5.25C2.34167 5.25 2.58958 5.35026 2.79375 5.55078C2.99792 5.7513 3.1 5.99479 3.1 6.28125C3.1 6.42448 3.07083 6.56771 3.0125 6.71094L4.5875 7.63477C4.74792 7.73503 4.92292 7.76367 5.1125 7.7207C5.31667 7.66341 5.4625 7.55599 5.55 7.39844L7.34375 4.32617C7.08125 4.11133 6.95 3.84635 6.95 3.53125C6.95 3.24479 7.05208 3.0013 7.25625 2.80078C7.46042 2.60026 7.70833 2.5 8 2.5C8.29167 2.5 8.53958 2.60026 8.74375 2.80078C8.94792 3.0013 9.05 3.24479 9.05 3.53125C9.05 3.84635 8.91875 4.11133 8.65625 4.32617L10.45 7.39844C10.5375 7.55599 10.676 7.66341 10.8656 7.7207C11.0552 7.76367 11.2375 7.73503 11.4125 7.63477L12.9875 6.71094C12.9292 6.56771 12.9 6.42448 12.9 6.28125C12.9 5.99479 13.0021 5.7513 13.2063 5.55078Z"
+  />
+</template>

package/src/atoms/components/Icon/icons/crown.vue

@@ -0,0 +1,6 @@
+<template>
+  <path
+    d="M12.55 12.125C12.6521 12.125 12.7323 12.1536 12.7906 12.2109C12.8635 12.2826 12.9 12.3685 12.9 12.4688V13.1562C12.9 13.2565 12.8635 13.3353 12.7906 13.3926C12.7323 13.4642 12.6521 13.5 12.55 13.5H3.45C3.34792 13.5 3.26042 13.4642 3.1875 13.3926C3.12917 13.3353 3.1 13.2565 3.1 13.1562V12.4688C3.1 12.3685 3.12917 12.2826 3.1875 12.2109C3.26042 12.1536 3.34792 12.125 3.45 12.125H12.55ZM13.2063 5.55078C13.4104 5.35026 13.6583 5.25 13.95 5.25C14.2417 5.25 14.4896 5.35026 14.6938 5.55078C14.8979 5.7513 15 5.99479 15 6.28125C15 6.56771 14.8979 6.8112 14.6938 7.01172C14.4896 7.21224 14.2417 7.3125 13.95 7.3125C13.9062 7.3125 13.8479 7.30534 13.775 7.29102L12.2 11.4375H3.8L2.225 7.29102C2.15208 7.30534 2.09375 7.3125 2.05 7.3125C1.75833 7.3125 1.51042 7.21224 1.30625 7.01172C1.10208 6.8112 1 6.56771 1 6.28125C1 5.99479 1.10208 5.7513 1.30625 5.55078C1.51042 5.35026 1.75833 5.25 2.05 5.25C2.34167 5.25 2.58958 5.35026 2.79375 5.55078C2.99792 5.7513 3.1 5.99479 3.1 6.28125C3.1 6.42448 3.07083 6.56771 3.0125 6.71094L4.5875 7.63477C4.74792 7.73503 4.92292 7.76367 5.1125 7.7207C5.31667 7.66341 5.4625 7.55599 5.55 7.39844L7.34375 4.32617C7.08125 4.11133 6.95 3.84635 6.95 3.53125C6.95 3.24479 7.05208 3.0013 7.25625 2.80078C7.46042 2.60026 7.70833 2.5 8 2.5C8.29167 2.5 8.53958 2.60026 8.74375 2.80078C8.94792 3.0013 9.05 3.24479 9.05 3.53125C9.05 3.84635 8.91875 4.11133 8.65625 4.32617L10.45 7.39844C10.5375 7.55599 10.676 7.66341 10.8656 7.7207C11.0552 7.76367 11.2375 7.73503 11.4125 7.63477L12.9875 6.71094C12.9292 6.56771 12.9 6.42448 12.9 6.28125C12.9 5.99479 13.0021 5.7513 13.2063 5.55078Z"
+    fill="#E3A008"
+  />
+</template>

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

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

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

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

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