@icij/murmur-next 4.0.0

package/stories/murmur/components/AccordionWrapper.stories.ts

@@ -0,0 +1,69 @@
+import { AccordionWrapper } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+import {BButton} from "bootstrap-vue-next";
+import {bgStripedDecorator} from "../decorators";
+
+export default {
+    title: 'Murmur/components/AccordionWrapper',
+    component: AccordionWrapper,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof AccordionWrapper>;
+const stepsEnum = Object.freeze({
+    MAILVELOPE: Symbol("MAILVELOPE"),
+    EXPORT_PUBLIC_KEY: Symbol("EXPORT_PUBLIC_KEY"),
+    UPLOAD_PUBLIC_KEY: Symbol("UPLOAD_PGP"),
+})
+const data = {
+    step: stepsEnum.MAILVELOPE,
+    steps: Object.values(stepsEnum),
+    active: false,
+
+}
+const Template: Story = (args: any) => ({
+    components: { AccordionWrapper,BButton },
+    setup() {
+        return { stepsEnum,args };
+    },
+    template: `<AccordionWrapper v-bind="args" @step-change="args.step=$event">
+        <accordion-step
+          :step="stepsEnum.MAILVELOPE"
+          class="accordion-step__mailvelope"
+          title="Install Mailvelope"
+          content="Install Mailvelope and create your key"
+        />
+        <accordion-step
+          :step="stepsEnum.EXPORT_PUBLIC_KEY"
+          title="Export your public key"
+        >
+            <template #content>
+                <p>
+                    Export your public PGP key as a .asc file and download on your
+                    computer
+                </p>
+            </template>
+        </accordion-step>
+        <accordion-step
+          :step="stepsEnum.UPLOAD_PUBLIC_KEY"
+        >
+            <template #title>
+                Upload your publickey
+            </template>
+            <template #nextStepButton>
+                <b-button variant="info">The end!</b-button>
+            </template>
+        </accordion-step>
+    </AccordionWrapper>`,
+});
+
+
+export const Default = Template.bind({});
+Default.decorators=[bgStripedDecorator]
+Default.args = {
+    steps:data.steps,
+    step:data.step,
+    class:"p-2"
+};

package/stories/murmur/components/ActiveTextTruncate.stories.ts

@@ -0,0 +1,32 @@
+import { ActiveTextTruncate } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+import {bgStripedDecorator} from "../decorators";
+
+
+type Story = StoryObj<typeof ActiveTextTruncate>;
+const Template: Story = (args: any, {argTypes}: any) => ({
+    components: { ActiveTextTruncate },
+    props: Object.keys(argTypes),
+
+    setup() { return { args }; },
+    template: '<active-text-truncate v-bind="args">https://www.icij.org/investigations/luanda-leaks/banking-documents-reveal-consulting-giants-cash-windfall-under-angolan-billionaire-isabel-dos-santos/</active-text-truncate>',
+});
+
+export const Default = Template.bind({});
+Default.args = {direction:'ltr'};
+export const RightToLeft = Template.bind({});
+RightToLeft.args = {direction:'rtl'};
+
+
+export default {
+    title: 'Murmur/components/ActiveTextTruncate',
+    component: ActiveTextTruncate,
+    decorators: [bgStripedDecorator],
+    tags: ['autodocs'],
+    argTypes: {
+        direction: { control: 'inline-radio', options: ['ltr', 'rtl']},
+        ppms: { control: { type:'number', min:0}},
+        fadingMinWidth: { control: { type:'number', min:0}},
+        fadingMaxWidth: { control:{ type:'number', min:0}},
+    }
+};

package/stories/murmur/components/AdvancedLinkForm.stories.ts

@@ -0,0 +1,77 @@
+import {AdvancedLinkForm} from "@/components";
+import {BCard, BModal} from "bootstrap-vue-next";
+import {StoryObj} from "@storybook/vue3";
+import {Size} from "@/enums";
+import {modalDecorator, popoverDecorator} from "../decorators";
+
+export default {
+    components: {AdvancedLinkForm},
+    title: 'Murmur/components/AdvancedLinkForm',
+    component: AdvancedLinkForm,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof AdvancedLinkForm>;
+const Template: Story = (args: any) => ({
+    components: { AdvancedLinkForm },
+    setup() {
+        return {args};
+    },
+    template: '<AdvancedLinkForm v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    title:"Medtronic spends millions each year on lobbying in the US",
+    link:"https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying",
+    card:true
+};
+
+export const InsideModal = Template.bind({});
+InsideModal.decorators= [modalDecorator.bind(this,"Click to see the form","Advanced Link",Size.md)]
+InsideModal.args = {
+    title:"Medtronic spends millions each year on lobbying in the US",
+    link:"https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying",
+    card:true
+};
+
+
+
+export const InsidePopover = Template.bind({});
+InsidePopover.decorators= [popoverDecorator]
+InsidePopover.args = {
+    title:"Medtronic spends millions each year on lobbying in the US",
+    link:"https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying",
+    card:true,
+    small:true,
+    noFade:true,
+    forms:['raw', 'markdown']
+};
+
+const tabPillsDecorator = () => ({
+    components: { BCard },
+    template:`<div class="text-center p-4">
+        <b-card no-body>
+            <story/>
+        </b-card>
+    </div>`
+})
+export const WithTabPills = Template.bind({});
+WithTabPills.decorators= [tabPillsDecorator]
+WithTabPills.args = {
+    title:"Medtronic spends millions each year on lobbying in the US",
+    link:"https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying",
+    card:true,
+    pills:true,
+};
+export const WithTabPillsActiveClass = Template.bind({});
+WithTabPillsActiveClass.decorators= [tabPillsDecorator]
+WithTabPillsActiveClass.args = {
+    title:"Medtronic spends millions each year on lobbying in the US",
+    link:"https://projects.icij.org/the-implant-files/graphics/#/medtronic-lobbying",
+    card:true,
+    pills:true,
+    activeNavItemClass:"bg-primary fw-bold"
+};

package/stories/murmur/components/Brand.stories.ts

@@ -0,0 +1,30 @@
+import { Brand } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+export default {
+    title: 'Murmur/components/Brand',
+    component: Brand,
+    tags: ['autodocs'],
+    argTypes : {
+        color: { control: {type: 'color' }},
+        background: { control: {type: 'color' }},
+        size: {control: {type: 'number' }}
+}
+};
+
+type Story = StoryObj<typeof Brand>;
+const Template: Story = (args: any, argTypes:any) => ({
+    components: { Brand },
+    props:Object.keys(argTypes),
+    setup() {
+        return { args };
+    },
+    template: '<Brand v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+export const Animated = Template.bind({});
+Animated.args = {animated:true,background: '#cacaca'};
+export const Square = Template.bind({});
+Square.args = {square:true, background: '#cacaca'};

package/stories/murmur/components/BrandExpansion.stories.ts

@@ -0,0 +1,41 @@
+import { BrandExpansion } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+export default {
+    title: 'Murmur/components/BrandExpansion',
+    component: BrandExpansion,
+    tags: ['autodocs'],
+    argTypes: {
+        mode: { control: 'select', options: ['short', 'medium','long']},
+        animated: { control: 'boolean'},
+        dark: { control: 'boolean'},
+        color: { control: {type: 'color' }},
+        background: { control: {type: 'color' }},
+
+    }
+};
+
+type Story = StoryObj<typeof BrandExpansion>;
+const Template: Story = (args: any) => ({
+    components: { BrandExpansion },
+    setup() {
+        return { args };
+    },
+    template: '<BrandExpansion v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {mode:"short"};
+export const Medium = Template.bind({});
+Medium.args = {mode:"medium"};
+
+export const Long = Template.bind({});
+Long.args = {mode:"long"};
+export const Animated = Template.bind({});
+Animated.args = {animated:true};
+export const WhiteBackground = Template.bind({});
+WhiteBackground.args = {background:"#FFF", color:"#000"};
+export const BlackBackground = Template.bind({});
+BlackBackground.args = {background:"#000", color:"#FFF"};
+export const Dark = Template.bind({});
+Dark.args = {background:"#DDD", dark:true};

package/stories/murmur/components/ConfirmButton.stories.ts

@@ -0,0 +1,40 @@
+import { ConfirmButton } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+export default {
+    title: 'Murmur/components/ConfirmButton',
+    component: ConfirmButton,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+
+type Story = StoryObj<typeof ConfirmButton>;
+const Template: Story = (args: any) => ({
+    components: { ConfirmButton },
+    setup() {
+        return { args };
+    },
+    template: `<ConfirmButton v-bind="args" >Click to confirm</ConfirmButton>`,
+});
+
+function confirmedFn(){
+    alert('Confirmed !')
+}
+export const Default = Template.bind({});
+Default.args = {
+    class:"btn btn-info",
+    confirmed:confirmedFn,
+    noCloseButton:true
+};
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+    class:"btn btn-info" ,
+    description:"Do, or do not. There is no try."
+};
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+    class:"btn btn-info" ,
+    label:"Will you bilge Matey?",
+    yes:"Aye",
+    no:"Abandon ship!"
+};

package/stories/murmur/components/ContentPlaceholder.stories.ts

@@ -0,0 +1,41 @@
+import { ContentPlaceholder } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+import {ContentPlaceholderRows} from "@/utils/placeholderTypes";
+
+export default {
+    title: 'Murmur/components/ContentPlaceholder',
+    component: ContentPlaceholder,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof ContentPlaceholder>;
+const Template: Story = (args: any) => ({
+    components: { ContentPlaceholder },
+    setup() {
+        return { args };
+    },
+    template: '<ContentPlaceholder v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Columns = Template.bind({});
+const rows : ContentPlaceholderRows = [{height:"1em",boxes:[[0,"40%"],["5%","30%"],["5%","10%"]]}]
+Columns.args = {rows};
+export const FourRows = Template.bind({});
+const fourRowsDecorator = () => ({
+    components: { ContentPlaceholder },
+    template:`
+        <div class="card card-xs py-2 px-3 mx-auto m-4">
+            <story/>
+            <story/>
+            <story/>
+            <story/>
+        </div>
+    `
+})
+FourRows.decorators = [fourRowsDecorator]
+FourRows.args={class:"my-1"}

package/stories/murmur/components/CustomPagination.stories.ts

@@ -0,0 +1,42 @@
+import { CustomPagination } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+import {Size} from "../../../lib/enums";
+
+export default {
+    title: 'Murmur/components/CustomPagination',
+    component: CustomPagination,
+    tags: ['autodocs'],
+    argTypes: {
+        modelValue:{ type:"number", min:0 },
+        perPage:{ type:"number", min:0 },
+        totalRows:{ type:"number", min:0 },
+        pages:{ type:"number", min:0 },
+        size:{ type:"select", options:["sm","md","lg"] }
+    }
+};
+
+type Story = StoryObj<typeof CustomPagination>;
+const Template: Story = (args: any) => ({
+    components: { CustomPagination },
+    setup() {
+        return { args };
+    },
+    template: '<CustomPagination v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {modelValue:1, perPage:10,totalRows:200};
+export const Small = Template.bind({});
+Small.args = {modelValue:1, perPage:10,totalRows:200, size:Size.sm};
+export const Medium = Template.bind({});
+Medium.args = {modelValue:1, perPage:10,totalRows:200, size:Size.md};
+export const Large = Template.bind({});
+Large.args = {modelValue:1, perPage:10,totalRows:200, size:Size.lg};
+export const Compact = Template.bind({});
+Compact.args = {modelValue:1, perPage:10,totalRows:200, compact:true}
+export const Pills = Template.bind({});
+Pills.args = {modelValue:1, perPage:10,totalRows:200, pills:true}
+export const PillsSmall = Template.bind({});
+PillsSmall.args = {modelValue:1, perPage:10,totalRows:200, pills:true, size:Size.sm}
+export const PillsCompact = Template.bind({});
+PillsCompact.args = {modelValue:1, perPage:10,totalRows:200, pills:true, compact:true}

package/stories/murmur/components/DigitsInput.stories.ts

@@ -0,0 +1,29 @@
+import { DigitsInput } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+export default {
+    title: 'Murmur/components/DigitsInput',
+    component: DigitsInput,
+    tags: ['autodocs'],
+    argTypes: {
+        length:{type:'number',min:0}
+    }
+};
+
+type Story = StoryObj<typeof DigitsInput>;
+const Template: Story = (args: any) => ({
+    components: { DigitsInput },
+    setup() {
+        return { args };
+    },
+    template: '<DigitsInput v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+export const FourDigits = Template.bind({});
+FourDigits.args = {
+    length:4,
+    modelValue:2017
+};
+

package/stories/murmur/components/DonateForm.stories.ts

@@ -0,0 +1,29 @@
+import {DonateForm} from "@/components";
+import {StoryObj} from "@storybook/vue3";
+import {Size} from "@/enums";
+import {modalDecorator} from "../decorators";
+
+export default {
+  title: 'Murmur/components/DonateForm',
+  component: DonateForm,
+  tags: ['autodocs'],
+  argTypes: {}
+};
+
+type Story = StoryObj<typeof DonateForm>;
+const Template: Story = (args: any) => ({
+  components: {DonateForm},
+  setup() {
+    return {args};
+  },
+  template: '<DonateForm v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const InModal = Template.bind({})
+InModal.decorators = [modalDecorator.bind(this,"Click to see the form","Support ICIJ",Size.lg)]
+InModal.args = {
+  noTitle:true
+}

package/stories/murmur/components/EmbedForm.stories.ts

@@ -0,0 +1,35 @@
+import { EmbedForm } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+import {modalDecorator} from "../decorators";
+import { Size } from "@/enums";
+
+export default {
+    title: 'Murmur/components/EmbedForm',
+    component: EmbedForm,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof EmbedForm>;
+const Template: Story = (args: any) => ({
+    components: { EmbedForm },
+    setup() {
+        return { args };
+    },
+    template: '<EmbedForm v-bind="args" class="card card-sm mx-auto my-4 pt-2"/>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    noPreview:true,
+    height:330,
+    url:"https://projects.icij.org/the-implant-files/graphics/#/device-related-incidents-in-europe"
+};
+export const InModal = Template.bind({});
+InModal.decorators=[modalDecorator.bind(this,"Click to see the form with preview","Embed form with a preview",Size.lg)]
+InModal.args = {
+    noTitle:true,
+    height:550,
+    url:"https://projects.icij.org/the-implant-files/graphics/#/device-related-incidents-in-europe"
+};

package/stories/murmur/components/EmbeddableFooter.stories.ts

@@ -0,0 +1,59 @@
+import { EmbeddableFooter } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+import {BButton} from "bootstrap-vue-next";
+
+export default {
+    title: 'Murmur/components/EmbeddableFooter',
+    decorators:[()=>({template:`<div style='margin-top:200px;'><story/></div>`})],
+    component: EmbeddableFooter,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof EmbeddableFooter>;
+const Template: Story = (args: any) => ({
+    components: { EmbeddableFooter },
+    setup() {
+        return { args };
+    },
+    template: '<EmbeddableFooter v-bind="args" ></EmbeddableFooter>',
+});
+
+export const Default = Template.bind({});
+Default.args = { class:"position-relative card"};
+export const LeadText = Template.bind({});
+LeadText.args = {lead:"Secret project", class:"position-relative card"};
+export const Title = Template.bind({});
+Title.args = {title:"Secret project", class:"position-relative card"};
+export const TitleSlot : Story = (args: any) => ({
+    components: { EmbeddableFooter },
+    setup() {
+        return { args };
+    },
+    template: `<EmbeddableFooter v-bind="args" >
+        <template #title>
+            <span class="small">Demo<br />Project</span>
+        </template>
+    </EmbeddableFooter>`,
+});
+
+TitleSlot.args = { class:"position-relative card"};
+export const MainSlot : Story = (args: any) => ({
+    components: { EmbeddableFooter , BButton},
+    setup() {
+        return { args };
+    },
+    template: `<EmbeddableFooter v-bind="args" >
+        <div class="d-flex align-items-center">
+            <div class="flex-grow-1 me-2">
+                This is an helpful text.
+            </div>
+            <b-button variant="info" pill size="sm" class="ms-auto me-2">
+                Help
+            </b-button>
+        </div>
+    </EmbeddableFooter>`
+});
+
+MainSlot.args = { class:"position-relative card"};

package/stories/murmur/components/FollowUsPopover.stories.ts

@@ -0,0 +1,24 @@
+import { FollowUsPopover } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+export default {
+    title: 'Murmur/components/FollowUsPopover',
+    component: FollowUsPopover,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof FollowUsPopover>;
+const Template: Story = (args: any) => ({
+    components: { FollowUsPopover },
+    setup() {
+        return { args };
+    },
+    template: '<FollowUsPopover v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    class:"card card-xs my-4 mx-auto border border-primary"
+};

package/stories/murmur/components/GenericFooter.stories.ts

@@ -0,0 +1,27 @@
+import { GenericFooter } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+export default {
+    title: 'Murmur/components/GenericFooter',
+    component: GenericFooter,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof GenericFooter>;
+const Template: Story = (args: any) => ({
+    components: { GenericFooter },
+    setup() {
+        return { args };
+    },
+    template: '<GenericFooter v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {class:"card m-4"};
+export const AboutUs = Template.bind({});
+AboutUs.args = {showAboutUs:true};
+
+export const Version = Template.bind({});
+Version.args = {version:"alpha-10.2"};

package/stories/murmur/components/GenericHeader.stories.ts

@@ -0,0 +1,27 @@
+import { GenericHeader } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+export default {
+    title: 'Murmur/components/GenericHeader',
+    component: GenericHeader,
+    tags: ['autodocs'],
+    argTypes: {
+        brandOptions:{type:"select",}
+    }
+};
+
+type Story = StoryObj<typeof GenericHeader>;
+const Template: Story = (args: any) => ({
+    components: { GenericHeader },
+    setup() {
+        return { args };
+    },
+    template: '<GenericHeader v-bind="args" ></GenericHeader>',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.decorators= [() => ({ template: '<div style="height: 1800px"><story/></div>' })]
+Default.parameters = { layout: 'fullscreen' }
+export const NoHeadroom = Template.bind({});
+NoHeadroom.args = {noHeadroom:true, position:"relative"};

package/stories/murmur/components/HapticCopy.stories.ts

@@ -0,0 +1,40 @@
+import {HapticCopy} from "@/components";
+import {StoryObj} from "@storybook/vue3";
+import {ref, watch} from "vue";
+type Story = StoryObj<typeof HapticCopy>
+
+const Template:Story = (args: any, {argTypes}: any) => ({
+    components: { HapticCopy },
+    props: Object.keys(argTypes),
+    setup(){ return {args}  },
+    template: `<HapticCopy v-bind="args" />`,
+})
+
+export const Default = Template.bind({});
+Default.args = {
+    text:"Lorem info sit amet",
+    class:"btn-info"
+}
+
+export const Feedback = Template.bind({});
+Feedback.template = `<HapticCopy  v-bind="args" /></button>`
+Feedback.args = {
+    hideLabel: true,
+    tooltipPlacement: "right",
+    text: "Lorem info sit amet",
+    class: "btn-secondary"
+}
+
+export default {
+    title: 'Murmur/Components/HapticCopy',
+    component: HapticCopy,
+    tags: ['autodocs'],
+    decorators:[()=>({template:"<div class='p-2 text-center'><story/></div>"})],
+    argTypes: {
+        hideLabel: { control: 'boolean' },
+        tooltipPlacement: { control: 'text' },
+        title: { control: 'text' }
+
+    }
+
+};

package/stories/murmur/components/ImddbHeader.stories.ts

@@ -0,0 +1,27 @@
+import { ImddbHeader } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+export default {
+    title: 'Murmur/components/ImddbHeader',
+    component: ImddbHeader,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof ImddbHeader>;
+const Template: Story = (args: any) => ({
+    components: { ImddbHeader },
+    setup() {
+        return { args };
+    },
+    template: '<ImddbHeader v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.decorators= [() => ({ template: '<div style="height: 1800px"><story/></div>' })]
+Default.parameters = { layout: 'fullscreen' }
+
+export const NoHeadroom = Template.bind({});
+NoHeadroom.args = {noHeadroom:true, position:"relative"};