@designcrowd/fe-shared-lib 1.5.2 → 1.5.3-MP-4628-add-missing-icons

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

@@ -206,6 +206,8 @@ export const IconSample = () => {
           { name: 'question' },
           { name: 'reload' },
           { name: 'reorderable' },
+          { name: 'resize' },
+          { name: 'media' },
           { name: 'search' },
           { name: 'secure' },
           { name: 'send' },

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

@@ -253,6 +253,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 IconSearch from './icons/search.vue';
 import IconSecure from './icons/secure.vue';
@@ -612,6 +614,8 @@ export default {
     IconQuote,
     IconReload,
     IconReorderable,
+    IconResize,
+    IconMedia,
     IconRequestPayment,
     IconShop,
     IconSearch,

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

@@ -0,0 +1,3 @@
+<template>
+    <path d="M14.3 2C14.4896 2 14.65 2.07292 14.7813 2.21875C14.9271 2.35 15 2.51042 15 2.7V9.7C15 9.88958 14.9271 10.0573 14.7813 10.2031C14.65 10.3344 14.4896 10.4 14.3 10.4H11.5V3.4H7.3V4.8H3.8V2.7C3.8 2.51042 3.86563 2.35 3.99688 2.21875C4.14271 2.07292 4.31042 2 4.5 2H14.3ZM6.075 4.25313V3.59688C6.075 3.46563 6.00938 3.4 5.87813 3.4H5.22188C5.09063 3.4 5.025 3.46563 5.025 3.59688V4.25313C5.025 4.38438 5.09063 4.45 5.22188 4.45H5.87813C6.00938 4.45 6.075 4.38438 6.075 4.25313ZM13.775 8.80313V8.14688C13.775 8.01563 13.7094 7.95 13.5781 7.95H12.9219C12.7906 7.95 12.725 8.01563 12.725 8.14688V8.80313C12.725 8.93438 12.7906 9 12.9219 9H13.5781C13.7094 9 13.775 8.93438 13.775 8.80313ZM13.775 6.52813V5.87188C13.775 5.74063 13.7094 5.675 13.5781 5.675H12.9219C12.7906 5.675 12.725 5.74063 12.725 5.87188V6.52813C12.725 6.65938 12.7906 6.725 12.9219 6.725H13.5781C13.7094 6.725 13.775 6.65938 13.775 6.52813ZM13.775 4.25313V3.59688C13.775 3.46563 13.7094 3.4 13.5781 3.4H12.9219C12.7906 3.4 12.725 3.46563 12.725 3.59688V4.25313C12.725 4.38438 12.7906 4.45 12.9219 4.45H13.5781C13.7094 4.45 13.775 4.38438 13.775 4.25313ZM10.1 5.5C10.2896 5.5 10.45 5.57292 10.5813 5.71875C10.7271 5.85 10.8 6.01042 10.8 6.2V12.5C10.8 12.6896 10.7271 12.85 10.5813 12.9813C10.45 13.1271 10.2896 13.2 10.1 13.2H1.7C1.51042 13.2 1.34271 13.1271 1.19688 12.9813C1.06563 12.85 1 12.6896 1 12.5V6.2C1 6.01042 1.06563 5.85 1.19688 5.71875C1.34271 5.57292 1.51042 5.5 1.7 5.5H10.1ZM3.58125 7.11875C3.45 6.97292 3.28958 6.9 3.1 6.9C2.91042 6.9 2.74271 6.97292 2.59688 7.11875C2.46563 7.25 2.4 7.41042 2.4 7.6C2.4 7.78958 2.46563 7.95729 2.59688 8.10313C2.74271 8.23438 2.91042 8.3 3.1 8.3C3.28958 8.3 3.45 8.23438 3.58125 8.10313C3.72708 7.95729 3.8 7.78958 3.8 7.6C3.8 7.41042 3.72708 7.25 3.58125 7.11875ZM9.4 11.8V9.7L7.3 7.6L4.5 10.4L3.8 9.7L2.4 11.1V11.8H9.4Z" />
+</template>

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

@@ -0,0 +1,6 @@
+<template>
+  <g fill="none">
+    <rect x="1.75" y="1.75" width="12.5" height="12.5" rx="1.25" stroke="currentColor" stroke-width="1.5"/>
+    <path d="M9 7.75H14.25V13C14.25 13.6904 13.6904 14.25 13 14.25H7.75V9C7.75 8.30964 8.30964 7.75 9 7.75Z" stroke="currentColor" stroke-width="1.5"/>
+  </g>
+</template>

package/src/atoms/components/PromoCard/PromoCard.stories.ts

@@ -0,0 +1,263 @@
+import PromoCard from './PromoCard.vue';
+
+export default {
+  title: 'Components/PromoCard',
+  component: PromoCard,
+};
+
+export const Standard = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Special Offer',
+    description: 'Get 20% off your next purchase. Limited time offer!',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/legalzoom-symbol.svg',
+    altText: 'Promotional image',
+    buttonLabel: 'Learn More',
+    horizontalLayout: false,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const HorizontalLayout = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Premium Package',
+    description: 'Upgrade to premium and unlock exclusive features today.',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Premium package image',
+    buttonLabel: 'Upgrade Now',
+    horizontalLayout: true,
+    scaleImageDown: false,
+    imageWidthFull: false,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const ImageOnTop = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Mobile Friendly',
+    description: 'This layout works great on mobile devices with the image displayed on top.',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Mobile friendly layout',
+    buttonLabel: 'Try It',
+    horizontalLayout: false,
+    scaleImageDown: false,
+    imageWidthFull: false,
+    shouldShowImageOnTop: true,
+  },
+};
+
+export const ScaledDownImage = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Logo Showcase',
+    description: 'Display your logo with proper spacing and scaling.',
+    imageUrl: 'https://via.placeholder.com/120x120',
+    altText: 'Logo showcase',
+    buttonLabel: 'View More',
+    horizontalLayout: false,
+    scaleImageDown: true,
+    imageWidthFull: false,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const FullWidthImage = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <PromoCard
+          v-bind="args"
+          @button-clicked="handleButtonClick"
+        />
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {
+    title: 'Full Width Banner',
+    description: 'Images that stretch to fill the available space.',
+    imageUrl: 'https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png',
+    altText: 'Full width banner',
+    buttonLabel: 'Explore',
+    horizontalLayout: false,
+    scaleImageDown: false,
+    imageWidthFull: true,
+    shouldShowImageOnTop: false,
+  },
+};
+
+export const AllOptions = {
+  render: (args) => {
+    return {
+      components: {
+        PromoCard,
+      },
+      setup() {
+        return { args };
+      },
+      template: `
+        <div class="tw-space-y-4">
+          <div>
+            <h3 class="tw-mb-2 tw-font-bold">Standard Layout</h3>
+            <PromoCard
+              title="Standard Promo"
+              description="This is the default vertical layout with image on the left."
+              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
+              altText="Standard layout"
+              buttonLabel="Click Me"
+              @button-clicked="handleButtonClick"
+            />
+          </div>
+          
+          <div>
+            <h3 class="tw-mb-2 tw-font-bold">Horizontal Layout</h3>
+            <PromoCard
+              title="Horizontal Promo"
+              description="This layout is better for desktop with content side by side."
+              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
+              altText="Horizontal layout"
+              buttonLabel="Click Me"
+              :horizontal-layout="true"
+              @button-clicked="handleButtonClick"
+            />
+          </div>
+          
+          <div>
+            <h3 class="tw-mb-2 tw-font-bold">Image On Top</h3>
+            <PromoCard
+              title="Mobile Optimized"
+              description="Perfect for mobile views with image stacked on top."
+              imageUrl="https://bcassetcdn.com/assets/images/promo/brandpage-design-support.png"
+              altText="Image on top"
+              buttonLabel="Click Me"
+              :should-show-image-on-top="true"
+              @button-clicked="handleButtonClick"
+            />
+          </div>
+        </div>
+      `,
+      methods: {
+        handleButtonClick() {
+          console.log('Button clicked!');
+        },
+      },
+    };
+  },
+  args: {},
+};
+
+Standard.story = {
+  name: 'PromoCard - Standard',
+};
+
+HorizontalLayout.story = {
+  name: 'PromoCard - Horizontal Layout',
+};
+
+ImageOnTop.story = {
+  name: 'PromoCard - Image On Top',
+};
+
+ScaledDownImage.story = {
+  name: 'PromoCard - Scaled Down Image',
+};
+
+FullWidthImage.story = {
+  name: 'PromoCard - Full Width Image',
+};
+
+AllOptions.story = {
+  name: 'PromoCard - All Variants',
+};

package/src/atoms/components/PromoCard/PromoCard.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="tw-flex" :class="shouldShowImageOnTop ? 'tw-flex-col' : 'tw-flex-row'">
+    <div
+      class="tw-flex tw-justify-center tw-items-center tw-bg-grayscale-400 tw-w-60 tw-p-1 dcom-rounded-tl dcom-rounded-bl"
+      :class="{
+        'tw-w-full tw-px-8 md:tw-px-12 lg:tw-px-20 tw-py-4': shouldShowImageOnTop,
+        'tw-px-4': !shouldShowImageOnTop,
+      }"
+    >
+      <img class="tw-w-full" :src="imageUrl" :alt="altText" />
+    </div>
+    <div
+      class="tw-flex tw-bg-white tw-w-full tw-p-4 tw-grow dcom-rounded-tr dcom-rounded-br tw-flex-col tw-justify-between"
+      :class="{
+        'sm:tw-flex-row sm:tw-items-center': horizontalLayout,
+      }"
+    >
+      <div class="tw-text-left tw-overflow-hidden tw-text-ellipsis tw-text-base" :class="lineClampStyle">
+        <div class="tw-font-bold tw-text-black tw-mb-0.5">
+          {{ title }}
+        </div>
+        <p>
+          {{ description }}
+        </p>
+      </div>
+      <Button
+        variant="primary"
+        size="small"
+        :full-width="fullwidthButton"
+        class="tw-text-left tw-mt-4"
+        :class="horizontalLayout ? 'tw-w-full tw-mr-2 sm:tw-mt-0 sm:tw-ml-2 sm:tw-w-auto' : ''"
+        :label="buttonLabel"
+        @on-click="buttonClicked"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, defineEmits } from 'vue';
+import { BREAKPOINTS } from '../../../experiences/mixins/mediaQueryMixin';
+import Button from '../Button/Button.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  imageUrl: { type: String, required: true },
+  altText: { type: String, default: '' },
+  buttonLabel: {
+    type: String,
+    required: true,
+  },
+  horizontalLayout: {
+    type: Boolean,
+    default: false,
+  },
+  shouldShowImageOnTop: {
+    type: Boolean,
+    default: false,
+  },
+  textLineClamp: {
+    type: Number,
+    default: 0, // 0 is infinite
+  },
+});
+
+const emits = defineEmits(['button-clicked']);
+const buttonClicked = () => emits('button-clicked');
+
+const lineClampStyle = computed(() => {
+  if (props.textLineClamp > 0) {
+    return `tw-line-clamp-${props.textLineClamp}`;
+  }
+  return 'tw-line-clamp-none';
+});
+
+const fullwidthButton = computed(() => !(props.horizontalLayout && window.innerWidth >= BREAKPOINTS.SMALL));
+</script>

package/tailwind.config.js

@@ -1,9 +1,9 @@
-const bcTheme = require("./src/themes/bc");
-const bpTheme = require("./src/themes/bp");
-const dcTheme = require("./src/themes/dc");
-const cdTheme = require("./src/themes/cd");
-const dcomTheme = require("./src/themes/dcom");
-const viewports = require("./src/viewports");
+const bcTheme = require('./src/themes/bc');
+const bpTheme = require('./src/themes/bp');
+const dcTheme = require('./src/themes/dc');
+const cdTheme = require('./src/themes/cd');
+const dcomTheme = require('./src/themes/dcom');
+const viewports = require('./src/viewports');
 
 const designSystemConfig = {
   themes: {
@@ -20,7 +20,7 @@ const theme = designSystemConfig.themes[process.env.tailwindTheme]; // use the e
 module.exports = {
   prefix: 'tw-',
   content: ['./src/**/components/**/*.vue'],
-  safelist: [{ pattern: /^!tw-p-/ }, { pattern: /^tw-overflow-y-auto$/ }],
+  safelist: [{ pattern: /^!tw-p-/ }, { pattern: /^tw-overflow-y-auto$/ }, { pattern: /^tw-line-clamp-/ }],
   theme: {
     ...theme,
     extend: {
@@ -34,4 +34,3 @@ module.exports = {
     preflight: true,
   },
 };
-

package/.storybook-static/assets/Auth-CV5AmoX8.css

@@ -1 +0,0 @@
-.email-input[data-v-bb7289b6]{background-image:url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);background-position:top 50% left .5rem}.password-input[data-v-bb7289b6]{background-image:url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-bb7289b6]{padding-left:2.5rem!important}.email-input[data-v-965d0268]{background-image:url(https://dcstatic.com/images/icons/forms/forms-email-58207f9a5c.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-965d0268]{padding-left:2.5rem!important}.password-input[data-v-da12bb42]{background-image:url(https://dcstatic.com/images/icons/forms/forms-password-ff538cd5e4.svg);background-position:top 50% left .5rem}.tw-pl-10-important[data-v-da12bb42]{padding-left:2.5rem!important}