@icij/murmur-next 4.0.0 → 4.0.1

package/README.md

@@ -3,40 +3,42 @@
   <img src="https://github.com/ICIJ/murmur/raw/master/lib/assets/images/murmur-dark.png" width="158px">
 </a>
 <br>
-Murmur is <a href="https://icij.org">ICIJ</a>'s Design System for Bootstrap 4 and Vue.js
+Murmur is <a href="https://icij.org">ICIJ</a>'s Design System for Bootstrap 5 and Vue.js
 </p>
 
 <div align="center">
 
 | | Status |
 | --: | :-- |
-| **CI checks** | [![CircleCI](https://circleci.com/gh/ICIJ/murmur.svg?style=shield)](https://circleci.com/gh/ICIJ/murmur) |
+| **Github Actions** | ![Github Actions](https://github.com/ICIJ/murmur-next/actions/workflows/deploy-github-pages.yaml/badge.svg) |
 | **Code Climate** | [![Code Climate](https://api.codeclimate.com/v1/badges/e487295b939be72d5f15/maintainability)](ttps://codeclimate.com/github/ICIJ/murmur/maintainability) |
-| **NPM version** | [![NPM version](https://img.shields.io/npm/v/@icij/murmur)](https://www.npmjs.com/package/@icij/murmur) |
-| **NPM downloads** | [![NPM download](https://img.shields.io/npm/dm/@icij/murmur)](https://www.npmjs.com/package/@icij/murmur) |
+| **NPM version** | [![NPM version](https://img.shields.io/npm/v/@icij/murmur-next)](https://www.npmjs.com/package/@icij/murmur-next) |
+| **NPM downloads** | [![NPM download](https://img.shields.io/npm/dm/@icij/murmur-next)](https://www.npmjs.com/package/@icij/murmur-next) |
 
 </div>
 
 
 ## Installation guide
 
-If you are using module bundlers such as Webpack or Rollup, you might need to include the package into your project.
+If you are using module bundlers such as Webpack or Vite, you might need to include the package into your project.
 To get started, use NPM or Yarn to get latest version of **@icij/murmur**.
 
 ```bash
 # with NPM:
-npm i @icij/murmur
+npm i @icij/murmur-next
 
 # or with Yarn:
-yarn add @icij/murmur
+yarn add @icij/murmur-next
 ```
 Then, register Murmur as a pluggin in your app entry point:
 
 ```js
-import Vue from 'vue'
-import Murmur from '@icij/murmur'
+import {createApp} from 'vue'
+import Murmur from '@icij/murmur-next'
 
-Vue.use(Murmur)
+
+const app = createApp({})
+app.use(Murmur)
 ```
 
 Now all components will be globally available in your app.
@@ -54,18 +56,12 @@ yarn serve
 # build library and documentation for production with minification
 yarn build
 
-# build library for production with minification
-yarn build:lib
-
-# build documentation for production with minification
-yarn build:docs
-
-# deploy the doc on Github Pages
-yarn deploy
+# build storybook documentation for production 
+yarn build-storybook
 
 # publish a version of the package on NPM registry
 yarn publish
 
 # run unit tests
-yarn test:unit
+yarn test
 ```

package/dist/lib/components/AccordionStep.vue.d.ts

@@ -0,0 +1,79 @@
+/// <reference types="@/shims-vue" />
+/// <reference types="vue-i18n" />
+import { PropType } from '../../node_modules/vue';
+import { Accordion, Step } from '../types';
+declare const _default: import('../../node_modules/vue').DefineComponent<{
+    /**
+     * Step name
+     */
+    step: {
+        type: (SymbolConstructor | StringConstructor | (() => Step))[];
+        required: true;
+    };
+    /**
+     * Title of the step card
+     */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Content of the step card
+     */
+    content: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Force card expansion/collapse
+     */
+    active: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+}, {
+    isFirst: import('../../node_modules/vue').ComputedRef<boolean>;
+    isLast: import('../../node_modules/vue').ComputedRef<boolean>;
+    isActive: import('../../node_modules/vue').ComputedRef<boolean>;
+    isPrevious: import('../../node_modules/vue').ComputedRef<boolean>;
+    nextStep: () => void;
+    previousStep: () => void;
+    accordion: Accordion | undefined;
+}, unknown, {}, {}, import('../../node_modules/vue').ComponentOptionsMixin, import('../../node_modules/vue').ComponentOptionsMixin, ("next-step" | "previous-step")[], "next-step" | "previous-step", import('../../node_modules/vue').PublicProps, Readonly<import('../../node_modules/vue').ExtractPropTypes<{
+    /**
+     * Step name
+     */
+    step: {
+        type: (SymbolConstructor | StringConstructor | (() => Step))[];
+        required: true;
+    };
+    /**
+     * Title of the step card
+     */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Content of the step card
+     */
+    content: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Force card expansion/collapse
+     */
+    active: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+}>> & {
+    "onNext-step"?: ((...args: any[]) => any) | undefined;
+    "onPrevious-step"?: ((...args: any[]) => any) | undefined;
+}, {
+    content: string;
+    title: string;
+    active: boolean | undefined;
+}, {}>;
+export default _default;

package/dist/lib/components/AccordionWrapper.vue.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="@/shims-vue" />
+/// <reference types="vue-i18n" />
+import { PropType } from '../../node_modules/vue';
+import { Step } from '../types';
+declare const _default: import('../../node_modules/vue').DefineComponent<{
+    step: {
+        type: (SymbolConstructor | StringConstructor | (() => Step))[];
+        required: true;
+    };
+    steps: {
+        type: PropType<Step[]>;
+        required: true;
+    };
+}, {
+    emitAccordionNextStepEvent: () => void;
+    emitAccordionPreviousStepEvent: () => void;
+    isActiveStep: (step: Step) => boolean;
+    isPreviousStep: (step: Step) => boolean;
+    isFirstStep: (step: Step) => boolean;
+    isLastStep: (step: Step) => boolean;
+}, unknown, {}, {}, import('../../node_modules/vue').ComponentOptionsMixin, import('../../node_modules/vue').ComponentOptionsMixin, "step-change"[], "step-change", import('../../node_modules/vue').PublicProps, Readonly<import('../../node_modules/vue').ExtractPropTypes<{
+    step: {
+        type: (SymbolConstructor | StringConstructor | (() => Step))[];
+        required: true;
+    };
+    steps: {
+        type: PropType<Step[]>;
+        required: true;
+    };
+}>> & {
+    "onStep-change"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/dist/lib/components/ActiveTextTruncate.vue.d.ts

@@ -0,0 +1,101 @@
+/// <reference types="@/shims-vue" />
+/// <reference types="vue-i18n" />
+declare const _default: import('../../node_modules/vue').DefineComponent<{
+    /**
+     * Number of Pixel Per Millisecond for the text transition.
+     */
+    ppms: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Maximum width of the fading mask.
+     */
+    fadingMaxWidth: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    /**
+     * Minimum width of the fading mask.
+     */
+    fadingMinWidth: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    /**
+     * Delay to start moving the text (in milliseconds).
+     */
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Direction of the truncate
+     */
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    el: import('../../node_modules/vue').Ref<null>;
+    isFading: import('../../node_modules/vue').ComputedRef<boolean>;
+    fadingLeftWidth: import('../../node_modules/vue').ComputedRef<string>;
+    fadingRightWidth: import('../../node_modules/vue').ComputedRef<string>;
+    textOffsetTransitionDuration: import('../../node_modules/vue').ComputedRef<string>;
+    textOffsetTransitionDelay: import('../../node_modules/vue').ComputedRef<string>;
+    textFinalOffset: import('../../node_modules/vue').ComputedRef<string>;
+    resetTextLivePosition: () => void;
+}, unknown, {}, {}, import('../../node_modules/vue').ComponentOptionsMixin, import('../../node_modules/vue').ComponentOptionsMixin, ("start" | "end" | "cancel")[], "start" | "end" | "cancel", import('../../node_modules/vue').PublicProps, Readonly<import('../../node_modules/vue').ExtractPropTypes<{
+    /**
+     * Number of Pixel Per Millisecond for the text transition.
+     */
+    ppms: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Maximum width of the fading mask.
+     */
+    fadingMaxWidth: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    /**
+     * Minimum width of the fading mask.
+     */
+    fadingMinWidth: {
+        type: NumberConstructor;
+        default: number;
+        validator: (value: number) => boolean;
+    };
+    /**
+     * Delay to start moving the text (in milliseconds).
+     */
+    delay: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Direction of the truncate
+     */
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>> & {
+    onStart?: ((...args: any[]) => any) | undefined;
+    onEnd?: ((...args: any[]) => any) | undefined;
+    onCancel?: ((...args: any[]) => any) | undefined;
+}, {
+    direction: string;
+    ppms: number;
+    fadingMaxWidth: number;
+    fadingMinWidth: number;
+    delay: number;
+}, {}>;
+export default _default;

package/dist/lib/components/AdvancedLinkForm.vue.d.ts

@@ -0,0 +1,168 @@
+/// <reference types="@/shims-vue" />
+/// <reference types="vue-i18n" />
+/**
+ * A form with tabs to offer several copy formats to users.
+ */
+declare const _default: import('../../node_modules/vue').DefineComponent<{
+    /**
+     * The link to copy
+     */
+    link: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Title associated with the link
+     */
+    title: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The forms to display
+     */
+    forms: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    /**
+     * Index of the selected tab
+     */
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Activate the card integration for the tabs
+     */
+    card: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Renders the tabs with the appearance of pill buttons
+     */
+    pills: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Makes the tabs and the panels smaller.
+     */
+    small: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Makes the tabs and the panels vertical.
+     */
+    vertical: {
+        type: BooleanConstructor;
+    };
+    /**
+     * CSS class (or classes) to apply to the currently active tab.
+     */
+    activeNavItemClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * When set to 'true', disables the fade animation on the tabs.
+     */
+    noFade: {
+        type: BooleanConstructor;
+    };
+}, {
+    t: import("vue-i18n").ComposerTranslation<{
+        [x: string]: import("@intlify/core-base").LocaleMessage<import("vue-i18n").VueMessageType>;
+    }, string, import("@intlify/core-base").RemoveIndexSignature<{
+        [x: string]: import("vue-i18n").LocaleMessageValue<import("vue-i18n").VueMessageType>;
+    }>, never, string, string>;
+    titleOrLink: import('../../node_modules/vue').ComputedRef<string>;
+    linkAsMarkdown: import('../../node_modules/vue').ComputedRef<string>;
+    linkAsHtml: import('../../node_modules/vue').ComputedRef<string>;
+    formClasses: import('../../node_modules/vue').ComputedRef<{}>;
+    size: import('../../node_modules/vue').ComputedRef<"sm" | "md">;
+    showForm: import('../../node_modules/vue').ComputedRef<(name: string) => boolean>;
+    selectRaw: () => void;
+    selectRich: () => void;
+    selectMarkdown: () => void;
+    selectHtml: () => void;
+}, unknown, {}, {}, import('../../node_modules/vue').ComponentOptionsMixin, import('../../node_modules/vue').ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import('../../node_modules/vue').PublicProps, Readonly<import('../../node_modules/vue').ExtractPropTypes<{
+    /**
+     * The link to copy
+     */
+    link: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Title associated with the link
+     */
+    title: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * The forms to display
+     */
+    forms: {
+        type: ArrayConstructor;
+        default: () => string[];
+    };
+    /**
+     * Index of the selected tab
+     */
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /**
+     * Activate the card integration for the tabs
+     */
+    card: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Renders the tabs with the appearance of pill buttons
+     */
+    pills: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Makes the tabs and the panels smaller.
+     */
+    small: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Makes the tabs and the panels vertical.
+     */
+    vertical: {
+        type: BooleanConstructor;
+    };
+    /**
+     * CSS class (or classes) to apply to the currently active tab.
+     */
+    activeNavItemClass: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * When set to 'true', disables the fade animation on the tabs.
+     */
+    noFade: {
+        type: BooleanConstructor;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    link: string;
+    small: boolean;
+    title: string;
+    modelValue: number;
+    vertical: boolean;
+    noFade: boolean;
+    activeNavItemClass: string;
+    card: boolean;
+    pills: boolean;
+    forms: unknown[];
+}, {}>;
+export default _default;

package/dist/lib/components/Brand.vue.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="@/shims-vue" />
+/// <reference types="vue-i18n" />
+interface BrandProps {
+    /**
+     * Add a balancing effect to the globe
+     */
+    animated?: boolean;
+    /**
+     * Monochromatic logo's color
+     */
+    color?: string | null;
+    /**
+     * Logo's background color
+     */
+    background?: string | null;
+    /**
+     * Logo's size
+     */
+    size?: number | string;
+    /**
+     * Force the width of the logo to be the same as the height
+     */
+    square?: boolean;
+}
+declare const _default: import('../../node_modules/vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BrandProps>, {
+    color: null;
+    background: null;
+    size: string;
+}>, {}, unknown, {}, {}, import('../../node_modules/vue').ComponentOptionsMixin, import('../../node_modules/vue').ComponentOptionsMixin, {}, string, import('../../node_modules/vue').PublicProps, Readonly<import('../../node_modules/vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BrandProps>, {
+    color: null;
+    background: null;
+    size: string;
+}>>>, {
+    background: string | null;
+    color: string | null;
+    size: string | number;
+}, {}>;
+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('../../node_modules/vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('../../node_modules/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];
+} & {};

package/dist/lib/components/BrandExpansion.vue.d.ts

@@ -0,0 +1,105 @@
+/// <reference types="@/shims-vue" />
+/// <reference types="vue-i18n" />
+import { PropType } from '../../node_modules/vue';
+import { BrandMode } from '../enums';
+import type { BrandExpansionStyle } from '../types';
+/**
+ * A component to create variations of ICIJ logo with text
+ */
+declare const _default: import('../../node_modules/vue').DefineComponent<{
+    /**
+     * Add a balancing effect to the globe
+     */
+    animated: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Monochromatic logo's color
+     */
+    color: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Logo's background color
+     */
+    background: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Logo's size
+     */
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    /**
+     * Brand mode ("short", "medium", "long")
+     */
+    mode: {
+        type: PropType<BrandMode>;
+        default: BrandMode;
+    };
+    /**
+     * Reverse color of the main text to white if no `color` is given
+     */
+    dark: {
+        type: BooleanConstructor;
+    };
+}, unknown, unknown, {
+    baseWidth(): number;
+    width(): string;
+    height(): string;
+    sizeAsNumber(): number;
+    style(): BrandExpansionStyle;
+}, {}, import('../../node_modules/vue').ComponentOptionsMixin, import('../../node_modules/vue').ComponentOptionsMixin, {}, string, import('../../node_modules/vue').PublicProps, Readonly<import('../../node_modules/vue').ExtractPropTypes<{
+    /**
+     * Add a balancing effect to the globe
+     */
+    animated: {
+        type: BooleanConstructor;
+    };
+    /**
+     * Monochromatic logo's color
+     */
+    color: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Logo's background color
+     */
+    background: {
+        type: StringConstructor;
+        default: null;
+    };
+    /**
+     * Logo's size
+     */
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    /**
+     * Brand mode ("short", "medium", "long")
+     */
+    mode: {
+        type: PropType<BrandMode>;
+        default: BrandMode;
+    };
+    /**
+     * Reverse color of the main text to white if no `color` is given
+     */
+    dark: {
+        type: BooleanConstructor;
+    };
+}>>, {
+    background: string;
+    color: string;
+    dark: boolean;
+    size: string | number;
+    animated: boolean;
+    mode: BrandMode;
+}, {}>;
+export default _default;