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

package/src/components/switch/index.vue

@@ -0,0 +1,142 @@
+<script lang="ts">
+export default {
+    name: 'MaSwitch',
+};
+</script>
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted, Ref, nextTick } from 'vue';
+import { SwitchType, MaSwitchOption } from './types';
+import { MaIcon } from '@/index';
+
+export interface MaSwitchProps {
+    active: string,
+    disabled?: boolean,
+    type?: SwitchType,
+    options: MaSwitchOption[],
+    loading?: boolean,
+}
+
+const props = withDefaults(defineProps<MaSwitchProps>(), {
+    type: 'secondary',
+    options: () => [] as MaSwitchOption[],
+    disabled: false,
+    loading: false,
+});
+
+const emits = defineEmits([
+    'click',
+    'change',
+    'update:active',
+]);
+
+const mask = ref();
+const switchButton: Ref<HTMLButtonElement> = ref();
+
+const resizeObserver = new ResizeObserver(() => setMask());
+
+const value = computed({
+    get(){
+        return props.active;
+    },
+    set(value){
+        emits('update:active', value);
+        emits('change', value);
+    },
+});
+
+const isDisabled = computed(() => props?.disabled || props?.loading);
+
+const classNames = computed(() => [
+    'ma-switch',
+    'ak-switch',
+    `ak-switch--${props.type}`,
+    {
+        'ak-switch--disabled': isDisabled.value,
+    },
+    {
+        'ak-switch--loading': props.loading,
+    },
+]);
+
+const setValue = (data: string) => {
+    if (isDisabled.value){
+        return;
+    }
+    value.value = data;
+};
+
+watch(
+    () => value.value,
+    () => {
+        setMask();
+    }
+);
+
+const setMask = async () => {
+    await nextTick();
+    const options = Array.from(switchButton.value.children).filter((_e) => !_e.classList.contains('mask')) as HTMLSpanElement[];
+    const activeElement = options.find((_e) => _e?.classList.contains('active'));
+    if (activeElement) {
+        mask.value.style.left = `${activeElement.offsetLeft}px`;
+        mask.value.style.width = `${activeElement.clientWidth}px`;
+    }
+};
+
+onMounted(() => {
+    resizeObserver.observe(switchButton.value);
+});
+
+onUnmounted(() => {
+    resizeObserver.disconnect();
+});
+
+</script>
+<template>
+  <button
+    v-bind="$attrs"
+    ref="switchButton"
+    :class="classNames"
+    type="button"
+    role="switch"
+    :disabled="isDisabled"
+  >
+    <span
+      v-for="option in props.options"
+      :key="option.value"
+      :class="{active: props.active === option.value}"
+      @click="setValue(option.value)"
+    >
+      <ma-icon
+        v-if="option?.icon"
+        size="xs"
+        :name="option.icon"
+      />
+      <span
+        v-if="option?.label"
+        class="text"
+      >
+        <slot
+          v-if="$slots.optionLabel"
+          name="optionLabel"
+          :label="option?.label"
+          :value="option.value"
+        />
+        <template v-else>
+          {{ option.label }}
+        </template>
+      </span>
+    </span>
+    <div
+      ref="mask"
+      class="mask"
+    />
+    <ma-icon
+      v-if="loading"
+      name="loader"
+      spin
+      size="xs"
+      class="ma-loading-icon"
+    />
+  </button>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { SwitchTypes } from '../types';
+import MaSwitch from '../index.vue';
+import vitestResults from '../../../../test-results.json';
+
+export const baseConfig: Meta<typeof MaSwitch> = {
+    component: MaSwitch,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p><b>ma-switch</b> component!</p><p>Figma Designs <a href="https://www.figma.com/file/DsHcDI5STs38ITpqhr63Rp/Foundation-%26-Onboarding-Flow_DEV?node-id=28%3A54022&t=PKDXuF8WQg91iA8l-1" target="_blank">here!</a></p>
+                `,
+            },
+        },
+        vitest: {
+            testFile: 'switch.test.ts',
+            testResults: vitestResults,
+        },
+    },
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: SwitchTypes,
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaSwitch },
+    setup() {
+        const handleChange = (active: string) => {
+            args.active = active;
+        };
+
+        return { args, handleChange };
+    },
+    template: `
+        <ma-switch
+            @change="handleChange"
+            v-bind="args"
+        />
+  `,
+});

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

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template } from './constants';
+
+import MaSwitch from '../index.vue';
+
+const meta: Meta<typeof MaSwitch> = {
+  title: 'Core/MaSwitch',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaSwitch>;
+
+export const Default: Story = Template.bind({});
+Default.args = {
+  active: 'android',
+  type: 'secondary',
+  options: [
+    {
+      icon: 'app-store-colorful',
+      value: 'apple',
+    },
+    {
+      icon: 'play-store-colorful',
+      value: 'android',
+    },
+  ],
+};
+
+export const Primary: Story = Template.bind({});
+Primary.args = {
+  active: 'list',
+  type: 'primary',
+  options: [
+    {
+      icon: 'list',
+      value: 'list',
+    },
+    {
+      icon: 'grid',
+      value: 'grid',
+    },
+  ],
+};
+
+export const Secondary: Story = Template.bind({});
+Secondary.args = {
+  active: 'grid',
+  type: 'secondary',
+  options: [
+    {
+      icon: 'list',
+      value: 'list',
+    },
+    {
+      icon: 'grid',
+      value: 'grid',
+    },
+  ],
+};
+
+export const PrimaryText: Story = Template.bind({});
+PrimaryText.args = {
+  active: 'monthly',
+  type: 'primary',
+  options: [
+    {
+      label: 'Monthly',
+      value: 'monthly',
+    },
+    {
+      label: 'Yearly (Save $396)',
+      value: 'yearly',
+    },
+  ],
+};
+
+export const SecondaryText: Story = Template.bind({});
+SecondaryText.args = {
+  active: 'monthly',
+  type: 'secondary',
+  options: [
+    {
+      label: 'Monthly',
+      value: 'monthly',
+    },
+    {
+      label: 'Yearly (Save $396)',
+      value: 'yearly',
+    },
+  ],
+};
+
+export const ThribblePrimary: Story = Template.bind({});
+ThribblePrimary.args = {
+  active: 'ios',
+  type: 'primary',
+  options: [
+    {
+      label: 'All',
+      value: 'all',
+    },
+    {
+      icon: 'app-store-colorful',
+      value: 'ios',
+    },
+    {
+      icon: 'play-store-colorful',
+      value: 'play',
+    },
+  ],
+};
+
+export const ThribbleSecondary: Story = Template.bind({});
+ThribbleSecondary.args = {
+  active: 'ios',
+  type: 'secondary',
+  options: [
+    {
+      label: 'All',
+      value: 'all',
+    },
+    {
+      icon: 'app-store-colorful',
+      value: 'ios',
+    },
+    {
+      icon: 'play-store-colorful',
+      value: 'play',
+    },
+  ],
+};

package/src/components/switch/switch.test.ts

@@ -0,0 +1,90 @@
+import { DefineComponent } from 'vue';
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ResizeObserver from 'resize-observer-polyfill'
+global.ResizeObserver = ResizeObserver
+
+import MaSwitch from './index.vue';
+
+const MaSwitchComponent = MaSwitch as unknown as DefineComponent;
+
+describe('Ma Switch Test Group', () => {
+    it('should mount component with default props ✔ ', async () => {
+        expect(MaSwitch).toBeTruthy();
+        const wrapper = mount(MaSwitchComponent, {
+            props: {
+                active: 'all',
+                type: 'secondary',
+                options: [
+                    {
+                        label: 'All',
+                        value: 'all'
+                    },
+                    {
+                        icon: 'app-store-colorful',
+                        value: 'ios'
+                    },
+                    {
+                        icon: 'play-store-colorful',
+                        value: 'play'
+                    }
+                ]
+            }
+        });
+        //Test the component exists
+        expect(wrapper.find('.ak-switch').exists()).toBeTruthy();
+    });
+    it('should be disabled ✔ ', async () => {
+        expect(MaSwitch).toBeTruthy();
+        const wrapper = mount(MaSwitchComponent, {
+            props: {
+                active: 'all',
+                type: 'secondary',
+                options: [
+                    {
+                        label: 'All',
+                        value: 'all'
+                    },
+                    {
+                        icon: 'app-store-colorful',
+                        value: 'ios'
+                    },
+                    {
+                        icon: 'play-store-colorful',
+                        value: 'play'
+                    }
+                ],
+                disabled: true
+            }
+        });
+        // check disabled prop
+        expect(wrapper.find('.ak-switch--disabled').exists()).toBeTruthy();
+    })
+    it('should switch when clicked ✔ ', async () => {
+        expect(MaSwitch).toBeTruthy();
+        const wrapper = mount(MaSwitchComponent, {
+            props: {
+                active: 'all',
+                type: 'secondary',
+                options: [
+                    {
+                        label: 'All',
+                        value: 'all'
+                    },
+                    {
+                        icon: 'app-store-colorful',
+                        value: 'ios'
+                    },
+                    {
+                        icon: 'play-store-colorful',
+                        value: 'play'
+                    }
+                ],
+            },
+        });
+        expect(wrapper.find('.ak-switch > span:not(.active)').exists()).toBe(true);
+        await wrapper.find('.ak-switch > span:not(.active)').trigger('click')
+        expect(wrapper.emitted().change).toBeTruthy();
+        expect(wrapper.emitted().change.length).toBe(1);
+    })
+})

package/src/components/switch/types.ts

@@ -0,0 +1,12 @@
+export const SwitchTypes = [
+    'primary',
+    'secondary',
+] as const;
+
+export interface MaSwitchOption {
+    label?: string,
+    icon?: string,
+    value: string,
+}
+
+export type SwitchType = (typeof SwitchTypes)[number];

package/src/components/table/assets/table.scss

@@ -0,0 +1,167 @@
+@use "@ag-grid-community/styles" as ag;
+
+@include ag.grid-styles(
+  (
+    theme: ma,
+    extend-theme: quartz,
+
+    --ag-active-color: #4478ff,
+    --ag-background-color: #ffffff,
+    --ag-foreground-color: #060b27,
+    --ag-secondary-foreground-color: #101828,
+    --ag-border-color: #eaecf0,
+    --ag-data-color: #060b27,
+    --ag-input-border-color: #eaecf0,
+    --ag-input-focus-border-color: #4478ff,
+    --ag-input-focus-box-shadow: none,
+    --ag-input-disabled-border-color: #f2f4f7,
+    --ag-input-disabled-background-color: #f2f4f7,
+    --ag-input-border-color-invalid: #ff6565,
+    --ag-header-background-color: #f9fafb,
+    --ag-row-hover-color: #f9fafb,
+    --ag-border-radius: 8px,
+    --ag-card-radius: 8px,
+    --ag-invalid-color: #ff6565,
+    --ag-font-family: "Euclid Circular A",
+    --ag-checkbox-border-radius: 4px,
+    --ag-menu-min-width: 248px,
+  )
+);
+
+.ag-theme-ma {
+  .ag-button {
+    &.ag-standard-button {
+      @apply bg-white duration-300 rounded-lg font-medium;
+      &:disabled {
+        @apply bg-gray-200 text-gray-400 cursor-not-allowed;
+      }
+      &:not(:disabled) {
+        &:hover {
+          @apply bg-primary-dark text-white;
+        }
+      }
+    }
+  }
+  .ag-advanced-filter-builder-button {
+    @apply bg-transparent font-medium duration-300 rounded-lg;
+    &:hover {
+      @apply bg-primary-button-dark text-white;
+    }
+  }
+  .ag-menu {
+    .ag-menu-list {
+      .ag-menu-option {
+        @apply font-normal;
+      }
+    }
+  }
+  .ag-icon {
+    @apply text-gray-400;
+  }
+  .ag-picker-field-wrapper {
+    @apply rounded-lg cursor-pointer duration-300;
+    &:hover,
+    &.ag-picker-expanded {
+      @apply bg-blue-25 border-primary-dark-blue;
+    }
+  }
+  .ag-list {
+    .ag-list-item {
+      @apply p-4 cursor-pointer;
+    }
+  }
+  .ag-header {
+    @apply relative z-[2] top-0;
+    .ag-header-cell {
+      .ag-header-cell-text {
+        @apply duration-300;
+      }
+      &.ag-header-active {
+        .ag-header-cell-text {
+          @apply text-gray-500;
+        }
+      }
+
+      // custom class for right-aligned header
+      &.right-aligned {
+        .ag-header-cell-label {
+          @apply justify-end gap-2;
+        }
+      }
+    }
+
+    // pinned column display
+    .ag-pinned-left-header,
+    .ag-pinned-right-header {
+      .ag-cell-label-container {
+        &::after {
+          @apply mr-2 text-gray-400;
+          content: var(--ag-icon-font-code-pin, "\f124");
+          display: var(--ag-icon-font-display-pin, var(--ag-icon-font-display));
+          font-family: var(--ag-icon-font-family-pin, var(--ag-icon-font-family));
+          font-size: var(--ag-icon-size);
+        }
+      }
+    }
+  }
+  .ag-checkbox-input-wrapper {
+    &::after {
+      @apply text-gray-300;
+    }
+    &.ag-checked {
+      &::after {
+        @apply text-primary-dark-blue;
+      }
+    }
+    &.ag-indeterminate {
+      &::after {
+        @apply text-primary-dark-blue;
+      }
+    }
+  }
+  .ag-input-field-input {
+    @apply duration-300;
+  }
+
+  // There is a problem when the checkbox and collapse icon are in the same cell.
+  .ag-cell-wrapper {
+    .ag-cell-wrapper {
+      .ag-group-contracted,
+      .ag-group-expanded {
+        .ag-icon {
+          @apply text-gray-400;
+          &-tree-closed,
+          &-tree-open {
+            &:hover {
+              @apply shadow-none bg-none #{!important};
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // grand total rows
+  .ag-row-footer, .ma-total-row, .ag-status-bar {
+    @apply text-gray-500 bg-gray-50 z-[2] relative;
+  }
+
+  &--borderless {
+    .ag-root-wrapper {
+      @apply border-none;
+    }
+  }
+
+  &.no-rounded {
+    .ag-root-wrapper {
+      @apply rounded-none;
+    }
+  }
+
+  .ag-paging-panel {
+    @apply flex-wrap md:flex-nowrap justify-center md:justify-end h-16 md:h-[var(--ag-header-height)];
+      .ag-paging-page-summary-panel {
+      @apply pb-1 md:pb-0;
+    }
+  }
+}