@bobbykim/mcl-cards 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.2.0 (2024-02-27)
+
+
+### Features
+
+* **.storybook,mcl-cards:** add opengraph configuration, add mcl-cards components ([13a255c](https://github.com/bobbykim89/manguito-component-library/commit/13a255c26048ccc56ed837ebac0281ee23aaa03e))
+* **manguito-theme,mcl-cards,mcl-header,mcl-footer,mcl-carousel:** add vueuse as one of dependencies, update code to make them ssr friendly ([119a327](https://github.com/bobbykim89/manguito-component-library/commit/119a327adf1ca9866e6ac063bce5acd4790db612))
+* **mcl-card-d:** update gradient handling method ([4adcd5d](https://github.com/bobbykim89/manguito-component-library/commit/4adcd5d8522a761485ff09e3334ed3cd2bb50ac1))
+* **mcl-card-d:** update prop name, add story file ([1c8e5a1](https://github.com/bobbykim89/manguito-component-library/commit/1c8e5a1fde09070e5366155b0d899cbc5d5348a4))
+* **mcl-cards:** update prop name, add story files ([d3b4609](https://github.com/bobbykim89/manguito-component-library/commit/d3b460968bfd4cb8213e29b16da8f615477e4487))
+* **stories/*:** ran package:build to build type declaration, move deprecated story files into deprecated folder ([ffc487d](https://github.com/bobbykim89/manguito-component-library/commit/ffc487dbcc093be7a3ccfeae98c5e10e8372a0e3))
+* **stories:** add story for mcl-card-b ([7470f0d](https://github.com/bobbykim89/manguito-component-library/commit/7470f0ddee5b3ba3c9f5c37e52bd37f6a1a75202))

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2022 Bobby Kim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# @bobbykim/mcl-cards
+
+Add description
+
+## Demo
+
+[MCL Histoire Page](https://manguito-component-library.vercel.app/story/{%story-link%})
+
+## Install
+
+## Usage
+
+`import MclCards from "@bobbykim/mcl-cards"`;
+
+## Maintainer
+
+- **Bobby Kim** - _Initial work_
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](./LICENSE.md) file for details

package/index.d.ts

@@ -0,0 +1,6 @@
+import MclCardA from './lib/mcl-card-a/MclCardA.vue';
+import MclCardB from './lib/mcl-card-b/MclCardB.vue';
+import MclCardC from './lib/mcl-card-c/MclCardC.vue';
+import MclCardD from './lib/mcl-card-d/MclCardD.vue';
+export * from './lib/common/index.types';
+export { MclCardA, MclCardB, MclCardC, MclCardD };

package/index.js

@@ -0,0 +1,6 @@
+import MclCardA from './lib/mcl-card-a/MclCardA.vue';
+import MclCardB from './lib/mcl-card-b/MclCardB.vue';
+import MclCardC from './lib/mcl-card-c/MclCardC.vue';
+import MclCardD from './lib/mcl-card-d/MclCardD.vue';
+export * from './lib/common/index.types';
+export { MclCardA, MclCardB, MclCardC, MclCardD };

package/index.ts

@@ -0,0 +1,7 @@
+import MclCardA from './lib/mcl-card-a/MclCardA.vue'
+import MclCardB from './lib/mcl-card-b/MclCardB.vue'
+import MclCardC from './lib/mcl-card-c/MclCardC.vue'
+import MclCardD from './lib/mcl-card-d/MclCardD.vue'
+
+export * from './lib/common/index.types'
+export { MclCardA, MclCardB, MclCardC, MclCardD }

package/lib/common/index.types.d.ts

@@ -0,0 +1,7 @@
+import type { CtaTarget } from '@bobbykim/manguito-theme';
+export interface CardClickEvent {
+    event: Event;
+    title: string;
+    url: string;
+    target?: CtaTarget;
+}

package/lib/common/index.types.js

@@ -0,0 +1 @@
+export {};

package/lib/common/index.types.ts

@@ -0,0 +1,8 @@
+import type { CtaTarget } from '@bobbykim/manguito-theme'
+
+export interface CardClickEvent {
+  event: Event
+  title: string
+  url: string
+  target?: CtaTarget
+}

package/lib/mcl-card-a/MclCardA.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import type {
+  ColorPalette,
+  CrossOrigin,
+  CtaTarget,
+  HeadingSize,
+} from '@bobbykim/manguito-theme'
+import generateClass from '@bobbykim/manguito-theme'
+import type { CardClickEvent } from '../common/index.types'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    titleSize?: HeadingSize
+    titleColor?: ColorPalette
+    borderColor?: ColorPalette
+    bgColor?: ColorPalette
+    displayImage?: boolean
+    imageSource?: string
+    imageAlt?: string
+    imageCors?: CrossOrigin
+    displayCta?: boolean
+    ctaAsLink?: boolean
+    ctaText?: string
+    ctaColor?: ColorPalette
+    ctaLink?: string
+    ctaTarget?: CtaTarget
+    displayLabel?: boolean
+    labelText?: string
+    labelTextColor?: ColorPalette
+    labelColor?: ColorPalette
+    enlargeOnHover?: boolean
+    displayHighlight?: boolean
+    highlightColor?: ColorPalette
+    rounded?: boolean
+    displayShadow?: boolean
+  }>(),
+  {
+    titleSize: 'md',
+    titleColor: 'dark-3',
+    borderColor: 'light-3',
+    bgColor: 'light-1',
+    displayImage: true,
+    imageCors: 'anonymous',
+    displayCta: true,
+    ctaAsLink: true,
+    ctaColor: 'primary',
+    ctaLink: '#',
+    ctaTarget: '_self',
+    ctaText: 'cta text',
+    displayLabel: true,
+    labelText: 'Lorem ipsum',
+    labelTextColor: 'light-1',
+    labelColor: 'dark-4',
+    displayHighlight: true,
+    highlightColor: 'primary',
+    enlargeOnHover: false,
+    rounded: true,
+    displayShadow: true,
+  }
+)
+
+const emit = defineEmits(['card-click', 'card-btn-click'])
+
+const getBorderClass = (
+  border: ColorPalette,
+  bg: ColorPalette,
+  rounded: boolean,
+  enlarge: boolean,
+  shadow: boolean
+): string => {
+  /**
+   * @border - borderColor
+   * @bg - bgColor
+   * @rounded - rounded
+   * @enlarge - enlargeOnHover
+   * @shadow - displayShadow
+   */
+
+  const classArray = [
+    generateClass('BORDER', border),
+    generateClass('BGCOLOR', bg),
+  ]
+
+  if (rounded) {
+    classArray.push('rounded-md')
+  } else {
+    classArray.push('rounded-sm')
+  }
+  if (enlarge) {
+    classArray.push('hover:scale-105 transition ease-in duration-300')
+  }
+  if (shadow) {
+    classArray.push('drop-shadow-md')
+  }
+
+  return classArray.join(' ')
+}
+const getTitleClass = (
+  size: HeadingSize,
+  color: ColorPalette,
+  hl: boolean
+): string => {
+  /**
+   * @size - titleSize
+   * @color - titleColor
+   * @hl - displayHighlight
+   */
+
+  const classArray = [
+    generateClass('H3', size),
+    generateClass('TEXTCOLOR', color),
+  ]
+
+  if (hl) {
+    classArray.push('mb-2xs')
+  } else {
+    classArray.push('mb-xs')
+  }
+
+  return classArray.join(' ')
+}
+const getLabelClass = (tColor: ColorPalette, bColor: ColorPalette): string => {
+  /**
+   * @tColor - labelTextColor
+   * @bColor - labelColor
+   */
+  const classArray = [
+    generateClass('TEXTCOLOR', tColor),
+    generateClass('BGCOLOR', bColor),
+  ]
+  return classArray.join(' ')
+}
+const getCtaClass = (color: ColorPalette, round: boolean): string => {
+  /**
+   * @color - ctaColor
+   * @round - rounded
+   */
+  const classArray: string[] = [generateClass('BTNCOLOR', color)]
+
+  const lightColor: string[] = ['light-1', 'light-2', 'light-3', 'light-4']
+
+  let textColor = lightColor.includes(color) ? 'text-black' : 'text-white'
+
+  classArray.push(textColor)
+
+  if (round) {
+    classArray.push('btn-round')
+  }
+
+  return classArray.join(' ')
+}
+const handleButtonClick = (
+  e: Event,
+  title: string,
+  link: string,
+  target: CtaTarget = '_self',
+  btnLink: boolean
+): void => {
+  /**
+   * @title - title
+   * @link - ctaLink
+   * @target - ctaTarget
+   * @btnLink - ctaAsLink
+   */
+  const cardEvent: CardClickEvent = {
+    event: e,
+    title,
+    url: link,
+    target: target ? target : '_self',
+  }
+  !btnLink && e.preventDefault()
+  emit('card-btn-click', cardEvent)
+}
+const handleCardClick = (e: Event): void => {
+  const { title, ctaLink, ctaTarget } = props
+  const cardEvent: CardClickEvent = {
+    event: e,
+    title,
+    url: ctaLink,
+    target: ctaTarget ? ctaTarget : '_self',
+  }
+  emit('card-click', cardEvent)
+}
+</script>
+
+<template>
+  <div
+    class="overflow-hidden border max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer"
+    :class="
+      getBorderClass(
+        borderColor,
+        bgColor,
+        rounded,
+        enlargeOnHover,
+        displayShadow
+      )
+    "
+    @click="handleCardClick"
+  >
+    <div class="relative" v-if="displayImage">
+      <img
+        :src="imageSource"
+        :alt="imageAlt"
+        :crossorigin="imageCors"
+        class="object-cover object-top h-[220px] min-w-full"
+      />
+      <span
+        v-if="displayLabel"
+        class="py-3xs px-2xs ml-xs inline-block font-bold text-xs absolute bottom-0 translate-y-[50%]"
+        :class="getLabelClass(labelTextColor, labelColor)"
+        v-html="labelText"
+      ></span>
+    </div>
+    <div class="content-height flex flex-col justify-between">
+      <div class="min-h-[100px] p-0">
+        <div class="px-xs pt-sm">
+          <span
+            v-if="!displayImage && displayLabel"
+            class="py-3xs px-2xs mb-2xs inline-block font-bold text-xs"
+            :class="getLabelClass(labelTextColor, labelColor)"
+            v-html="labelText"
+          ></span>
+          <h3
+            :class="getTitleClass(titleSize, titleColor, displayHighlight)"
+            v-html="title"
+          ></h3>
+          <div
+            v-if="displayHighlight"
+            class="mb-xs h-3xs w-md"
+            :class="generateClass('BGCOLOR', highlightColor)"
+          ></div>
+          <div class="mb-sm cursor-default" @click.stop>
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+      <div class="pb-sm border-0 cursor-default" v-if="displayCta" @click.stop>
+        <div class="w-full px-xs">
+          <a
+            :href="ctaLink"
+            :target="ctaTarget"
+            class="btn btn-full"
+            :class="getCtaClass(ctaColor, rounded)"
+            @click="
+              handleButtonClick($event, title, ctaLink, ctaTarget, ctaAsLink)
+            "
+            >{{ ctaText }}</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content-height {
+  height: calc(100% - 200px);
+}
+</style>

package/lib/mcl-card-a/MclCardA.vue.d.ts

@@ -0,0 +1,149 @@
+import type { ColorPalette, CrossOrigin, CtaTarget, HeadingSize } from '@bobbykim/manguito-theme';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    title: string;
+    titleSize?: HeadingSize | undefined;
+    titleColor?: ColorPalette | undefined;
+    borderColor?: ColorPalette | undefined;
+    bgColor?: ColorPalette | undefined;
+    displayImage?: boolean | undefined;
+    imageSource?: string | undefined;
+    imageAlt?: string | undefined;
+    imageCors?: CrossOrigin | undefined;
+    displayCta?: boolean | undefined;
+    ctaAsLink?: boolean | undefined;
+    ctaText?: string | undefined;
+    ctaColor?: ColorPalette | undefined;
+    ctaLink?: string | undefined;
+    ctaTarget?: CtaTarget | undefined;
+    displayLabel?: boolean | undefined;
+    labelText?: string | undefined;
+    labelTextColor?: ColorPalette | undefined;
+    labelColor?: ColorPalette | undefined;
+    enlargeOnHover?: boolean | undefined;
+    displayHighlight?: boolean | undefined;
+    highlightColor?: ColorPalette | undefined;
+    rounded?: boolean | undefined;
+    displayShadow?: boolean | undefined;
+}>, {
+    titleSize: string;
+    titleColor: string;
+    borderColor: string;
+    bgColor: string;
+    displayImage: boolean;
+    imageCors: string;
+    displayCta: boolean;
+    ctaAsLink: boolean;
+    ctaColor: string;
+    ctaLink: string;
+    ctaTarget: string;
+    ctaText: string;
+    displayLabel: boolean;
+    labelText: string;
+    labelTextColor: string;
+    labelColor: string;
+    displayHighlight: boolean;
+    highlightColor: string;
+    enlargeOnHover: boolean;
+    rounded: boolean;
+    displayShadow: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "card-click": (...args: any[]) => void;
+    "card-btn-click": (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    title: string;
+    titleSize?: HeadingSize | undefined;
+    titleColor?: ColorPalette | undefined;
+    borderColor?: ColorPalette | undefined;
+    bgColor?: ColorPalette | undefined;
+    displayImage?: boolean | undefined;
+    imageSource?: string | undefined;
+    imageAlt?: string | undefined;
+    imageCors?: CrossOrigin | undefined;
+    displayCta?: boolean | undefined;
+    ctaAsLink?: boolean | undefined;
+    ctaText?: string | undefined;
+    ctaColor?: ColorPalette | undefined;
+    ctaLink?: string | undefined;
+    ctaTarget?: CtaTarget | undefined;
+    displayLabel?: boolean | undefined;
+    labelText?: string | undefined;
+    labelTextColor?: ColorPalette | undefined;
+    labelColor?: ColorPalette | undefined;
+    enlargeOnHover?: boolean | undefined;
+    displayHighlight?: boolean | undefined;
+    highlightColor?: ColorPalette | undefined;
+    rounded?: boolean | undefined;
+    displayShadow?: boolean | undefined;
+}>, {
+    titleSize: string;
+    titleColor: string;
+    borderColor: string;
+    bgColor: string;
+    displayImage: boolean;
+    imageCors: string;
+    displayCta: boolean;
+    ctaAsLink: boolean;
+    ctaColor: string;
+    ctaLink: string;
+    ctaTarget: string;
+    ctaText: string;
+    displayLabel: boolean;
+    labelText: string;
+    labelTextColor: string;
+    labelColor: string;
+    displayHighlight: boolean;
+    highlightColor: string;
+    enlargeOnHover: boolean;
+    rounded: boolean;
+    displayShadow: boolean;
+}>>> & {
+    "onCard-click"?: ((...args: any[]) => any) | undefined;
+    "onCard-btn-click"?: ((...args: any[]) => any) | undefined;
+}, {
+    titleColor: ColorPalette;
+    titleSize: HeadingSize;
+    borderColor: ColorPalette;
+    bgColor: ColorPalette;
+    displayImage: boolean;
+    imageCors: CrossOrigin;
+    displayCta: boolean;
+    ctaAsLink: boolean;
+    ctaText: string;
+    ctaColor: ColorPalette;
+    ctaLink: string;
+    ctaTarget: CtaTarget;
+    displayLabel: boolean;
+    labelText: string;
+    labelTextColor: ColorPalette;
+    labelColor: ColorPalette;
+    enlargeOnHover: boolean;
+    displayHighlight: boolean;
+    highlightColor: ColorPalette;
+    rounded: boolean;
+    displayShadow: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/mcl-card-b/MclCardB.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import type {
+  ColorPalette,
+  CrossOrigin,
+  CtaTarget,
+  HeadingSize,
+} from '@bobbykim/manguito-theme'
+import generateClass from '@bobbykim/manguito-theme'
+import type { CardClickEvent } from '../common/index.types'
+
+withDefaults(
+  defineProps<{
+    title: string
+    titleSize?: HeadingSize
+    titleColor?: ColorPalette
+    titleBlockColor?: ColorPalette
+    borderColor?: ColorPalette
+    imageSource?: string
+    imageAlt?: string
+    imageCors?: CrossOrigin
+    displayGrayScale?: boolean
+    ctaAsLink?: boolean
+    ctaLink?: string
+    ctaTarget?: CtaTarget
+    rounded?: boolean
+  }>(),
+  {
+    titleSize: 'md',
+    titleColor: 'light-1',
+    titleBlockColor: 'dark-4',
+    borderColor: 'light-3',
+    displayGrayScale: true,
+    imageCors: 'anonymous',
+    ctaAsLink: false,
+    ctaLink: '#',
+    ctaTarget: '_self',
+    rounded: false,
+  }
+)
+
+const emit = defineEmits(['card-click'])
+
+const getBorderClass = (bColor: ColorPalette, rounded: boolean): string => {
+  /**
+   * @bColor - borderColor
+   * @rounded - rounded
+   */
+  const classArray = [generateClass('BORDER', bColor)]
+  if (rounded) {
+    classArray.push('rounded-md')
+  } else {
+    classArray.push('rounded-sm')
+  }
+
+  return classArray.join(' ')
+}
+
+const handleHoverEffect = (dGray: boolean): string => {
+  /**
+   * @dgray - displayGrayScale
+   */
+  if (dGray) {
+    return '[@media(hover:hover)]:grayscale peer-hover:grayscale-0'
+  }
+  return ''
+}
+
+const handleTitleClass = (
+  tSize: HeadingSize,
+  tColor: ColorPalette,
+  tBgColor: ColorPalette
+): string => {
+  /**
+   * @tSize - titleSize
+   * @tColor - titleColor
+   * @tBgColor - titleBlockColor
+   */
+
+  const classArray = [
+    generateClass('H3', tSize),
+    generateClass('TEXTCOLOR', tColor),
+    generateClass('BGCOLOR', tBgColor),
+  ]
+
+  return classArray.join(' ')
+}
+
+const handleCardClick = (
+  e: Event,
+  title: string,
+  link: string,
+  target: CtaTarget = '_self',
+  ctaLink: boolean
+): void => {
+  /**
+   * @e - Event
+   * @title - title
+   * @link - ctaLink
+   * @target - ctaTarget
+   * @ctaLink - ctaAsLink
+   */
+  !ctaLink && e.preventDefault()
+  const cardEvent: CardClickEvent = {
+    event: e,
+    title,
+    url: link,
+    target: target ? target : '_self',
+  }
+  console.log(cardEvent)
+  emit('card-click', cardEvent)
+}
+</script>
+
+<template>
+  <div
+    class="relative max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer overflow-hidden border border-light-3"
+    :class="getBorderClass(borderColor, rounded)"
+  >
+    <a
+      :href="ctaLink"
+      :target="ctaTarget"
+      @click="handleCardClick($event, title, ctaLink, ctaTarget, ctaAsLink)"
+    >
+      <div
+        class="absolute z-[15] flex flex-col justify-end items-start inset-0 p-xs [@media(hover:hover)]:opacity-0 hover:opacity-100 peer transition-opacity duration-200"
+      >
+        <h3
+          v-html="title"
+          class="inline-block px-xs py-2xs mb-2xs pointer-events-none tracking-wide"
+          :class="handleTitleClass(titleSize, titleColor, titleBlockColor)"
+        ></h3>
+        <slot></slot>
+      </div>
+      <img
+        :src="imageSource"
+        :alt="imageAlt"
+        :crossorigin="imageCors"
+        class="relative z-10 object-cover aspect-[3/4] transition-all duration-200"
+        :class="handleHoverEffect(displayGrayScale)"
+      />
+    </a>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>