@mozaic-ds/vue 1.0.0-beta.3 → 1.0.0-beta.5

package/package.json

@@ -1,73 +1,104 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "1.0.0-beta.3",
-  "description": "Vue.js implementation of Mozaic Design System",
-  "author": "Adeo - Mozaic Design System",
+  "version": "1.0.0-beta.5",
+  "type": "module",
+  "description": "Mozaic-Vue is the Vue.js implementation of ADEO Design system",
+  "author": "ADEO - ADEO Design system",
+  "main": "./dist/mozaic-vue.umd.cjs",
+  "module": "./dist/mozaic-vue.js",
+  "types": "./dist/mozaic-vue.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/mozaic-vue.d.ts",
+      "import": "./dist/mozaic-vue.js",
+      "require": "./dist/mozaic-vue.umd.cjs"
+    },
+    "./style.css": "./dist/mozaic-vue.css"
+  },
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build ./src/index.js",
-    "lint": "vue-cli-service lint",
-    "build:bundle": "vue-cli-service build --target lib --name mozaic-vue ./src/index.js",
-    "build:bundleAdeo": "vue-cli-service build --target lib --formats umd --mode adeo --filename mozaic-vue.adeo ./src/index.js --no-clean",
-    "postinstall": "node postinstall.js",
-    "prepublishOnly": "npm run-script build:bundle && npm run-script build:bundleAdeo",
-    "publish:beta": "npm publish --access public --tag alpha",
-    "tokens:build": "mozaic-tokens-build"
+    "start": "npm-run-all --parallel dev storybook",
+    "dev": "vite --mode development",
+    "lint": "eslint . --fix",
+    "test:unit": "vitest",
+    "format": "prettier --write src/",
+    "build": "vite build",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "npm run build-storybook",
+    "storybook:deploy": "storybook-to-ghpages",
+    "prepare": "node .husky/install.mjs",
+    "build-storybook": "storybook build",
+    "release": "release-it",
+    "release:beta": "release-it --preRelease=beta",
+    "prepublishOnly": "npm run build",
+    "npm:publish": "npm publish --access public",
+    "npm:publish:beta": "npm publish --access public --tag beta"
   },
-  "main": "./dist/mozaic-vue.umd.min.js",
   "files": [
     "dist/*",
     "src/*",
     "types/*",
-    "*.d.ts",
-    "postinstall.js"
+    "*.d.ts"
   ],
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "2.0.0-rc.1",
-    "@mozaic-ds/icons": "1.34.0",
-    "@mozaic-ds/styles": "2.0.0-rc.4",
-    "@mozaic-ds/web-fonts": "1.22.0",
-    "core-js": "^3.18.3",
-    "libphonenumber-js": "1.9.50",
-    "postcss-scss": "^4.0.1",
-    "vue": "^2.6.14",
-    "vue-country-flag": "2.3.2"
+    "@mozaic-ds/styles": "2.0.0-alpha.2",
+    "@mozaic-ds/web-fonts": "1.65.0",
+    "postcss-scss": "^4.0.9",
+    "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/eslint-parser": "^7.15.8",
-    "@vue/cli-plugin-babel": "~5.0.4",
-    "@vue/cli-service": "~5.0.4",
-    "@vue/compiler-sfc": "^3.2.20",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.30.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-vue": "^7.19.1",
-    "postcss": "^8.3.9",
-    "postcss-loader": "^4.3.0",
-    "prettier": "^2.4.1",
-    "sass": "^1.42.1",
-    "sass-loader": "^10.2.0",
-    "vue-template-compiler": "^2.6.14"
+    "@commitlint/cli": "^19.8.0",
+    "@commitlint/config-conventional": "^19.8.0",
+    "@mozaic-ds/css-dev-tools": "1.75.0",
+    "@mozaic-ds/icons-vue": "^0.0.1-beta.0",
+    "@release-it/conventional-changelog": "^8.0.2",
+    "@storybook/addon-a11y": "^8.6.7",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-themes": "^8.6.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
+    "@storybook/vue3": "^8.4.6",
+    "@storybook/vue3-vite": "^8.6.7",
+    "@types/jsdom": "^21.1.7",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitest/coverage-v8": "^3.0.9",
+    "@vitest/eslint-plugin": "^1.1.38",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/test-utils": "^2.4.6",
+    "all-contributors-cli": "^6.26.1",
+    "eslint": "^9.22.0",
+    "eslint-plugin-vue": "^10.0.0",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
+    "husky": "^9.1.7",
+    "jsdom": "^26.0.0",
+    "lint-staged": "^15.5.0",
+    "mdx-mermaid": "^2.0.3",
+    "mermaid": "^11.5.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.5.3",
+    "release-it": "^18.1.2",
+    "sass": "^1.86.0",
+    "storybook": "^8.6.7",
+    "typescript": "^5.7.2",
+    "vite": "^6.2.2",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.0.9",
+    "vue-eslint-parser": "^10.1.1"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-vue/issues"
   },
   "homepage": "https://github.com/adeo/mozaic-vue#readme",
   "keywords": [
-    "design system",
-    "mozaic design system",
-    "vue.js",
-    "html",
-    "sass",
-    "scss",
-    "adeo"
+    "Adeo",
+    "Adeo Design system",
+    "Design System",
+    "Vue",
+    "Mozaic"
   ],
-  "license": "ISC",
+  "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/adeo/mozaic-vue.git"
-  },
-  "types": "./types/index.d.ts"
+  }
 }

package/src/components/Contributing.mdx

@@ -0,0 +1,118 @@
+import { Meta } from '@storybook/blocks';
+import { Mermaid } from 'mdx-mermaid/Mermaid';
+
+<Meta title="Contributing" />
+
+# Be part of something bigger!
+
+**Mozaic-Vue** is made possible by an incredible community that finds issues and creates pull requests.<br/>
+It is our job to enable you to create amazing applications.
+
+Most of the time, you find something that can be made better. You could find a bug, or you have an idea for additional functionality.<br/>
+That's great! It's as easy as cloning the [Mozaic-Vue repository](https://github.com/adeo/mozaic-vue) to get started working in the development environment.
+
+Hopefully this document makes the process for contributing clear and answers some questions that you may have.<br/>
+If you have any questions, please reach out to us on our [slack channel](https://adeo-tech-community.slack.com/archives/CN4K3A99R).
+
+## Contribution model
+
+The contribution process can be summarized as follows:
+
+<Mermaid
+  chart={`flowchart TD;
+  A((I have a need <br/>fix or new feature));
+  A --> B{An issue already exists?};
+  B --> |YES| I;
+  I([The issue corresponds to my needs <br/>or I complete it]);
+  I --> D;
+  B --> |NO| C;
+  C([I create an issue <br/>]);
+  C --> D;
+  D{I can contribute?};
+  D --> |YES| E;
+  D --> |NO| J;
+  E([I clone the repo <br/>& create a PR associated to the issue]);
+  E --> F;
+  F([The PR is ready <br/>and I assign it to reviewers]);
+  F --> G;
+  G{The proofreading is OK <br/>and the PR is validated?};
+  G --> |YES| H;
+  G --> |NO| K;
+  H([The PR is merged and will be released soon]);
+  H;
+  J([In this case, I wait for the issue <br/>to be traited and delivered.]);
+  K([I make the requested changes]);
+  K --> F;
+  click B "https://github.com/adeo/mozaic-vue/issues" _blank;
+  click C "https://github.com/adeo/mozaic-vue/issues/new/choose" _blank;
+`}
+/>
+
+You can now discover the details of each of these steps below.
+
+## Reporting issues
+
+### Where to find known issues
+
+We are using [GitHub Issues](https://github.com/adeo/mozaic-vue/issues) for our bugs.<br/>
+We keep a close eye on this and try to make it clear when we have an internal fix in progress.<br/>
+
+**Before filing a new task, try to make sure your problem doesn't already exist.**
+
+### Reporting new issue
+
+The best way to get your bug fixed is to provide a reduced test case.
+
+Once you've gathered all information, please fill out an issue [here](https://github.com/adeo/mozaic-vue/issues/new/choose).
+
+## Proposing a change
+
+If you intend to add a new component, or make any non-trivial changes, we recommend filing an issue.
+
+This will lets us prepare an agreement on your proposal before you put significant effort into it.
+
+If you’re only fixing a bug, it should be fine to submit a pull request but we still recommend to submit an issue detailing what you’re looking to fix.
+
+## Setup Dev Environment
+
+### Project setup
+
+```bash
+// Clone mozaic-vue repo
+git clone git@github.com:adeo/mozaic-vue.git
+
+// Go to the cloned directory
+cd mozaic-vue
+
+// Checkout the branch you are working on
+git checkout <branch name>
+
+// Install dependencies
+npm install
+```
+
+## Submitting Changes/ Pull Requests
+
+Working on your first Pull Request? You can learn how from this video series:
+[How to contribute to an open source project on Github](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
+
+Mozaic's team is keeping an eye on pull requests. We will check your pull request, either merge it, request changes or close it with explanation.
+
+Before submitting please make sure to run:
+
+```
+// Pull down the latest
+$ git pull origin master
+
+// Create your working branch
+$ git branch - b type-id-description
+
+// Resolve bugs or implement new pattern
+// Add Tests and documentation
+
+// Run linter
+$ npm run lint
+
+// Run formatter
+$ npm run format
+```

package/src/components/GettingStarted.mdx

@@ -0,0 +1,50 @@
+import { Meta } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs';
+
+<Meta title="Getting Started" />
+
+# Getting Started
+
+**Mozaic-Vue** is the [Vue.js](https://vuejs.org/) implementation of ADEO Design system.
+
+## 📦 Installation
+
+In order to use **Mozaic-Vue** in your **Vue.js** project, you must first install the [npm package](https://www.npmjs.com/package/@mozaic-ds/vue):
+
+<Source
+  language="bash"
+  dark
+  code="npm i @mozaic-ds/vue@beta"
+/>
+
+Or with **Yarn**:
+
+<Source language="bash" dark code="yarn add @mozaic-ds/vue@beta" />
+
+## 📝 Usage
+
+Import the styles
+
+<Source
+  language='typescript'
+  dark
+  code={`
+// main.ts
+
+import '@mozaic-ds/vue/style.css';
+`} />
+
+To import and use a component, you can proceed as follows:
+
+<Source
+  language='html'
+  dark
+  code={`
+<script setup>
+  import { MButton } from '@mozaic-ds/vue';
+</script>
+
+<template>
+  <MButton label="This is a Mozaic Button" />
+</template>
+`} />

package/src/components/Introduction.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/blocks';
+import { Source } from '@storybook/addon-docs';
+import logo from '../../.storybook/assets/logo.svg';
+
+<Meta title="Introduction" />
+
+<h1>
+  <img
+    src={logo}
+    alt="Mozaic-Vue logo"
+    style={{ height: '48px', marginRight: '8px', verticalAlign: 'middle' }}
+  />
+  <span style={{ fontSize: '32px' }}>Vue.js library</span>
+</h1>
+
+This project contains **Vue.js** components that implements the **ADEO Design system** guidelines.
+
+## 🪄 Introduction
+
+ADEO Design system is a global and collaborative design system
+that facilitates the designer and developer experience,
+enabling them to create universal interfaces
+perfectly aligned with the business strategy of Adeo.
+
+## 🎨 Getting Started
+
+Ready to begin using Mozaic in your project?\
+Our Getting Started guide will walk you through the basics, \
+from setting up the system to implementing core components in your application.
+
+Whether you're new to Mozaic or just need a refresher, \
+this guide has everything you need to hit the ground running.
+
+Read how to **[Setup your application](/docs/getting-started--docs)**!
+
+## 🤝 Contributing
+
+Be part of something bigger!
+
+**Mozaic-Vue** is made possible by an incredible community that finds issues and creates pull requests.\
+It is our job to enable you to create amazing applications.
+
+To do so, see our **[contributing process](/docs/contributing--docs)**.
+
+## ℹ️ Support
+
+If you have any questions or need assistance,\
+we are here to help.
+
+Whether you're troubleshooting, looking for documentation,\
+or need to get in touch with our team,\
+you'll find all the resources you need to get the most out of **Mozaic-Vue**.
+
+Visit our **[Support page](/docs/support--docs)** for more information.

package/src/components/Support.mdx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Support" />
+
+# Support
+
+Need help?
+
+Any feedback, ideas or questions?
+
+The **Mozaic Design System team** would welcome any feedback, ideas, or requirements that you have.<br/>
+Our goal is to make your lives easier.
+
+If you want to get more detailed information on the components or any other topic related to **Mozaic-Vue**, you can contact us through the channels below:
+
+- Join the [#mozaic-vue](https://app.slack.com/client/T4R6RCZFA/CN4K3A99R/) channel on **Slack**
+- Join the [#mozaic-support](https://app.slack.com/client/T4R6RCZFA/CKQJZL7C4/) channel on **Slack**
+- Join our [Workplace group](https://adeo.workplace.com/groups/427492661454646/)

package/src/components/badge/MBadge.spec.ts

@@ -0,0 +1,16 @@
+import { describe, it, expect } from 'vitest';
+
+import { mount } from '@vue/test-utils';
+import MBadge from './MBadge.vue';
+
+describe('MBadge component', () => {
+  it('renders properly', () => {
+    const wrapper = mount(MBadge, {
+      props: {
+        label: 99,
+      },
+    });
+
+    expect(wrapper.text()).toContain('99');
+  });
+});

package/src/components/badge/MBadge.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import MBadge from './MBadge.vue';
+
+const meta: Meta<typeof MBadge> = {
+  title: 'Indicators/Badge (number)',
+  component: MBadge,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A Badge represents a numeric count, often used to indicate notifications, updates, or items requiring attention. Its distinct appearance makes it easy to spot changes at a glance, ensuring users stay informed without breaking their workflow. Badges are commonly attached to icons, buttons, or tabs to provide contextual awareness.',
+      },
+    },
+  },
+  args: { label: 99 },
+  render: (args) => ({
+    components: { MBadge },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MBadge v-bind="args"></MBadge>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MBadge>;
+
+export const Standard: Story = {};
+
+export const Accent: Story = {
+  args: { appearance: 'accent' },
+};
+
+export const Danger: Story = {
+  args: { appearance: 'danger' },
+};
+
+export const Inverse: Story = {
+  parameters: {
+    backgrounds: {
+      default: 'Inverse',
+    },
+  },
+  args: { appearance: 'inverse' },
+};
+
+export const Size: Story = {
+  args: { size: 'm' },
+};

package/src/components/badge/MBadge.vue

@@ -1,43 +1,45 @@
 <template>
-  <component :is="htmlTag" class="mc-badge" :class="setClasses">
-    <slot />
-  </component>
+  <span class="mc-badge" :class="classObject">
+    {{ label }}
+  </span>
 </template>
 
-<script>
-export default {
-  name: 'MBadge',
+<script setup lang="ts">
+import { computed } from 'vue';
+/**
+ * A badge indicates the status of an entity and can evolve at any time.
+ */
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Content of the badge
+     */
+    label: number;
+    /**
+     * Allows to define the Badge style
+     */
+    appearance?: 'danger' | 'accent' | 'inverse' | 'standard';
 
-  props: {
-    type: {
-      type: String,
-      default: null,
-      validator: (value) =>
-        ['information', 'success', 'warning', 'danger', 'neutral'].includes(
-          value
-        ),
-    },
-    htmlTag: {
-      type: String,
-      default: 'span',
-    },
+    /**
+     * Allows to define the Badge size
+     */
+    size?: 's' | 'm';
+  }>(),
+  {
+    appearance: 'standard',
+    size: 's',
   },
+);
 
-  computed: {
-    setClasses() {
-      const classes = [];
-
-      if (this.type) {
-        classes.push(`mc-badge--${this.type}`);
-      }
-
-      return classes;
-    },
-  },
-};
+const classObject = computed(() => {
+  return {
+    [`mc-badge--${props.appearance}`]:
+      props.appearance && props.appearance != 'standard',
+    [`mc-badge--${props.size}`]: props.size && props.size != 's',
+  };
+});
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.badge';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/badge';
 </style>

package/src/components/breadcrumb/MBreadcrumb.spec.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MBreadcrumb from './MBreadcrumb.vue';
+
+const MLinkStub = {
+  template: '<a><slot /></a>',
+  props: ['href', 'appearance', 'inline', 'router', 'class', 'ariaCurrent'],
+};
+
+describe('MBreadcrumb', () => {
+  const defaultLinks = [
+    { label: 'Home', href: '/' },
+    { label: 'Products', href: '/products' },
+    { label: 'Electronics', href: '/products/electronics' },
+  ];
+
+  it('renders all breadcrumb links', () => {
+    const wrapper = mount(MBreadcrumb, {
+      props: {
+        links: defaultLinks,
+      },
+      global: {
+        components: { MLink: MLinkStub },
+      },
+    });
+
+    const items = wrapper.findAll('.mc-breadcrumb__item');
+    expect(items).toHaveLength(defaultLinks.length);
+    defaultLinks.forEach((link, index) => {
+      expect(items[index].text()).toContain(link.label);
+    });
+  });
+
+  it('adds mc-breadcrumb__current class to the last link', () => {
+    const wrapper = mount(MBreadcrumb, {
+      props: {
+        links: defaultLinks,
+      },
+      global: {
+        components: { MLink: MLinkStub },
+      },
+    });
+
+    const lastLink = wrapper.findAllComponents(MLinkStub).at(-1);
+    expect(lastLink?.classes()).toContain('mc-breadcrumb__current');
+  });
+
+  it('sets aria-current="page" on the last link', () => {
+    const wrapper = mount(MBreadcrumb, {
+      props: {
+        links: defaultLinks,
+      },
+      global: {
+        components: { MLink: MLinkStub },
+      },
+    });
+
+    const lastLink = wrapper.findAllComponents(MLinkStub).at(-1);
+    expect(lastLink?.attributes('aria-current')).toBe('page');
+  });
+
+  it('does not set aria-current on non-last links', () => {
+    const wrapper = mount(MBreadcrumb, {
+      props: {
+        links: defaultLinks,
+      },
+      global: {
+        components: { MLink: MLinkStub },
+      },
+    });
+
+    const linkComponents = wrapper.findAllComponents(MLinkStub);
+    for (let i = 0; i < linkComponents.length - 1; i++) {
+      expect(linkComponents[i].attributes('aria-current')).toBeUndefined();
+    }
+  });
+
+  it('applies appearance class modifier when not standard', () => {
+    const wrapper = mount(MBreadcrumb, {
+      props: {
+        appearance: 'inverse',
+        links: defaultLinks,
+      },
+      global: {
+        components: { MLink: MLinkStub },
+      },
+    });
+
+    expect(wrapper.classes()).toContain('mc-breadcrumb--inverse');
+  });
+
+  it('does not apply appearance modifier for standard (default)', () => {
+    const wrapper = mount(MBreadcrumb, {
+      props: {
+        appearance: 'standard',
+        links: defaultLinks,
+      },
+      global: {
+        components: { MLink: MLinkStub },
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain('mc-breadcrumb--standard');
+  });
+});