@mozaic-ds/vue 1.0.0-rc.3 → 2.1.0

package/src/components/Contributing.mdx

@@ -0,0 +1,118 @@
+import { Meta } from '@storybook/addon-docs/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,45 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<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" />
+
+Or with **Yarn**:
+
+<Source language="bash" dark code="yarn add @mozaic-ds/vue" />
+
+## 📝 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>Button Label</MButton>
+</template>
+`} />

package/src/components/Introduction.mdx

@@ -0,0 +1,100 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+import ads from '../../.storybook/assets/logo.svg';
+import vue from '../../.storybook/assets/vue.svg';
+
+<Meta title="Introduction" />
+
+<p
+  style={{
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '1rem',
+  }}
+>
+  <img src={ads} alt="ADEO Design system logo" style={{ height: '80px' }} />
+  <span style={{ fontSize: '32px' }}>x</span>
+  <img src={vue} alt="Vue.js logo" style={{ height: '80px' }} />
+</p>
+
+<h1 align="center">ADEO Design system - Vue.js library</h1>
+
+<p align="center">
+  A library of **Vue.js** components implementing **ADEO Design system**
+  guidelines.
+</p>
+
+<div
+  style={{
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '0.5rem',
+  }}
+>
+  <a href="https://www.npmjs.com/package/@mozaic-ds/vue">
+    <img
+      src="https://img.shields.io/npm/v/@mozaic-ds/vue?label=NPM&logo=npm&color=yellow"
+      alt="npm version"
+    />
+  </a>
+  <a href="https://github.com/adeo/mozaic-vue/blob/master/CONTRIBUTING.md">
+    <img
+      src="https://img.shields.io/badge/PRs-welcome-blue.svg?logo=github"
+      alt="PRs welcome"
+    />
+  </a>
+  <a href="https://app.slack.com/client/T4R6RCZFA/CN4K3A99R">
+    <img
+      src="https://img.shields.io/badge/Slack-mozaic_vue-611f69.svg?logo=slack"
+      alt="Slack mozaic-vue"
+    />
+  </a>
+  <a href="https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system">
+    <img
+      src="https://img.shields.io/badge/KEYS-Adeo_Design_System-4526ce.svg"
+      alt="KEYS ADEO Design system"
+    />
+  </a>
+</div>
+
+<br />
+<br />
+
+## 🪄 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/addon-docs/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**
+- Follow our [KEYS page](https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system)

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');
+  });
+});

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

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import MBreadcrumb from './MBreadcrumb.vue';
+
+const meta: Meta<typeof MBreadcrumb> = {
+  title: 'Navigation/Breadcrumb',
+  component: MBreadcrumb,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.',
+      },
+    },
+  },
+  args: {
+    links: [
+      {
+        label: 'Home',
+        href: '#',
+        router: true,
+      },
+      {
+        label: 'level 01',
+        href: '#',
+        router: true,
+      },
+      {
+        label: 'level 02',
+        href: '#',
+        router: true,
+      },
+      {
+        label: 'Current Page',
+        href: '#',
+        router: true,
+      },
+    ],
+  },
+  render: (args) => ({
+    components: { MBreadcrumb },
+    setup() {
+      return { args };
+    },
+    template: `
+      <MBreadcrumb v-bind="args"></MBreadcrumb>
+    `,
+  }),
+};
+export default meta;
+type Story = StoryObj<typeof MBreadcrumb>;
+
+export const Default: Story = {};
+
+export const Inverse: Story = {
+  globals: {
+    backgrounds: { value: 'inverse' },
+  },
+  args: { appearance: 'inverse' },
+};
+
+export const WithoutRouter: Story = {
+  args: {
+    links: [
+      {
+        label: 'Home',
+        href: '#',
+      },
+      {
+        label: 'level 01',
+        href: '#',
+      },
+      {
+        label: 'level 02',
+        href: '#',
+      },
+      {
+        label: 'Current Page',
+        href: '#',
+      },
+    ],
+  },
+};

package/src/components/breadcrumb/MBreadcrumb.vue

@@ -1,73 +1,70 @@
 <template>
-  <nav
-    class="mc-breadcrumb"
-    :class="{
-      'mc-breadcrumb--dark': dark,
-      'mc-breadcrumb--responsive': responsive,
-    }"
-    aria-label="Breadcrumb"
-  >
+  <nav class="mc-breadcrumb" :class="classObject" aria-label="Breadcrumb">
     <ul class="mc-breadcrumb__container">
       <li
-        v-for="(item, index) in items"
-        :key="`breadcrumb-${index}`"
         class="mc-breadcrumb__item"
-        :class="{ 'is-active': item.isActive }"
+        v-for="(link, index) in links"
+        :key="`breadcrumb-${index}`"
       >
-        <m-link
-          :href="item.href"
-          :class="[
-            setLinkClasses,
-            { 'mc-breadcrumb__current': index === items.length - 1 },
-          ]"
-          :aria-current="index != items.length - 1 ? null : 'page'"
-          size="s"
-          :router="item.router"
-          @click="$emit('link-clicked', item)"
+        <MLink
+          :href="link.href"
+          :router="link.router"
+          :appearance="appearance"
+          inline
+          :class="{
+            'mc-breadcrumb__current': isLastLink(index),
+          }"
+          :aria-current="isLastLink(index) ? 'page' : undefined"
         >
-          {{ item.text }}
-        </m-link>
+          {{ link.label }}
+        </MLink>
       </li>
     </ul>
   </nav>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from 'vue';
 import MLink from '../link/MLink.vue';
+/**
+ * A breadcrumb is a navigation help that displays the hierarchical path of the current page within a website or application. It helps users understand their location and allows them to navigate back to previous levels easily. Breadcrumbs improve usability and accessibility, especially in multi-level websites, dashboards, and e-commerce platforms.
+ */
+const props = defineProps<{
+  /**
+   * Allows to define the breadcrumb style
+   */
+  appearance?: 'standard' | 'inverse';
+  /**
+   * Links of the breadcrumb
+   */
+  links: Array<{
+    /**
+     * The label displayed for the link.
+     */
+    label: string;
+    /**
+     * URL for the link (for external links or the `to` prop for `router-link`).
+     */
+    href: string;
+    /**
+     * If `true`, the link will be rendered as a `router-link` for internal navigation (Vue Router).
+     */
+    router?: boolean;
+  }>;
+}>();
 
-export default {
-  name: 'MBreadcrumb',
-
-  components: {
-    MLink,
-  },
-
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    dark: {
-      type: Boolean,
-      default: false,
-    },
-    responsive: {
-      type: Boolean,
-      default: false,
-    },
-  },
+const classObject = computed(() => {
+  return {
+    [`mc-breadcrumb--${props.appearance}`]:
+      props.appearance && props.appearance != 'standard',
+  };
+});
 
-  computed: {
-    setLinkClasses() {
-      return {
-        'mc-link--light': this.dark,
-      };
-    },
-  },
+const isLastLink = (index: number) => {
+  return index === (props.links?.length ?? 0) - 1;
 };
 </script>
 
-<style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.breadcrumb';
+<style lang="scss" scoped>
+@use '@mozaic-ds/styles/components/breadcrumb';
 </style>