@icij/murmur-next 4.0.0

package/stories/murmur/components/OrdinalLegend.stories.ts

@@ -0,0 +1,49 @@
+import { OrdinalLegend } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+
+const data = {
+    highlighted: 'dc',
+    icijOffices: [
+        { id: 'paris', color: '#6e40aa', label: 'Paris, France' },
+        { id: 'sydney', color: '#ff5e63', label: 'Sydney, Australia' },
+        { id: 'dc', color: '#aff05b', label: 'Washington DC, USA' }
+    ]}
+export default {
+    title: 'Murmur/components/OrdinalLegend',
+    component: OrdinalLegend,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof OrdinalLegend>;
+const Template: Story = (args: any) => ({
+    components: { OrdinalLegend },
+    setup() {
+        return { args };
+    },
+    template: '<OrdinalLegend v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    data:data.icijOffices,
+    value:"paris"
+};
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+    data:data.icijOffices,
+    horizontal:true
+};
+export const Highlighted = Template.bind({});
+Highlighted.args = {
+    data:data.icijOffices,
+    highlight:data.highlighted,
+    horizontal:true
+};
+export const CustomMarker = Template.bind({});
+CustomMarker.args = {
+    data:data.icijOffices,
+    markerPath:"M384 192C384 279.4 267 435 215.7 499.2C203.4 514.5 180.6 514.5 168.3 499.2C116.1 435 0 279.4 0 192C0 85.96 85.96 0 192 0C298 0 384 85.96 384 192H384z"
+};

package/stories/murmur/components/RangePicker.stories.ts

@@ -0,0 +1,98 @@
+import { RangePicker } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+import {BBadge} from "bootstrap-vue-next";
+import {ColumnChart} from "../../../lib/main";
+import {range} from "lodash";
+import {computed} from "vue";
+
+export default {
+    title: 'Murmur/components/RangePicker',
+    component: RangePicker,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof RangePicker>;
+const Template: Story = (args: any) => ({
+    components: { RangePicker, BBadge },
+    setup() {
+        return { args };
+    },
+    template: `<RangePicker v-bind="args" ></RangePicker>`
+});
+export const Default = Template.bind({});
+Default.decorators=[()=>({template:`<div style="width:500px;"><story/></div>`})]
+Default.args = {
+    range:[5,10]
+}
+
+export const WithOffsets = (args: any) => ({
+    components: { RangePicker, BBadge },
+    setup() {
+        return { args };
+    },
+    template: `
+        <RangePicker v-bind="args" >
+            <div class="bg-white p-3 text-center text-uppercase">
+                <b-badge>{{ args.range[0] * 100 }}%</b-badge> - <b-badge>{{ args.range[1] * 100 }}%</b-badge>
+            </div>
+        </RangePicker>
+    `,
+});
+WithOffsets.args = {
+    range:[5,10],
+
+};
+export const WithColumnChart = (args: any) => ({
+    components: { RangePicker, ColumnChart  },
+    setup() {
+        const rangeStartYear = computed(()=> {
+            const start = args.rangeYears[0]
+            const year = Math.ceil(start * (args.dataPerYear.length - 1))
+            return args.dataPerYear[year].date
+        })
+        const rangeEndYear = computed(()=> {
+            const end = args.rangeYears[1]
+            return args.dataPerYear[Math.floor(end * (args.dataPerYear.length - 1))].date
+        })
+        const highlightedYears = computed(()=> {
+            return range(rangeStartYear.value, rangeEndYear.value + 1)
+        })
+        return { args,highlightedYears };
+    },
+    template: `
+        <div class="bg-light p-5">
+            <range-picker :snap="1 / args.dataPerYear.length" variant="dark" v-model:range="args.rangeYears" class="py-2" hover>
+                <column-chart :bar-padding=0 :bar-margin=20 :highlights="highlightedYears" :data="args.dataPerYear" :fixed-height="200" no-y-axis no-tooltips />
+            </range-picker>
+        </div>
+
+    `,
+});
+WithColumnChart.args = {
+    range: [.2, .8],
+    rangeYears: [0, 1 / 5],
+    dataPerYear: [
+        {
+            date: 2018,
+            value: 120
+        },
+        {
+            date: 2019,
+            value: 100
+        },
+        {
+            date: 2020,
+            value: 80
+        },
+        {
+            date: 2021,
+            value: 110
+        },
+        {
+            date: 2022,
+            value: 130
+        }
+    ]
+};

package/stories/murmur/components/ResponsiveIframe.stories.ts

@@ -0,0 +1,24 @@
+import { ResponsiveIframe } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+export default {
+    title: 'Murmur/components/ResponsiveIframe',
+    component: ResponsiveIframe,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof ResponsiveIframe>;
+const Template: Story = (args: any) => ({
+    components: { ResponsiveIframe },
+    setup() {
+        return { args };
+    },
+    template: `<ResponsiveIframe v-bind="args" />`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    url:"https://projects.icij.org/the-implant-files/graphics/#/adverse-events?no-embeddable-footer=1"
+};

package/stories/murmur/components/ScaleLegend.stories.ts

@@ -0,0 +1,65 @@
+import { ScaleLegend } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+import * as d3 from 'd3'
+export default {
+    title: 'Murmur/components/ScaleLegend',
+    component: ScaleLegend,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof ScaleLegend>;
+const Template: Story = (args: any) => ({
+    components: { ScaleLegend },
+    setup() {
+        return { args };
+    },
+    template: '<ScaleLegend v-bind="args" >{{args.default}}</ScaleLegend>',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+export const Width = Template.bind({});
+Width.args = {width:"200"};
+export const ColorScale = Template.bind({});
+ColorScale.args = {
+    colorScaleStart:"#fafa6e",
+    colorScaleEnd:"teal"
+};
+
+function thresholdScaleFn () {
+    return d3.scaleThreshold()
+      .domain([1e4, 2e4, 3e4, 4e4, 5e4])
+      // @ts-ignore
+      .range(["#D12229", "#F68A1E", "#FDE01A", "#007940", "#24408E", "#732982"])
+}
+export const ThresholdScale = Template.bind({});
+ThresholdScale.args = {
+    min:0,
+    max:6e4,
+    colorScale:thresholdScaleFn()
+};
+export const HighlightValue = Template.bind({});
+HighlightValue.args = {
+    width:400,
+    cursorValue:46
+};
+
+export const CustomizedWithSlot: Story = (args: any) => ({
+    components: { ScaleLegend },
+    setup() {
+        return { args };
+    },
+    template: `<ScaleLegend v-bind="args" ><template #cursor="{ value }">
+        <div class="bg-dark text-light px-3 py-2">
+            {{value}}
+        </div>
+    </template></ScaleLegend>`
+});
+CustomizedWithSlot.decorators=[()=>({template:`<div style="margin:40px;"><story/></div>`})]
+CustomizedWithSlot.args={
+    width:400,
+    cursorValue:10
+}

package/stories/murmur/components/SecretInput.stories.ts

@@ -0,0 +1,60 @@
+import { SecretInput } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+import {Size} from "../../../lib/enums";
+
+export default {
+    title: 'Murmur/components/SecretInput',
+    component: SecretInput,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof SecretInput>;
+const Template: Story = (args: any) => ({
+    components: { SecretInput },
+    setup() {
+        return { args };
+    },
+    template: '<SecretInput v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+export const NoToggler = Template.bind({});
+NoToggler.args = {noToggler:true};
+export const NoHapticCopy = Template.bind({});
+NoHapticCopy.args = {noHapticCopy:true};
+export const HideSecret = Template.bind({});
+HideSecret.args = {
+    value:"this is a secret passphrase 🕵️‍♀️"
+};
+export const ShowSecret = Template.bind({});
+ShowSecret.args = {
+    value:"this is a secret passphrase 🕵️‍♀️",
+    visible:true
+};
+export const SmallSize = Template.bind({});
+SmallSize.args = {
+    value:"this is a secret passphrase 🕵️‍♀️",
+    visible:true,
+    size:Size.sm
+};
+export const MediumSize = Template.bind({});
+MediumSize.args = {
+    value:"this is a secret passphrase 🕵️‍♀️",
+    visible:true,
+    size:Size.md
+};
+export const LargeSize = Template.bind({});
+LargeSize.args = {
+    value:"this is a secret passphrase 🕵️‍♀️",
+    visible:true,
+    size:Size.lg
+};
+export const HapticCopyVariant = Template.bind({});
+HapticCopyVariant.args = {
+    value:"this is a secret passphrase 🕵️‍♀️",
+    visible:true,
+    hapticCopyVariant:"secondary"
+};

package/stories/murmur/components/SelectableDropdown.stories.ts

@@ -0,0 +1,143 @@
+import { SelectableDropdown } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+import {onBeforeMount, reactive, ref, toRef, toRefs, watch} from "vue";
+
+const data = {
+    country: 'Peru',
+    countries: [],
+    filteredCountries: ['Spain', 'Peru', 'France'],
+    twoCountries: ['Spain', 'France'],
+    treeCountries: ['Spain', 'Peru', 'France'],
+    allCountries: ['France', 'United States of America', 'Spain', 'Peru'],
+    countryCollection: [
+        { label: 'Spain' },
+        { label: 'Peru' },
+        { label: 'France' }
+    ],
+    selectedGames: [{uid: 'sf1'},{uid: 'sf3'},{uid: 'sf5'}],
+    streetFighters : [
+        { label: 'Street Fighter (I)',   uid: 'sf1' },
+        { label: 'Street Fighter (II)',  uid: 'sf2' },
+        { label: 'Street Fighter (III)', uid: 'sf3' },
+        { label: 'Street Fighter (IV)',  uid: 'sf4' },
+        { label: 'Street Fighter (V)',   uid: 'sf5' },
+    ],
+    frenchCities:[],
+    selectedFrenchCities:[]
+};
+
+const countryArgTypes = {
+    modelValue:{control:"multi-select",options:data.allCountries}
+}
+const SFArgTypes = {
+    modelValue:{control:"object"}
+}
+export default {
+    title: 'Murmur/components/SelectableDropdown',
+    component: SelectableDropdown,
+    tags: ['autodocs']
+};
+
+type Story = StoryObj<typeof SelectableDropdown>;
+const Template: Story = (args: any) => ({
+    components: { SelectableDropdown },
+    setup() {
+        return { args };
+    },
+    template: '<SelectableDropdown v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    modelValue:data.country,
+    items:data.allCountries,
+}
+Default.argTypes= countryArgTypes
+export const WithSerializer = Template.bind({});
+WithSerializer.args = {
+    modelValue:data.country,
+    items:data.allCountries,
+    deactivateKeys :true,
+    serializer:(item:string) => item.toUpperCase()
+}
+WithSerializer.argTypes= countryArgTypes
+export const WithSerializerLabel = Template.bind({});
+WithSerializerLabel.args = {
+    modelValue:data.country,
+    items:data.countryCollection,
+    serializer:(item:{label:string}) => item.label,
+    deactivateKeys :true,
+    multiple :true
+}
+export const WithSerializerAndEqualFn = Template.bind({});
+
+WithSerializerAndEqualFn.args = {
+    eq:(item:any, other:any) => item.uid === other.uid,
+    serializer:(item:{label:string}) => item.label,
+    items:data.streetFighters,
+    deactivateKeys :true,
+    multiple :true,
+    modelValue:data.selectedGames
+}
+WithSerializerAndEqualFn.argTypes= SFArgTypes
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+    modelValue:data.country,
+    items:data.allCountries,
+    deactivateKeys :true,
+    multiple :true
+}
+Multiple.argTypes= countryArgTypes
+export const DynamicList = Template.bind({});
+DynamicList.decorators = [(_storyFn:any,context:any)=>({
+    setup() {
+        const { modelValue } = toRefs( context.args)
+        function onClickThree(){
+            modelValue.value = data.treeCountries
+        }
+        function onClickTwo(){
+            modelValue.value = data.twoCountries
+        }
+        return {onClickTwo,onClickThree}
+    },
+    template:`    
+    <story/>
+    <button class="btn btn-outline-secondary mt-2 mx-2" @click="onClickThree">
+      Tree countries
+    </button>
+    <button class="btn btn-outline-secondary mt-2 mx-2" @click="onClickTwo">
+      Two countries
+    </button>`})]
+DynamicList.args = {
+    modelValue:data.filteredCountries,
+    items:data.allCountries,
+    deactivateKeys :true,
+    multiple :true
+}
+
+DynamicList.argTypes= countryArgTypes
+
+
+export const BigList = Template.bind({});
+BigList.decorators=[(fn:any,ctx:any)=>({
+    setup(){
+        const frenchCities = ref<any>([])
+        const args = toRefs(ctx.args)
+        onBeforeMount(async ()=>{
+            const url = 'https://raw.githubusercontent.com/high54/Communes-France-JSON/master/france.json';
+            const cities = await fetch(url).then(data=> data.json());
+            args.items.value = [...new Set(cities.map((city:any)=> city.Code_postal + ' - ' + city.Nom_commune).sort())];
+        })
+
+        return {...args}
+    },
+    template:`<story />`
+})]
+BigList.args = {
+    modelValue:[],
+    items:data.frenchCities,
+    deactivateKeys :true,
+    multiple :true,
+    scrollerHeight:"500px",
+}

package/stories/murmur/components/SharingOptions.stories.ts

@@ -0,0 +1,32 @@
+import { SharingOptions } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+export default {
+    title: 'Murmur/components/SharingOptions',
+    component: SharingOptions,
+    tags: ['autodocs'],
+    argTypes: {
+        direction:{control:'select',options:['row', 'row-reverse', 'column', 'column-reverse']}
+    }
+};
+
+type Story = StoryObj<typeof SharingOptions>;
+const Template: Story = (args: any) => ({
+    components: { SharingOptions },
+    setup() {
+        return { args };
+    },
+    template: `<SharingOptions v-bind="args" />`,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+export const WithUrl = Template.bind({});
+WithUrl.args = {
+    url:"https://www.icij.org/",
+    class:"justify-content-center"
+};
+export const DirectionColumn = Template.bind({});
+DirectionColumn.args = {
+    direction:"column"
+};

package/stories/murmur/components/SharingOptionsLink.stories.ts

@@ -0,0 +1,53 @@
+import { SharingOptionsLink } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+export default {
+    title: 'Murmur/components/SharingOptionsLink',
+    component: SharingOptionsLink,
+    tags: ['autodocs'],
+    argTypes: {
+        network:{control:"select",options:["twitter","facebook","linkedin","email"]}
+    }
+};
+
+type Story = StoryObj<typeof SharingOptionsLink>;
+const Template: Story = (args: any) => ({
+    components: { SharingOptionsLink },
+    setup() {
+        return { args };
+    },
+    template: '<SharingOptionsLink v-bind="args" >{{args.default}}</SharingOptionsLink>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    network:"twitter",
+    class:"btn btn-outline-primary mx-1",
+    url:"https://www.icij.org"
+};
+
+export const NoIcon = Template.bind({});
+NoIcon.args = {
+    network:"twitter",
+    class:"btn btn-outline-primary mx-1",
+    url:"https://www.icij.org",
+    noIcon:true
+};
+export const CustomSlot = Template.bind({});
+CustomSlot.args = {
+    network:"twitter",
+    class:"btn btn-outline-primary mx-1",
+    url:"https://www.icij.org",
+    noIcon:true,
+    default:"Share twitter"
+};
+export const CustomTagAndSlot = Template.bind({});
+CustomTagAndSlot.args = {
+    network:"twitter",
+    title:"Murmur Design System",
+    class:"btn btn-warning",
+    url:"https://www.icij.org",
+    noIcon:true,
+    tag:"button",
+    default:"Twitter Button"
+};

package/stories/murmur/components/SignUpForm.stories.ts

@@ -0,0 +1,51 @@
+import { SignUpForm } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+
+export default {
+    title: 'Murmur/components/SignUpForm',
+    component: SignUpForm,
+    tags: ['autodocs'],
+    argTypes: {
+        variant:{type:'select',options:[
+            "primary",
+            "secondary",
+            "success",
+            "danger",
+            "warning",
+            "info",
+            "light",
+            "dark",
+            ]}
+    }
+};
+
+type Story = StoryObj<typeof SignUpForm>;
+const Template: Story = (args: any) => ({
+    components: { SignUpForm },
+    setup() {
+        return { args };
+    },
+    template: '<SignUpForm v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Variant = Template.bind({});
+Variant.args = {
+    variant:'secondary'
+};
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+    variant:'secondary',
+    horizontal :true,
+    defaultGroups:'group[9][1],group[9][131072]',
+};
+export const NoLabel = Template.bind({});
+NoLabel.args = {
+    noLabel:true,
+};
+export const MailChimpGroups = Template.bind({});
+MailChimpGroups.args = {
+    defaultGroups:'group[9][1],group[9][131072]',
+};

package/stories/murmur/components/SlideUpDown.stories.ts

@@ -0,0 +1,32 @@
+import { SlideUpDown } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+import {toggleDecorator} from "../decorators";
+
+export default {
+    title: 'Murmur/components/SlideUpDown',
+    component: SlideUpDown,
+    tags: ['autodocs'],
+    argTypes: {
+    }
+};
+
+type Story = StoryObj<typeof SlideUpDown>;
+const Template: Story = (args: any) => ({
+    components: { SlideUpDown },
+    setup() {
+        return { args }
+    },
+    template: `
+    <slide-up-down v-bind="args">
+        <div class="card-body">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+    </slide-up-down>`
+})
+
+export const Default = Template.bind({})
+Default.args = {
+    active:true
+}
+Default.decorators = [toggleDecorator]
+

package/stories/murmur/components/TexturedDeck.stories.ts

@@ -0,0 +1,83 @@
+import { TexturedDeck } from "@/components";
+import { StoryObj } from "@storybook/vue3";
+import {BButton} from "bootstrap-vue-next";
+import {Brand} from "@/components";
+
+export default {
+    title: 'Murmur/components/TexturedDeck',
+    component: TexturedDeck,
+    tags: ['autodocs'],
+    argTypes: {
+        modelValue:{control:"select",options:["brick","crack","rock","sand"]},
+        size:{control:"select",options:["cover", "contain", "auto", "50%", "50%", "auto"]}
+    }
+};
+
+type Story = StoryObj<typeof TexturedDeck>;
+const Template: Story = (args: any) => ({
+    components: { TexturedDeck },
+    setup() {
+        return { args };
+    },
+    template: `<TexturedDeck class="p-5 m-4" v-bind="args" >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </TexturedDeck>`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+};
+export const Black = Template.bind({});
+Black.args = {
+    black:true
+};
+
+export const BrickDonate = (args: any) => ({
+    components: { TexturedDeck,BButton },
+    setup() {
+        return { args };
+    },
+    template: `<textured-deck class="p-5 m-4 row no-gutters align-items-center" v-bind="args">
+        <div class="col">
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </div>
+        <div class="col-4 text-center">
+            <b-button variant="primary" class="text-dark">
+                Donate now
+            </b-button>
+        </div>
+    </textured-deck>`
+});
+
+BrickDonate.args = {
+    modelValue:"brick"
+};
+export const CrackBrand = (args: any) => ({
+    components: { TexturedDeck,Brand },
+    setup() {
+        return { args };
+    },
+    template: `<textured-deck class="p-5 m-4 d-flex align-items-center" v-bind="args">
+        <brand class="me-5" /> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </textured-deck>`
+});
+
+CrackBrand.args = {
+    modelValue:"crack"
+};
+export const Rock = Template.bind({});
+Rock.args = {
+    modelValue:"rock"
+};
+export const Sand = Template.bind({});
+Sand.args = {
+    modelValue:"sand"
+};
+export const Crack = Template.bind({});
+Crack.args = {
+    modelValue:"crack"
+};
+export const Carbon = Template.bind({});
+Carbon.args = {
+    modelValue:"carbon"
+};