@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.3

package/src/components/app-track-button/index.vue

@@ -0,0 +1,98 @@
+<script lang="ts">
+export default {
+  name: 'MaAppTrackButton',
+};
+</script>
+<script setup lang="ts">
+import { computed } from "vue";
+import MaRadio from "../radio/index.vue";
+import MaIcon from "../icon/index.vue";
+
+export interface MaAppTrackButtonProps {
+    checked?: boolean;
+    appIcon: string;
+    appName: string;
+    appCategory?: string;
+    disabled?: boolean;
+    multiple?: boolean;
+    loading?: boolean;
+}
+
+const props = withDefaults(defineProps<MaAppTrackButtonProps>(), {
+    multiple: false,
+    disabled: false,
+    checked: false,
+    loading: false,
+});
+
+const emits = defineEmits(["update:checked", "change"]);
+
+const handleClick = (event: Event) => {
+    event.preventDefault();
+    emits("change", !props.checked);
+    emits("update:checked", !props.checked);
+}
+
+const classNames = computed(() => [
+    'ma-app-track-button',
+    {
+        'ma-app-track-button--disabled': props.disabled || props.loading
+    },
+    {
+        'ma-app-track-button--checked': props.checked
+    },
+    {
+        'ma-app-track-button--loading': props.loading
+    }
+]);
+
+</script>
+<template>
+    <button
+        :class="classNames"
+        role="switch"
+        :aria-checked="props.checked"
+        :disabled="props.disabled"
+        v-bind="$attrs"
+        @click="handleClick"
+    >
+        <img
+            :src="props.appIcon"
+            :alt="props.appName"
+            width="40"
+            height="40"
+        />
+        <span class="ma-app-track-button__text">
+            <span class="ma-app-track-button__text__title">
+                {{ props.appName }}
+            </span>
+            <span
+                v-if="props.appCategory"
+                class="ma-app-track-button__text__category"
+            >
+                {{ props?.appCategory }}
+            </span>
+        </span>
+       <span class="ma-app-track-button__check">
+            <transition name="fade" mode="out-in">
+                <ma-icon
+                    v-if="props.loading"
+                    name="loader"
+                    size="xs"
+                    spin
+                />
+                <ma-radio
+                    v-else-if="!props.multiple || props.checked"
+                    :checked="props.checked"
+                    type="check"
+                />
+                <ma-icon
+                    v-else
+                    name="add-circle"
+                    size="xs"
+                />
+            </transition>
+       </span>
+    </button>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/app-track-button/stories/constants.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import MaAppTrackButton from '../index.vue';
+import { ref } from 'vue';
+
+export const baseConfig: Meta = {
+    component: MaAppTrackButton,
+    parameters: {
+        docs: {
+            description: {
+                component: 'Figma Designs <a href="https://www.figma.com/file/DsHcDI5STs38ITpqhr63Rp/Foundation-%26-Onboarding-Flow_DEV?node-id=84%3A68976&t=OOfwoBxKDFdU94Ue-1" target="_blank">here!</a>',
+            },
+        },
+    },
+    argTypes: {
+        checked: {
+            control: { type: 'boolean' },
+            description: 'It can be used that <b>v-model:checked</b> or regular <b>checked</b> prop.',
+        },
+        appIcon: {
+            description: 'App logo url.',
+        },
+        multiple: {
+            control: { type: 'boolean' },
+            description: 'it specifies plus button or checkbox display.',
+        },
+        change: {
+            type: 'function',
+            description: 'The callback function is whether the checkbox is selected.'
+        },
+        'update:checked': {
+            type: 'function',
+            description: 'The callback function that is triggered when the state changes.'
+        }
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaAppTrackButton },
+    setup() {
+
+        const checked = ref(false);
+
+        return { args, checked };
+
+    },
+    template: `<ma-app-track-button v-model:checked="checked" v-bind="args" />`,
+});

package/src/components/app-track-button/stories/default.stories.ts

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template } from './constants';
+
+import MaAppTrackButton from '../index.vue';
+
+const meta: Meta<typeof MaAppTrackButton> = {
+  title: 'Advanced/MaAppTrackButton',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaAppTrackButton>;
+
+export const Default: Story = Template.bind({});
+Default.args = {
+  appIcon:
+    'https://is2-ssl.mzstatic.com/image/thumb/Purple116/v4/d6/38/28/d6382878-36fe-bcdc-d5c2-b74289a73bc3/AppIcon-0-1x_U007emarketing-0-10-0-85-220.png/60x60.png',
+  appName: 'App Name',
+  appCategory: 'App Category',
+};
+
+export const Multiple: Story = Template.bind({});
+Multiple.args = {
+  appIcon:
+    'https://is2-ssl.mzstatic.com/image/thumb/Purple116/v4/d6/38/28/d6382878-36fe-bcdc-d5c2-b74289a73bc3/AppIcon-0-1x_U007emarketing-0-10-0-85-220.png/60x60.png',
+  appName: 'App Name',
+  appCategory: 'App Category',
+  multiple: true,
+};
+
+export const Single: Story = Template.bind({});
+Single.args = {
+  appIcon:
+    'https://is2-ssl.mzstatic.com/image/thumb/Purple116/v4/d6/38/28/d6382878-36fe-bcdc-d5c2-b74289a73bc3/AppIcon-0-1x_U007emarketing-0-10-0-85-220.png/60x60.png',
+  appName: 'App Name',
+  appCategory: 'App Category',
+};
+
+export const Disabled: Story = Template.bind({});
+Disabled.args = {
+  appIcon:
+    'https://is2-ssl.mzstatic.com/image/thumb/Purple116/v4/d6/38/28/d6382878-36fe-bcdc-d5c2-b74289a73bc3/AppIcon-0-1x_U007emarketing-0-10-0-85-220.png/60x60.png',
+  appName: 'App Name',
+  appCategory: 'App Category',
+  disabled: true,
+};
+
+export const TextOverflow: Story = Template.bind({});
+TextOverflow.args = {
+  appIcon:
+    'https://is2-ssl.mzstatic.com/image/thumb/Purple116/v4/d6/38/28/d6382878-36fe-bcdc-d5c2-b74289a73bc3/AppIcon-0-1x_U007emarketing-0-10-0-85-220.png/60x60.png',
+  appName: 'BetterMe: Health Coaching',
+  appCategory: 'Very Long App Category',
+};
+
+export const Loading: Story = Template.bind({});
+Loading.args = {
+  appIcon:
+    'https://is2-ssl.mzstatic.com/image/thumb/Purple116/v4/d6/38/28/d6382878-36fe-bcdc-d5c2-b74289a73bc3/AppIcon-0-1x_U007emarketing-0-10-0-85-220.png/60x60.png',
+  appName: 'App Name',
+  appCategory: 'App Category',
+  loading: true,
+};

package/src/components/avatar/avatar.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MaAvatar from './index.vue';
+import MaIcon from '@/components/icon/index.vue';
+
+describe('Ma Avatar Test Group', () => {
+    it('renders with default props', () => {
+        const wrapper = mount(MaAvatar);
+        expect(wrapper.classes()).toContain('ak-avatar--large');
+        expect(wrapper.classes()).toContain('ak-avatar--indigo');
+        expect(wrapper.find('.avatar-text').exists()).toBe(false);
+        expect(wrapper.findComponent(MaIcon).exists()).toBe(true);
+    });
+
+    it('renders with avatarText and size small', () => {
+        const wrapper = mount(MaAvatar, {
+            props: {
+                avatarText: 'test',
+                size: 'small',
+            },
+        });
+        expect(wrapper.classes()).toContain('ak-avatar--small');
+        expect(wrapper.find('.avatar-text').text()).toBe('T');
+        expect(wrapper.find('#placeholderIcon').exists()).toBe(false);
+    });
+
+    it('renders with avatarText and size large', () => {
+        const wrapper = mount(MaAvatar, {
+            props: {
+                avatarText: 'test',
+                size: 'large',
+            },
+        });
+        expect(wrapper.classes()).toContain('ak-avatar--large');
+        expect(wrapper.find('.avatar-text').text()).toBe('TE');
+        expect(wrapper.find('#placeholderIcon').exists()).toBe(false);
+    });
+
+    it('renders with custom color', () => {
+        const wrapper = mount(MaAvatar, {
+            props: {
+                color: 'red',
+            },
+        });
+        expect(wrapper.classes()).toContain('ak-avatar--red');
+    });
+});

package/src/components/avatar/index.vue

@@ -0,0 +1,100 @@
+<script lang="ts">
+export default {
+    name: 'MaAvatar',
+};
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { MaAvatarPropSize, MaAvatarPropColor, MaAvatarPropColors } from './types';
+
+import MaIcon from '@/components/icon/index.vue';
+
+export interface MaAvatarProps {
+    size?: MaAvatarPropSize;
+    avatarText?: string; // display text for avatar
+    color?: MaAvatarPropColor; // color of avatar
+}
+
+const props = withDefaults(defineProps<MaAvatarProps>(), {
+    size: 'large',
+});
+
+
+/**
+ * The `avatarText` computed property determines the text to display in the avatar.
+ * - If `props.avatarText` is empty, it returns an empty string.
+ * - If `props.avatarText` is not empty, it returns the first letter of `props.avatarText` in uppercase.
+ * - If `props.size` is small, it returns the first letter of `props.avatarText` in uppercase.
+ * - If `props.size` is not small, it returns the first two letters of `props.avatarText` in uppercase.
+ */
+const avatarText = computed(() => {
+    if (!props.avatarText) return '';
+
+    const smallSizes: MaAvatarPropSize[] = ['x-small', 'small', 'medium'];
+    if (smallSizes.includes(props.size)) {
+        return props.avatarText.charAt(0).toUpperCase();
+    } else {
+        return props.avatarText.slice(0, 2).toUpperCase();
+    }
+});
+
+const avatarClass = computed(() => {
+    return  [
+        'ak-avatar',
+        `ak-avatar--${props.size}`,
+        `ak-avatar--${avatarColor.value}`,
+        {
+            'ak-avatar--text': props.avatarText,
+        },
+        {
+            'ak-avatar--default': !props.avatarText,
+        },
+    ];
+});
+
+/**
+ * The `avatarColor` computed property determines the color of the avatar.
+ * - If `props.color` is set, it returns `props.color`.
+ * - If `props.avatarText` is set, it returns a color based on the first letter of `props.avatarText`.
+ * - If `props.avatarText` is not set, it returns 'indigo'.
+ * - The color is determined by the index of the first letter of `props.avatarText` in the alphabet.
+ * - If the index is out of bounds, it returns 'indigo'.
+ */
+const avatarColor = computed(() => {
+    if (props.color) return props.color;
+
+    if (!props.avatarText) return 'indigo';
+
+    const firstLetter = props.avatarText[0].toLowerCase();
+    const alphabetIndex = firstLetter.charCodeAt(0) - 'a'.charCodeAt(0);
+
+    if (alphabetIndex < 0 || alphabetIndex >= 26) {
+        return 'indigo';
+    }
+
+    const colorIndex = alphabetIndex % MaAvatarPropColors.length;
+    return MaAvatarPropColors[colorIndex];
+});
+</script>
+
+<template>
+  <div
+    :class="avatarClass"
+  >
+    <span
+      v-if="props.avatarText"
+      class="avatar-text"
+    >
+      {{ avatarText }}
+    </span>
+    <ma-icon
+      v-else
+      id="placeholderIcon"
+      name="user-avatar"
+      class="default-icon"
+    />
+  </div>
+</template>
+
+<style lang="scss" src="./styles.scss"></style>

package/src/components/avatar/stories/constants.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import {
+    MaAvatarPropSizes,
+    MaAvatarPropColors,
+} from '../types';
+import MaAvatar from '../index.vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    components: { MaAvatar },
+});
+
+export const profileBaseConfig: Meta<typeof MaAvatar> = {
+    component: MaAvatar,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p><b>MaAvatarProfilePhoto</b> Component</p><p>Figma Design is <a href="https://www.figma.com/file/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?type=design&node-id=147-69285&mode=design&t=aBvbtEYTUihoKgNc-0" target="_blank">here!</a></p><p>
+                </p><p>The Avatar component is used to display a user's avatar with a background color determined by the first letter of the 'avatarText' prop. The component maps the first letter to a predefined set of colors. If the first letter is not an alphabet character or if 'avatarText' is empty, the component will use the 'color' prop as the background color.`,
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: { type: 'select' },
+            options: MaAvatarPropSizes,
+        },
+        color: {
+            control: { type: 'select' },
+            options: MaAvatarPropColors,
+        },
+    },
+};
+
+export const ProfilePhotoTemplate: StoryFn = (args: any) => ({
+    components: { MaAvatar },
+    setup() {
+        return { args };
+    },
+    template: `
+        <div class="flex items-center space-x-5 w-full">
+           <ma-avatar v-bind="args"  />
+        </div>
+  `,
+});

package/src/components/avatar/stories/default.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { profileBaseConfig, ProfilePhotoTemplate } from './constants';
+import MaAvatar from '@/components/avatar/index.vue';
+
+const meta: Meta<typeof MaAvatar> = {
+  title: 'Core/MaAvatar',
+  ...profileBaseConfig,
+};
+export default meta;
+
+type Story = StoryObj<typeof MaAvatar>;
+
+export const ProfilePhoto: Story = ProfilePhotoTemplate.bind({});
+ProfilePhoto.args = {};
+
+export const ProfilePhotoWithText: Story = ProfilePhotoTemplate.bind({});
+ProfilePhotoWithText.args = {
+  avatarText: 'CA',
+  size: 'large',
+};

package/src/components/avatar/styles.scss

@@ -0,0 +1,116 @@
+.ak-avatar {
+  @apply rounded-full relative;
+
+  &--text {
+    @apply flex items-center justify-center text-ellipsis;
+  }
+
+  .ma-icon {
+    @apply rounded-full;
+  }
+
+  $sizes: (
+    "x-small": (
+      "avatar": "w-5 h-5",
+      "icon": "w-5 h-5",
+      "text": "text-[11px] leading-3 max-w-5"
+    ),
+    "small": (
+      "avatar": "w-6 h-6",
+      "icon": "w-6 h-6",
+      "text": "text-xs max-w-6"
+    ),
+    "medium": (
+      "avatar": "w-8 h-8",
+      "icon": "w-8 h-8",
+      "text": "text-sm max-w-8"
+    ),
+    "large": (
+      "avatar": "w-10 h-10",
+      "icon": "w-10 h-10",
+      "text": "text-base max-w-10"
+    ),
+    "x-large": (
+      "avatar": "w-12 h-12",
+      "icon": "w-12 h-12",
+      "text": "text-lg leading-6 max-w-12"
+    ),
+    "2x-large": (
+      "avatar": "w-14 h-14",
+      "icon": "w-14 h-14",
+      "text": "text-lg leading-6 max-w-14"
+    ),
+    "3x-large": (
+      "avatar": "w-16 h-16",
+      "icon": "w-16 h-16",
+      "text": "text-2xl max-w-16"
+    ),
+    "4x-large": (
+      "avatar": "w-[72px] h-[72px]",
+      "icon": "w-[72px] h-[72px]",
+      "text": "text-2xl max-w-[72px]"
+    ),
+    "5x-large": (
+      "avatar": "w-20 h-20",
+      "icon": "w-20 h-20",
+      "text": "text-2xl max-w-20"
+    )
+  );
+
+  $colors: (
+    "gray": (
+      "avatar": "bg-gray-100",
+      "text": "text-gray-900",
+      "icon": "text-gray-100"
+    ),
+    "yellow": (
+      "avatar": "bg-yellow-100",
+      "text": "text-orange-900",
+      "icon": "text-yellow-100"
+    ),
+    "indigo": (
+      "avatar": "bg-indigo-200",
+      "text": "text-blue-900",
+      "icon": "text-indigo-200"
+    ),
+    "blue": (
+      "avatar": "bg-blue-100",
+      "text": "text-blue-light-900",
+      "icon": "text-blue-light-100"
+    ),
+    "purple": (
+      "avatar": "bg-purple-100",
+      "text": "text-primary-purple-900",
+      "icon": "text-primary-purple-100"
+    ),
+    "red": (
+      "avatar": "bg-red-200",
+      "text": "text-red-900",
+      "icon": "text-red-200"
+    )
+  );
+
+  @each $size, $value in $sizes {
+    &--#{$size} {
+      @apply #{map-get($value, 'avatar')};
+      .default-icon {
+        @apply #{map-get($value, 'icon')};
+      }
+      .avatar-text {
+        @apply font-medium text-center mx-auto font-euclid overflow-hidden #{map-get($value, 'text')} text-ellipsis;
+      }
+    }
+  }
+
+  @each $color, $value in $colors {
+    &--#{$color} {
+      @apply #{map-get($value, 'avatar')};
+      .default-icon {
+        @apply #{map-get($value, 'icon')};
+      }
+      .avatar-text {
+        @apply #{map-get($value, 'text')};
+      }
+    }
+  }
+}

package/src/components/avatar/types.ts

@@ -0,0 +1,24 @@
+export const MaAvatarPropSizes = [
+    'x-small',
+    'small',
+    'medium',
+    'large',
+    'x-large',
+    '2x-large',
+    '3x-large',
+    '4x-large',
+    '5x-large',
+] as const;
+
+export type MaAvatarPropSize = (typeof MaAvatarPropSizes)[number];
+
+export const MaAvatarPropColors = [
+    'gray',
+    'yellow',
+    'indigo',
+    'blue',
+    'purple',
+    'red',
+] as const;
+
+export type MaAvatarPropColor = (typeof MaAvatarPropColors)[number];

package/src/components/badge/badge.test.ts

@@ -0,0 +1,97 @@
+import { DefineComponent } from 'vue';
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { MaBadgePropVariants, MaBadgePropSizes } from "./types";
+import { waitFor } from '@testing-library/vue';
+
+import MaBadge from './index.vue';
+
+const MaBadgeComponent = MaBadge as unknown as DefineComponent;
+
+describe('MaBadge Test Group', () => {
+    it('should mount component with default props ✔ ', async () => {
+        const wrapper = mount(MaBadgeComponent, {
+            props: {
+                type: 'primary',
+                variant: 'dark',
+                size: 'medium',
+                iconAlignment: 'left',
+            }
+        })
+        // Full check for classes
+        expect(wrapper.find('.ma-badge').exists()).toBeTruthy();
+        expect(wrapper.find('.ak-badge').exists()).toBeTruthy();
+        expect(wrapper.find('.ak-badge--dark--primary').exists()).toBeTruthy();
+        expect(wrapper.find('.ak-badge--medium').exists()).toBeTruthy();
+
+        wrapper.unmount();
+    });
+
+    it('should mount component with default props and icon alignment right ✔ ', async () => {
+        const wrapper = mount(MaBadgeComponent, {
+            props: {
+                iconAlignment: 'right',
+                icon: 'layer',
+            }
+        })
+        // Full check
+        expect(wrapper.find('.ma-badge').exists()).toBeTruthy();
+        expect(wrapper.find('.ak-badge').exists()).toBeTruthy();
+        expect(wrapper.find('.ak-badge--dark--primary').exists()).toBeTruthy();
+        expect(wrapper.find('.ak-badge--medium').exists()).toBeTruthy();
+        expect(wrapper.find('.ak-badge--medium--icon-right').exists()).toBeTruthy();
+
+        wrapper.unmount();
+    });
+
+    it.each(MaBadgePropVariants)('should render "%s" color  ✔ ', async (variantType) => {
+        const wrapper = mount(MaBadgeComponent, {
+            props: {
+                variant: variantType,
+            },
+        });
+        // check color
+        await waitFor(() => {
+            expect(wrapper.find(`.ak-badge--${variantType}--primary`).exists()).toBeTruthy();
+        });
+        wrapper.unmount();
+    });
+
+    it('should render with secondary prop ✔ ', async () => {
+        const wrapper = mount(MaBadgeComponent, {
+            props: {
+                type: 'secondary',
+            },
+        });
+        await waitFor(() => {
+            // check type (should be secondary)
+            expect(wrapper.find(`.ak-badge--dark--secondary`).exists()).toBeTruthy();
+        });
+        wrapper.unmount();
+    });
+
+    it.each(MaBadgePropSizes)('should render "%s" size  ✔ ', async (size) => {
+        const wrapper = mount(MaBadgeComponent, {
+            props: {
+                size: size,
+            },
+        });
+        await waitFor(() => {
+            // check size
+            expect(wrapper.find(`.ak-badge--${size}`).exists()).toBeTruthy();
+        });
+        wrapper.unmount();
+    });
+
+    it('should render with an icon ✔ ', async () => {
+        const wrapper = mount(MaBadgeComponent, {
+            props: {
+                icon: 'layer',
+            },
+        });
+        await waitFor(() => {
+            expect(wrapper.find(`svg.ma-icon`).exists()).toBeTruthy();
+        });
+        wrapper.unmount();
+    });
+});