correct and complete unit tests in Front-End
This commit is contained in:
Laurent GAY
15
tests/unit/specs/components/stories/ActorCardStory.spec.ts
Normal file
15
tests/unit/specs/components/stories/ActorCardStory.spec.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import ActorCardStory from "@/components/Account/ActorCard.story.vue";
|
||||
|
||||
describe("Actor Card Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(ActorCardStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
15
tests/unit/specs/components/stories/ActorInlineStory.spec.ts
Normal file
15
tests/unit/specs/components/stories/ActorInlineStory.spec.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import ActorInlineStory from "@/components/Account/ActorInline.story.vue";
|
||||
|
||||
describe("Actor Inline Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(ActorInlineStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
15
tests/unit/specs/components/stories/AddressInfoStory.spec.ts
Normal file
15
tests/unit/specs/components/stories/AddressInfoStory.spec.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import AddressInfoStory from "@/components/Address/AddressInfo.story.vue";
|
||||
|
||||
describe("Address Info Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(AddressInfoStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import AuthProvidersStory from "@/components/User/AuthProviders.story.vue";
|
||||
|
||||
describe("Auth Providers Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(AuthProvidersStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import CategoriesPreviewStory from "@/components/Home/CategoriesPreview.story.vue";
|
||||
import { getMockClient } from "../../mocks/client";
|
||||
import { CATEGORY_STATISTICS } from "@/graphql/statistics";
|
||||
|
||||
describe("Categories Preview Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(CategoriesPreviewStory, {
|
||||
global: getMockClient([CATEGORY_STATISTICS]),
|
||||
});
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
import { afterEach, describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import CategoryCardStory from "@/components/Categories/CategoryCard.story.vue";
|
||||
|
||||
describe("Category Card Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(CategoryCardStory);
|
||||
};
|
||||
afterEach(() => {});
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import DateCalendarIconStory from "@/components/Event/DateCalendarIcon.story.vue";
|
||||
|
||||
describe("Date Calendar Icon Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(DateCalendarIconStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import DiscussionListItemStory from "@/components/Discussion/DiscussionListItem.story.vue";
|
||||
|
||||
describe("Discussion List Item Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(DiscussionListItemStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
25
tests/unit/specs/components/stories/EventCardStory.spec.ts
Normal file
25
tests/unit/specs/components/stories/EventCardStory.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { beforeEach, describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import EventCardStory from "@/components/Event/EventCard.story.vue";
|
||||
import {
|
||||
createMockIntersectionObserver,
|
||||
getMockClient,
|
||||
} from "../../mocks/client";
|
||||
import { DEFAULT_PICTURE } from "@/graphql/config";
|
||||
|
||||
describe("Event Card Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(EventCardStory, {
|
||||
global: getMockClient([DEFAULT_PICTURE]),
|
||||
});
|
||||
};
|
||||
beforeEach(() => {
|
||||
createMockIntersectionObserver();
|
||||
});
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import EventListViewCardStory from "@/components/Event/EventListViewCard.story.vue";
|
||||
|
||||
describe("Event List View Card Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(EventListViewCardStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
15
tests/unit/specs/components/stories/GroupCardStory.spec.ts
Normal file
15
tests/unit/specs/components/stories/GroupCardStory.spec.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import GroupCardStory from "@/components/Group/GroupCard.story.vue";
|
||||
|
||||
describe("Group Card Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(GroupCardStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import GroupMemberCardStory from "@/components/Group/GroupMemberCard.story.vue";
|
||||
|
||||
describe("Group Member Card Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(GroupMemberCardStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import InlineAddressStory from "@/components/Address/InlineAddress.story.vue";
|
||||
|
||||
describe("Inline Address Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(InlineAddressStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import InstanceContactLinkStory from "@/components/About/InstanceContactLink.story.vue";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
|
||||
describe("Instance Contact Link Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(InstanceContactLinkStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import MaterialIconStory from "@/components/core/MaterialIcon.story.vue";
|
||||
|
||||
describe("Material Icon Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(MaterialIconStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import MobilizonPresentationStory from "@/components/Home/MobilizonPresentation.story.vue";
|
||||
|
||||
describe("Mobilizon Presentation Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(MobilizonPresentationStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import PopoverActorCardStory from "@/components/Account/PopoverActorCard.story.vue";
|
||||
|
||||
describe("Popover Actor Card Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(PopoverActorCardStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
import { beforeEach, describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import PostListItemStory from "@/components/Post/PostListItem.story.vue";
|
||||
import {
|
||||
createMockIntersectionObserver,
|
||||
getMockClient,
|
||||
} from "../../mocks/client";
|
||||
import { DEFAULT_PICTURE } from "@/graphql/config";
|
||||
|
||||
describe("Post List Item Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(PostListItemStory, {
|
||||
global: getMockClient([DEFAULT_PICTURE]),
|
||||
});
|
||||
};
|
||||
beforeEach(() => {
|
||||
createMockIntersectionObserver();
|
||||
});
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import ProfileOnboardingStory from "@/components/Account/ProfileOnboarding.story.vue";
|
||||
|
||||
describe("Profile On boarding Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(ProfileOnboardingStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import ShareEventModalStory from "@/components/Event/ShareEventModal.story.vue";
|
||||
|
||||
describe("Share Event Modal Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(ShareEventModalStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import SharePostModalStory from "@/components/Post/SharePostModal.story.vue";
|
||||
|
||||
describe("Share Post Modal Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(SharePostModalStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import SkeletonEventResultStory from "@/components/Event/SkeletonEventResult.story.vue";
|
||||
|
||||
describe("Skeleton Event Result Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(SkeletonEventResultStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
15
tests/unit/specs/components/stories/TagInputStory.spec.ts
Normal file
15
tests/unit/specs/components/stories/TagInputStory.spec.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import TagInputStory from "@/components/Event/TagInput.story.vue";
|
||||
|
||||
describe("Tag Input Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(TagInputStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { mount, VueWrapper } from "@vue/test-utils";
|
||||
import UnloggedIntroductionStory from "@/components/Home/UnloggedIntroduction.story.vue";
|
||||
|
||||
describe("Unlogged Introduction Story", () => {
|
||||
let wrapper: VueWrapper;
|
||||
|
||||
const generateWrapper = () => {
|
||||
wrapper = mount(UnloggedIntroductionStory);
|
||||
};
|
||||
it("Default", async () => {
|
||||
generateWrapper();
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,110 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Actor Card Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="local">
|
||||
<div data-v-b0ff4ece="" class="bg-white dark:bg-mbz-purple rounded-lg flex space-x-4 items-center flex-col p-4 shadow-md sm:p-8 pb-10 w-80">
|
||||
<div data-v-b0ff4ece="" class="flex pl-2"><span data-v-b0ff4ece="" class="ltr:-mr-0.5 rtl:-ml-0.5 material-design-icon account-circle-icon ltr:-mr-0.5 rtl:-ml-0.5" aria-hidden="true" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span></div>
|
||||
<div data-v-b0ff4ece="" class="text-center overflow-hidden w-full">
|
||||
<h5 data-v-b0ff4ece="" class="text-xl font-medium violet-title tracking-tight text-gray-900 dark:text-gray-200 whitespace-pre-line line-clamp-2">Thomas Citharel</h5>
|
||||
<p data-v-b0ff4ece="" class="text-gray-500 dark:text-gray-200 truncate"><span data-v-b0ff4ece="" dir="ltr">@tcit</span></p>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div data-v-b0ff4ece="" class="flex pr-2">
|
||||
<router-link data-v-b0ff4ece="" to="[object Object]"><span data-v-b0ff4ece="" aria-hidden="true" class="material-design-icon email-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"><!--v-if--></path></svg></span></router-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
class="p-4 bg-white rounded-lg shadow-md sm:p-8 flex items-center space-x-4"
|
||||
dir="auto"
|
||||
>
|
||||
<div class="flex-shrink-0">
|
||||
<figure class="w-12 h-12" v-if="actor.avatar">
|
||||
<img
|
||||
class="rounded-lg"
|
||||
:src="actor.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<o-icon
|
||||
v-else
|
||||
size="large"
|
||||
icon="account-circle"
|
||||
class="ltr:-mr-0.5 rtl:-ml-0.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<h5 class="text-xl font-medium violet-title tracking-tight text-gray-900">
|
||||
{{ displayName(actor) }}
|
||||
</h5>
|
||||
<p class="text-gray-500 truncate" v-if="actor.name">
|
||||
<span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
|
||||
</p>
|
||||
<div
|
||||
v-if="full"
|
||||
class="line-clamp-3"
|
||||
:class="{ limit: limit }"
|
||||
v-html="actor.summary"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</variant>
|
||||
<variant title="remote">
|
||||
<div data-v-b0ff4ece="" class="bg-white dark:bg-mbz-purple rounded-lg flex space-x-4 items-center flex-col p-4 shadow-md sm:p-8 pb-10 w-80">
|
||||
<div data-v-b0ff4ece="" class="flex pl-2">
|
||||
<figure data-v-b0ff4ece="" class="w-12 h-12"><img data-v-b0ff4ece="" class="rounded-full object-cover h-full" src="https://stockage.framapiaf.org/framapiaf/accounts/avatars/000/000/399/original/52b08a3e80b43d40.jpg" alt="" width="48" height="48" loading="lazy"></figure>
|
||||
</div>
|
||||
<div data-v-b0ff4ece="" class="text-center overflow-hidden w-full">
|
||||
<h5 data-v-b0ff4ece="" class="text-xl font-medium violet-title tracking-tight text-gray-900 dark:text-gray-200 whitespace-pre-line line-clamp-2">Framasoft</h5>
|
||||
<p data-v-b0ff4ece="" class="text-gray-500 dark:text-gray-200 truncate"><span data-v-b0ff4ece="" dir="ltr">@framasoft@framapiaf.org</span></p>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div data-v-b0ff4ece="" class="flex pr-2">
|
||||
<router-link data-v-b0ff4ece="" to="[object Object]"><span data-v-b0ff4ece="" aria-hidden="true" class="material-design-icon email-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"><!--v-if--></path></svg></span></router-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
class="p-4 bg-white rounded-lg shadow-md sm:p-8 flex items-center space-x-4"
|
||||
dir="auto"
|
||||
>
|
||||
<div class="flex-shrink-0">
|
||||
<figure class="w-12 h-12" v-if="actor.avatar">
|
||||
<img
|
||||
class="rounded-lg"
|
||||
:src="actor.avatar.url"
|
||||
alt=""
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</figure>
|
||||
<o-icon
|
||||
v-else
|
||||
size="large"
|
||||
icon="account-circle"
|
||||
class="ltr:-mr-0.5 rtl:-ml-0.5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<h5 class="text-xl font-medium violet-title tracking-tight text-gray-900">
|
||||
{{ displayName(actor) }}
|
||||
</h5>
|
||||
<p class="text-gray-500 truncate" v-if="actor.name">
|
||||
<span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
|
||||
</p>
|
||||
<div
|
||||
v-if="full"
|
||||
class="line-clamp-3"
|
||||
:class="{ limit: limit }"
|
||||
v-html="actor.summary"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,26 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Actor Inline Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="local">
|
||||
<div data-v-397a2c1c="" class="inline-flex items-start gap-2 bg-white dark:bg-violet-1 dark:text-white p-2 rounded-md">
|
||||
<div data-v-397a2c1c="" class="flex-none"><span data-v-397a2c1c="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="36" height="36" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span></div>
|
||||
<div data-v-397a2c1c="" class="flex-auto">
|
||||
<p data-v-397a2c1c="" class="text-lg line-clamp-3 md:line-clamp-2 max-w-xl">Thomas Citharel</p>
|
||||
<p data-v-397a2c1c="" class="text-sm text-gray-500 dark:text-gray-300 truncate"> @tcit</p>
|
||||
</div>
|
||||
</div>
|
||||
</variant>
|
||||
<variant title="remote">
|
||||
<div data-v-397a2c1c="" class="inline-flex items-start gap-2 bg-white dark:bg-violet-1 dark:text-white p-2 rounded-md">
|
||||
<div data-v-397a2c1c="" class="flex-none">
|
||||
<figure data-v-397a2c1c=""><img data-v-397a2c1c="" class="rounded-xl" src="https://stockage.framapiaf.org/framapiaf/accounts/avatars/000/000/399/original/52b08a3e80b43d40.jpg" alt="" width="36" height="36" loading="lazy"></figure>
|
||||
</div>
|
||||
<div data-v-397a2c1c="" class="flex-auto">
|
||||
<p data-v-397a2c1c="" class="text-lg line-clamp-3 md:line-clamp-2 max-w-xl">Framasoft</p>
|
||||
<p data-v-397a2c1c="" class="text-sm text-gray-500 dark:text-gray-300 truncate"> @framasoft@framapiaf.org</p>
|
||||
</div>
|
||||
</div>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,20 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Address Info Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="Basic">
|
||||
<address data-v-f169049d="" dir="auto">
|
||||
<!--v-if-->
|
||||
<p data-v-f169049d=""><span data-v-f169049d="" class="addressDescription" title="Locaux Motiv">Locaux Motiv</span><br data-v-f169049d=""><span data-v-f169049d="">10 Rue Jangot, 69007, Lyon</span><br data-v-f169049d="">
|
||||
<!--v-if-->
|
||||
</p>
|
||||
</address>
|
||||
</variant>
|
||||
<variant title="Basic with timezone">
|
||||
<address data-v-f169049d="" dir="auto">
|
||||
<!--v-if-->
|
||||
<p data-v-f169049d=""><span data-v-f169049d="" class="addressDescription" title="Locaux Motiv">Locaux Motiv</span><br data-v-f169049d=""><span data-v-f169049d="">10 Rue Jangot, 69007, Lyon</span><br data-v-f169049d=""><small data-v-f169049d=""> 🌐 heure d’été irlandaise (UTC+1)</small></p>
|
||||
</address>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,14 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Auth Providers Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="Public">
|
||||
<div><b>Sign in with</b>
|
||||
<div class="flex gap-1 flex-wrap">
|
||||
<o-button tag="a" outlined="" variant="primary" href="/auth/keycloak" icon-left="lock"><span>Entreprise</span></o-button>
|
||||
<o-button tag="a" outlined="" variant="primary" icon-left="google" href="/auth/google"><span>Google</span></o-button>
|
||||
</div>
|
||||
</div>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,11 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Categories Preview Story > Default 1`] = `
|
||||
"<story setup-app="function setupApp({ app }) {
|
||||
app.provide(__vite_ssr_import_2__.DefaultApolloClient, __vite_ssr_import_1__.apolloClient);
|
||||
}">
|
||||
<variant>
|
||||
<!--v-if-->
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,33 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Category Card Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="Basic">
|
||||
<section class="flex flex-wrap gap-3 md:gap-5">
|
||||
<router-link to="[object Object]" class="max-w-xs rounded-lg overflow-hidden bg-center bg-no-repeat bg-cover shadow-lg relative group">
|
||||
<picture class="brightness-50">
|
||||
<source srcset="/img/categories/photography.webp 2x, /img/categories/photography.webp" media="(min-width: 1000px)">
|
||||
<source srcset="/img/categories/photography.webp 2x, /img/categories/photography-small.webp" media="(min-width: 300px)"><img class="w-full h-36 w-36 md:h-52 md:w-52 object-cover" src="/img/categories/photography.webp" srcset="/img/categories/photography-small.webp " width="384" height="384" alt="" loading="lazy">
|
||||
</picture>
|
||||
<div class="px-3 py-1 absolute left-0 bottom-0">
|
||||
<h2 class="group-hover:text-slate-200 font-semibold text-white tracking-tight text-xl mb-3">Hello</h2>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</router-link>
|
||||
</section>
|
||||
</variant>
|
||||
<variant title="Details">
|
||||
<section class="flex flex-wrap gap-3 md:gap-5">
|
||||
<router-link to="[object Object]" class="max-w-xs rounded-lg overflow-hidden bg-center bg-no-repeat bg-cover shadow-lg relative group">
|
||||
<picture class="brightness-50">
|
||||
<source srcset="/img/categories/outdoors_adventure.webp 2x, /img/categories/outdoors_adventure.webp" media="(min-width: 1000px)">
|
||||
<source srcset="/img/categories/outdoors_adventure.webp 2x, /img/categories/outdoors_adventure-small.webp" media="(min-width: 300px)"><img class="w-full h-36 w-36 md:h-52 md:w-52 object-cover" src="/img/categories/outdoors_adventure.webp" srcset="/img/categories/outdoors_adventure-small.webp " width="384" height="384" alt="" loading="lazy">
|
||||
</picture>
|
||||
<div class="px-3 py-1 absolute left-0 bottom-0">
|
||||
<h2 class="group-hover:text-slate-200 font-semibold text-white tracking-tight text-xl mb-3">Hello</h2>
|
||||
</div><span class="absolute z-10 inline-flex items-center px-3 py-1 text-xs font-semibold text-white bg-black rounded-full right-2 top-2">5 events</span>
|
||||
</router-link>
|
||||
</section>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,18 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Date Calendar Icon Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="new">
|
||||
<div data-v-1df97f42="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white" style="--small: 2;">
|
||||
<div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
|
||||
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
|
||||
</div>
|
||||
</variant>
|
||||
<variant title="small">
|
||||
<div data-v-1df97f42="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
|
||||
<div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
|
||||
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
|
||||
</div>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,87 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Discussion Comment Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="Basic">
|
||||
<article data-v-49696bef="" class="flex gap-2 bg-white dark:bg-transparent border rounded-md p-2 mt-2">
|
||||
<div data-v-49696bef="" class="">
|
||||
<figure data-v-49696bef="" class=""><img data-v-49696bef="" class="rounded-xl" src="https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg" alt="" width="48" height="48"></figure>
|
||||
</div>
|
||||
<div data-v-49696bef="" class="mb-2 pt-1 flex-1">
|
||||
<div data-v-49696bef="" class="flex items-center gap-1" dir="auto">
|
||||
<div data-v-49696bef="" class="flex flex-1 flex-col"><strong data-v-49696bef="">Thomas Citharel</strong><small data-v-49696bef="">@tcit</small></div><span data-v-49696bef="" class="icons"><o-dropdown data-v-49696bef="" aria-role="list" position="bottom-left"><o-dropdown-item data-v-49696bef="" aria-role="menuitem"><o-icon data-v-49696bef="" icon="pencil"></o-icon> Edit</o-dropdown-item><o-dropdown-item data-v-49696bef="" aria-role="menuitem"><o-icon data-v-49696bef="" icon="delete"></o-icon> Delete</o-dropdown-item><!--v-if--></o-dropdown></span>
|
||||
<div data-v-49696bef="" class="self-center">
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-49696bef="" class="text-wrapper" dir="auto">
|
||||
<div data-v-49696bef="" class="prose md:prose-lg lg:prose-xl dark:prose-invert">Hello there</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<o-modal data-v-49696bef="" active="false" has-modal-card="" close-button-aria-label="Close" autofocus="false" trapfocus="false">
|
||||
<div data-v-e0cceef3="" data-v-49696bef="" class="p-2">
|
||||
<header data-v-e0cceef3="" class="mb-3">
|
||||
<h2 data-v-e0cceef3="" class="text-2xl">Report this comment</h2>
|
||||
</header>
|
||||
<section data-v-e0cceef3="">
|
||||
<div data-v-e0cceef3="" class="flex gap-1 flex-row mb-3 bg-mbz-yellow dark:text-black p-3 rounded items-center">
|
||||
<o-icon data-v-e0cceef3="" icon="alert" variant="warning" custom-size="48" class="hidden md:block flex-1"></o-icon>
|
||||
<p data-v-e0cceef3="">The report will be sent to the moderators of your instance. You can explain why you report this content below.</p>
|
||||
</div>
|
||||
<div data-v-e0cceef3="">
|
||||
<!--v-if-->
|
||||
<o-field data-v-e0cceef3="" label="Additional comments" label-for="additional-comments">
|
||||
<o-input data-v-e0cceef3="" modelvalue="" type="textarea" id="additional-comments" autofocus="" expanded=""></o-input>
|
||||
</o-field>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</section>
|
||||
<footer data-v-e0cceef3="" class="flex gap-2 py-3">
|
||||
<o-button data-v-e0cceef3="" outlined="">Cancel</o-button>
|
||||
<o-button data-v-e0cceef3="" variant="primary">Send the report</o-button>
|
||||
</footer>
|
||||
</div>
|
||||
</o-modal>
|
||||
</variant>
|
||||
<variant title="Deleted comment">
|
||||
<article data-v-49696bef="" class="flex gap-2 bg-white dark:bg-transparent border rounded-md p-2 mt-2">
|
||||
<div data-v-49696bef="" class=""><span data-v-49696bef="" aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="48" height="48" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span></div>
|
||||
<div data-v-49696bef="" class="mb-2 pt-1 flex-1">
|
||||
<div data-v-49696bef="" class="flex items-center gap-1" dir="auto"><span data-v-49696bef="" class="name comment-link has-text-grey">[deleted]</span>
|
||||
<!--v-if-->
|
||||
<div data-v-49696bef="" class="self-center">
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-49696bef="" class="comment-deleted">[This comment has been deleted by it's author]</div>
|
||||
</div>
|
||||
</article>
|
||||
<o-modal data-v-49696bef="" active="false" has-modal-card="" close-button-aria-label="Close" autofocus="false" trapfocus="false">
|
||||
<div data-v-e0cceef3="" data-v-49696bef="" class="p-2">
|
||||
<header data-v-e0cceef3="" class="mb-3">
|
||||
<h2 data-v-e0cceef3="" class="text-2xl">Report this comment</h2>
|
||||
</header>
|
||||
<section data-v-e0cceef3="">
|
||||
<div data-v-e0cceef3="" class="flex gap-1 flex-row mb-3 bg-mbz-yellow dark:text-black p-3 rounded items-center">
|
||||
<o-icon data-v-e0cceef3="" icon="alert" variant="warning" custom-size="48" class="hidden md:block flex-1"></o-icon>
|
||||
<p data-v-e0cceef3="">The report will be sent to the moderators of your instance. You can explain why you report this content below.</p>
|
||||
</div>
|
||||
<div data-v-e0cceef3="">
|
||||
<!--v-if-->
|
||||
<o-field data-v-e0cceef3="" label="Additional comments" label-for="additional-comments">
|
||||
<o-input data-v-e0cceef3="" modelvalue="" type="textarea" id="additional-comments" autofocus="" expanded=""></o-input>
|
||||
</o-field>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</section>
|
||||
<footer data-v-e0cceef3="" class="flex gap-2 py-3">
|
||||
<o-button data-v-e0cceef3="" outlined="">Cancel</o-button>
|
||||
<o-button data-v-e0cceef3="" variant="primary">Send the report</o-button>
|
||||
</footer>
|
||||
</div>
|
||||
</o-modal>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,28 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Discussion List Item Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="Basic">
|
||||
<router-link class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b bg-white dark:bg-transparent" dir="auto" to="[object Object]">
|
||||
<div class=""><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="32" height="32" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span></div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center">
|
||||
<p class="text-violet-3 dark:text-white text-lg font-semibold flex-1">A discussion</p><span class="" title="Wednesday, February 2, 2022 at 3:04 AM">0 seconds</span>
|
||||
</div>
|
||||
<div class="line-clamp-2" dir="auto"></div>
|
||||
</div>
|
||||
</router-link>
|
||||
</variant>
|
||||
<variant title="Deleted comment">
|
||||
<router-link class="flex gap-1 w-full items-center p-2 border-b-stone-200 border-b bg-white dark:bg-transparent" dir="auto" to="[object Object]">
|
||||
<div class=""><span aria-hidden="true" class="material-design-icon account-circle-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="32" height="32" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"><!--v-if--></path></svg></span></div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center">
|
||||
<p class="text-violet-3 dark:text-white text-lg font-semibold flex-1">A discussion</p><span class="" title="Wednesday, February 2, 2022 at 3:04 AM">0 seconds</span>
|
||||
</div>
|
||||
<div class="">[This comment has been deleted]</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,257 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Event Card Story > Default 1`] = `
|
||||
"<story title="EventCard">
|
||||
<variant title="default">
|
||||
<router-link data-v-4bd07c72="" to="[object Object]" class="mbz-card snap-center dark:bg-mbz-purple sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
|
||||
<div data-v-4bd07c72="" class="rounded-lg">
|
||||
<div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 calendar-simple">
|
||||
<div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
|
||||
<div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
|
||||
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<figure data-v-4bd07c72="" class="block relative pt-40">
|
||||
<div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
|
||||
<div class="h-full w-full max-w-100 min-h-[10rem]">
|
||||
<!-- Show the placeholder as background -->
|
||||
<!--v-if-->
|
||||
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="p-2 flex-auto">
|
||||
<div data-v-4bd07c72="" class="relative flex flex-col h-full">
|
||||
<div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end">
|
||||
<!--v-if-->
|
||||
</div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden"></span>
|
||||
<!--v-if-->
|
||||
<div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
|
||||
<h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very interesting event</h2>
|
||||
<div data-v-4bd07c72="" class="">
|
||||
<div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
|
||||
<figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
|
||||
<div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</variant>
|
||||
<variant title="long">
|
||||
<router-link data-v-4bd07c72="" to="[object Object]" class="mbz-card snap-center dark:bg-mbz-purple sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
|
||||
<div data-v-4bd07c72="" class="rounded-lg">
|
||||
<div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 calendar-simple">
|
||||
<div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
|
||||
<div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
|
||||
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<figure data-v-4bd07c72="" class="block relative pt-40">
|
||||
<div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
|
||||
<div class="h-full w-full max-w-100 min-h-[10rem]">
|
||||
<!-- Show the placeholder as background -->
|
||||
<!--v-if-->
|
||||
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="p-2 flex-auto">
|
||||
<div data-v-4bd07c72="" class="relative flex flex-col h-full">
|
||||
<div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end">
|
||||
<!--v-if-->
|
||||
</div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden"></span>
|
||||
<!--v-if-->
|
||||
<div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
|
||||
<h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very long title that will have trouble to display because it will take multiple lines but where will it stop ?! Maybe after 3 lines is enough. Let's say so. But if it doesn't work, we really need to truncate it at some point. Definitively.</h2>
|
||||
<div data-v-4bd07c72="" class="">
|
||||
<div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
|
||||
<figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
|
||||
<div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</variant>
|
||||
<variant title="tentative">
|
||||
<router-link data-v-4bd07c72="" to="[object Object]" class="mbz-card snap-center dark:bg-mbz-purple sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
|
||||
<div data-v-4bd07c72="" class="rounded-lg">
|
||||
<div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 calendar-simple">
|
||||
<div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
|
||||
<div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
|
||||
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<figure data-v-4bd07c72="" class="block relative pt-40">
|
||||
<div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
|
||||
<div class="h-full w-full max-w-100 min-h-[10rem]">
|
||||
<!-- Show the placeholder as background -->
|
||||
<!--v-if-->
|
||||
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-info dark:text-black">Tentative</span>
|
||||
<!--v-if-->
|
||||
<router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="p-2 flex-auto">
|
||||
<div data-v-4bd07c72="" class="relative flex flex-col h-full">
|
||||
<div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end">
|
||||
<!--v-if-->
|
||||
</div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden"></span>
|
||||
<!--v-if-->
|
||||
<div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
|
||||
<h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very interesting event</h2>
|
||||
<div data-v-4bd07c72="" class="">
|
||||
<div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
|
||||
<figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
|
||||
<div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden">
|
||||
<!--v-if--><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-info dark:text-black">Tentative</span>
|
||||
<!--v-if-->
|
||||
<router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</variant>
|
||||
<variant title="cancelled">
|
||||
<router-link data-v-4bd07c72="" to="[object Object]" class="mbz-card snap-center dark:bg-mbz-purple sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
|
||||
<div data-v-4bd07c72="" class="rounded-lg">
|
||||
<div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 calendar-simple">
|
||||
<div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
|
||||
<div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
|
||||
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<figure data-v-4bd07c72="" class="block relative pt-40">
|
||||
<div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
|
||||
<div class="h-full w-full max-w-100 min-h-[10rem]">
|
||||
<!-- Show the placeholder as background -->
|
||||
<!--v-if-->
|
||||
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end">
|
||||
<!--v-if--><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-danger dark:text-white">Cancelled</span>
|
||||
<router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="p-2 flex-auto">
|
||||
<div data-v-4bd07c72="" class="relative flex flex-col h-full">
|
||||
<div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end">
|
||||
<!--v-if-->
|
||||
</div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden"></span>
|
||||
<!--v-if-->
|
||||
<div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
|
||||
<h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very interesting event</h2>
|
||||
<div data-v-4bd07c72="" class="">
|
||||
<div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
|
||||
<figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
|
||||
<div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden">
|
||||
<!--v-if-->
|
||||
<!--v-if--><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-danger dark:text-white">Cancelled</span>
|
||||
<router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</variant>
|
||||
<variant title="Row mode">
|
||||
<router-link data-v-4bd07c72="" to="[object Object]" class="mbz-card snap-center dark:bg-mbz-purple sm:flex sm:items-start">
|
||||
<div data-v-4bd07c72="" class="rounded-lg sm:w-full sm:max-w-[20rem]">
|
||||
<div data-v-4bd07c72="" class="-mt-3 h-0 mb-3 ltr:ml-0 rtl:mr-0 block relative z-10 sm:hidden calendar-simple">
|
||||
<div data-v-1df97f42="" data-v-4bd07c72="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
|
||||
<div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
|
||||
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<figure data-v-4bd07c72="" class="block relative pt-40">
|
||||
<div data-v-4bd07c72="" class="flex-1" style="height: 100%; position: absolute; top: 0px; left: 0px; width: 100%;">
|
||||
<div class="h-full w-full max-w-100 min-h-[10rem]">
|
||||
<!-- Show the placeholder as background -->
|
||||
<!--v-if-->
|
||||
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="absolute top-3 right-0 ltr:-mr-1 rtl:-ml-1 z-10 max-w-xs no-underline flex flex-col gap-1 items-end" style="display: none;">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
|
||||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="p-2 flex-auto sm:flex-1">
|
||||
<div data-v-4bd07c72="" class="relative flex flex-col h-full">
|
||||
<div data-v-4bd07c72="" class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-end sm:hidden">
|
||||
<!--v-if-->
|
||||
</div><span data-v-4bd07c72="" class="text-gray-700 dark:text-white font-semibold hidden sm:block"></span>
|
||||
<!--v-if-->
|
||||
<div data-v-4bd07c72="" class="w-full flex flex-col justify-between h-full">
|
||||
<h2 data-v-4bd07c72="" class="mt-0 mb-2 text-2xl line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto" lang="en">A very long title that will have trouble to display because it will take multiple lines but where will it stop ?! Maybe after 3 lines is enough. Let's say so. But if it doesn't work, we really need to truncate it at some point. Definitively.</h2>
|
||||
<div data-v-4bd07c72="" class="">
|
||||
<div data-v-4bd07c72="" class="flex items-center text-violet-3 dark:text-white" dir="auto">
|
||||
<figure data-v-4bd07c72="" class=""><img data-v-4bd07c72="" class="rounded-xl" src="https://mobilizon.fr/media/653c2dcbb830636e0db975798163b85e038dfb7713e866e96d36bd411e105e3c.png?name=festivalsanantes%27s%20avatar.png" alt="" width="24" height="24" loading="lazy"></figure><span data-v-4bd07c72="" class="font-semibold ltr:pl-2 rtl:pr-2">Hello</span>
|
||||
</div>
|
||||
<div data-v-4bd07c72="" class="truncate flex gap-1" dir="auto" title="Somewhere, "><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Somewhere</span></div>
|
||||
<div data-v-4bd07c72="" class="mt-1 no-underline gap-1 items-center hidden sm:flex">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<router-link data-v-4bd07c72="" to="[object Object]"><span data-v-6955ca87="" data-v-4bd07c72="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3 before:content-['#']" dir="auto">Something</span></router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,57 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Event List View Card Story > Default 1`] = `
|
||||
"<story title="EventListViewCard">
|
||||
<variant title="default">
|
||||
<article class="bg-white dark:bg-zinc-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2">
|
||||
<div class="flex gap-2">
|
||||
<div class="">
|
||||
<div data-v-1df97f42="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
|
||||
<div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
|
||||
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
|
||||
</div>
|
||||
</div>
|
||||
<router-link to="[object Object]">
|
||||
<h2 class="mt-0 line-clamp-2">A very interesting event</h2>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="">
|
||||
<!--v-if--><span>Organized by Hello</span>
|
||||
</div>
|
||||
<div class="flex gap-1"><span><span aria-hidden="true" class="material-design-icon earth-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"><!--v-if--></path></svg></span>
|
||||
<!--v-if-->
|
||||
<!--v-if--></span><span><span>0 participants</span></span>
|
||||
</div>
|
||||
</article>
|
||||
</variant>
|
||||
<variant title="long">
|
||||
<article class="bg-white dark:bg-zinc-700 dark:text-white dark:hover:text-white rounded-lg shadow-md max-w-3xl p-2">
|
||||
<div class="flex gap-2">
|
||||
<div class="">
|
||||
<div data-v-1df97f42="" class="datetime-container flex flex-col rounded-lg text-center justify-center overflow-hidden items-stretch bg-white dark:bg-gray-700 text-violet-3 dark:text-white small" style="--small: 1.2;">
|
||||
<div data-v-1df97f42="" class="datetime-container-header"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="weekday">Wed</time></div>
|
||||
<div data-v-1df97f42="" class="datetime-container-content"><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="day block font-semibold">2</time><time data-v-1df97f42="" datetime="2022-02-02T02:04:00.000Z" class="month font-semibold block uppercase py-1 px-0">Feb</time></div>
|
||||
</div>
|
||||
</div>
|
||||
<router-link to="[object Object]">
|
||||
<h2 class="mt-0 line-clamp-2">A very long title that will have trouble to display because it will take multiple lines but where will it stop ?! Maybe after 3 lines is enough. Let's say so.</h2>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="">
|
||||
<!--v-if--><span>Organized by Hello</span>
|
||||
</div>
|
||||
<div class="flex gap-1"><span><span aria-hidden="true" class="material-design-icon earth-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"><!--v-if--></path></svg></span>
|
||||
<!--v-if-->
|
||||
<!--v-if--></span><span><span>0 participants</span></span>
|
||||
</div>
|
||||
</article>
|
||||
</variant>
|
||||
<!-- <Variant title="tentative">
|
||||
<EventListViewCard :event="tentativeEvent" />
|
||||
</Variant>
|
||||
|
||||
<Variant title="cancelled">
|
||||
<EventListViewCard :event="cancelledEvent" />
|
||||
</Variant> -->
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,86 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Group Card Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="Empty">
|
||||
<div class="p-5">
|
||||
<router-link to="[object Object]" class="mbz-card snap-center shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
|
||||
<div class="flex-none p-2 md:p-4"><span aria-hidden="true" class="material-design-icon account-group-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="128" height="128" viewBox="0 0 24 24"><path d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z"><!--v-if--></path></svg></span></div>
|
||||
<div class="py-2 px-2 md:px-4 flex flex-col h-full justify-between w-full">
|
||||
<div class="flex gap-1 mb-2">
|
||||
<div class="overflow-hidden flex-auto">
|
||||
<h3 class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto">Framasoft</h3><span class="block truncate">@framasoft@mobilizon.fr</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2 line-clamp-3" dir="auto"></div>
|
||||
<div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</variant>
|
||||
<variant title="With media">
|
||||
<div class="p-5">
|
||||
<router-link to="[object Object]" class="mbz-card snap-center shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
|
||||
<div class="flex-none p-2 md:p-4">
|
||||
<figure class=""><img class="rounded-full" src="https://mobilizon.fr/media/890f5396ef80081a6b1b18a5db969746cf8bb340e8a4e657d665e41f6646c539.jpg?name=framasoft%27s%20avatar.jpg" alt="" height="128" width="128"></figure>
|
||||
</div>
|
||||
<div class="py-2 px-2 md:px-4 flex flex-col h-full justify-between w-full">
|
||||
<div class="flex gap-1 mb-2">
|
||||
<div class="overflow-hidden flex-auto">
|
||||
<h3 class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto">Framasoft</h3><span class="block truncate">@framasoft@mobilizon.fr</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2 line-clamp-3" dir="auto"></div>
|
||||
<div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</variant>
|
||||
<variant title="with followers or members">
|
||||
<div class="p-5">
|
||||
<router-link to="[object Object]" class="mbz-card snap-center shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col sm:max-w-xs w-[18rem] shrink-0 flex flex-col">
|
||||
<div class="flex-none p-2 md:p-4">
|
||||
<figure class=""><img class="rounded-full" src="https://mobilizon.fr/media/890f5396ef80081a6b1b18a5db969746cf8bb340e8a4e657d665e41f6646c539.jpg?name=framasoft%27s%20avatar.jpg" alt="" height="128" width="128"></figure>
|
||||
</div>
|
||||
<div class="py-2 px-2 md:px-4 flex flex-col h-full justify-between w-full">
|
||||
<div class="flex gap-1 mb-2">
|
||||
<div class="overflow-hidden flex-auto">
|
||||
<h3 class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto">Framasoft</h3><span class="block truncate">@framasoft@mobilizon.fr</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2 line-clamp-3" dir="auto">You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:h-full to apply the h-full utility at only medium screen sizes and above.</div>
|
||||
<div>
|
||||
<div class="truncate flex gap-1" dir="auto" title="Nantes, undefined"><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Nantes</span></div>
|
||||
<p class="flex gap-1"><span aria-hidden="true" class="material-design-icon account-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"><!--v-if--></path></svg></span> 7 members or followers</p>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</variant>
|
||||
<variant title="Row mode">
|
||||
<router-link to="[object Object]" class="mbz-card snap-center shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col sm:flex-row">
|
||||
<div class="flex-none p-2 md:p-4">
|
||||
<figure class=""><img class="rounded-full" src="https://mobilizon.fr/media/890f5396ef80081a6b1b18a5db969746cf8bb340e8a4e657d665e41f6646c539.jpg?name=framasoft%27s%20avatar.jpg" alt="" height="128" width="128"></figure>
|
||||
</div>
|
||||
<div class="py-2 px-2 md:px-4 flex flex-col h-full justify-between w-full sm:flex-1">
|
||||
<div class="flex gap-1 mb-2">
|
||||
<div class="overflow-hidden flex-auto">
|
||||
<h3 class="text-2xl leading-5 line-clamp-3 font-bold text-violet-3 dark:text-white" dir="auto">Framasoft</h3><span class="block truncate">@framasoft@mobilizon.fr</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2 line-clamp-3" dir="auto">You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:h-full to apply the h-full utility at only medium screen sizes and above.</div>
|
||||
<div>
|
||||
<div class="truncate flex gap-1" dir="auto" title="Nantes, undefined"><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Nantes</span></div>
|
||||
<p class="flex gap-1"><span aria-hidden="true" class="material-design-icon account-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"><!--v-if--></path></svg></span> 7 members or followers</p>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,107 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Group Member Card Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="simple member">
|
||||
<div class="p-5">
|
||||
<div class="rounded shadow-lg bg-white dark:bg-mbz-purple dark:text-white">
|
||||
<div class="bg-mbz-yellow-alt-50 text-black flex items-center gap-1 p-2 rounded-t-lg" dir="auto">
|
||||
<figure class=""><img class="rounded-xl" src="https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg" alt="" width="24" height="24"></figure> Thomas Citharel (@tcit)
|
||||
</div>
|
||||
<div class="flex items-center gap-2 p-2 pr-4" dir="auto">
|
||||
<div class="flex-1">
|
||||
<div class="p-2 flex gap-2">
|
||||
<div class="">
|
||||
<figure class="h-12 w-12"><img class="rounded-full w-full h-full object-cover" src="https://mobilizon.fr/media/ff5b2d425fb73e17fcbb56a1a032359ee0b21453c11af59e103e783817a32fdf.png?name=framasoft%27s%20avatar.png" alt="" width="48" height="48"></figure>
|
||||
</div>
|
||||
<div class="" dir="auto">
|
||||
<router-link to="[object Object]">
|
||||
<h2 class="mt-0">Framasoft</h2>
|
||||
<div class="flex flex-col items-start"><span class="text-sm">@framasoft@mobilizon.fr</span>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 prose dark:prose-invert lg:prose-xl prose-p:m-0 line-clamp-2">
|
||||
<p><strong>La Fediverse</strong>, <strong>c'est la <em><u>Féd</u>ération qui englobe l'Un<u>ivers</u> des réseaux sociaux libres et décentralisés,</em> </strong>dont Mobilizon (évènements), Mastodon (microblog), Peertube (vidéos), Pixelfed (photos), Funkwhale (musique), Matrix (messagerie instantanée)... et tant d'autres font partie.</p>
|
||||
<p><strong>Et "La Fediverse <em>Nantaise</em>" est un collectif cherchant à faire connaître localement tout le potentiel de ces réseaux ! :-)</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<o-dropdown aria-role="list" position="bottom-left">
|
||||
<o-dropdown-item class="inline-flex gap-1" aria-role="listitem"><span aria-hidden="true" class="material-design-icon exit-to-app-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"><!--v-if--></path></svg></span> Leave</o-dropdown-item>
|
||||
</o-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</variant>
|
||||
<variant title="moderator">
|
||||
<div class="p-5">
|
||||
<div class="rounded shadow-lg bg-white dark:bg-mbz-purple dark:text-white">
|
||||
<div class="bg-mbz-yellow-alt-50 text-black flex items-center gap-1 p-2 rounded-t-lg" dir="auto">
|
||||
<figure class=""><img class="rounded-xl" src="https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg" alt="" width="24" height="24"></figure> Thomas Citharel (@tcit)
|
||||
</div>
|
||||
<div class="flex items-center gap-2 p-2 pr-4" dir="auto">
|
||||
<div class="flex-1">
|
||||
<div class="p-2 flex gap-2">
|
||||
<div class="">
|
||||
<figure class="h-12 w-12"><img class="rounded-full w-full h-full object-cover" src="https://mobilizon.fr/media/ff5b2d425fb73e17fcbb56a1a032359ee0b21453c11af59e103e783817a32fdf.png?name=framasoft%27s%20avatar.png" alt="" width="48" height="48"></figure>
|
||||
</div>
|
||||
<div class="" dir="auto">
|
||||
<router-link to="[object Object]">
|
||||
<h2 class="mt-0">Framasoft</h2>
|
||||
<div class="flex flex-col items-start"><span class="text-sm">@framasoft@mobilizon.fr</span><span data-v-6955ca87="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-info dark:text-black">Moderator</span></div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 prose dark:prose-invert lg:prose-xl prose-p:m-0 line-clamp-2">
|
||||
<p><strong>La Fediverse</strong>, <strong>c'est la <em><u>Féd</u>ération qui englobe l'Un<u>ivers</u> des réseaux sociaux libres et décentralisés,</em> </strong>dont Mobilizon (évènements), Mastodon (microblog), Peertube (vidéos), Pixelfed (photos), Funkwhale (musique), Matrix (messagerie instantanée)... et tant d'autres font partie.</p>
|
||||
<p><strong>Et "La Fediverse <em>Nantaise</em>" est un collectif cherchant à faire connaître localement tout le potentiel de ces réseaux ! :-)</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<o-dropdown aria-role="list" position="bottom-left">
|
||||
<o-dropdown-item class="inline-flex gap-1" aria-role="listitem"><span aria-hidden="true" class="material-design-icon exit-to-app-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"><!--v-if--></path></svg></span> Leave</o-dropdown-item>
|
||||
</o-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</variant>
|
||||
<variant title="administrator">
|
||||
<div class="p-5">
|
||||
<div class="rounded shadow-lg bg-white dark:bg-mbz-purple dark:text-white">
|
||||
<div class="bg-mbz-yellow-alt-50 text-black flex items-center gap-1 p-2 rounded-t-lg" dir="auto">
|
||||
<figure class=""><img class="rounded-xl" src="https://social.tcit.fr/system/accounts/avatars/000/000/001/original/a28c50ce5f2b13fd.jpg" alt="" width="24" height="24"></figure> Thomas Citharel (@tcit)
|
||||
</div>
|
||||
<div class="flex items-center gap-2 p-2 pr-4" dir="auto">
|
||||
<div class="flex-1">
|
||||
<div class="p-2 flex gap-2">
|
||||
<div class="">
|
||||
<figure class="h-12 w-12"><img class="rounded-full w-full h-full object-cover" src="https://mobilizon.fr/media/ff5b2d425fb73e17fcbb56a1a032359ee0b21453c11af59e103e783817a32fdf.png?name=framasoft%27s%20avatar.png" alt="" width="48" height="48"></figure>
|
||||
</div>
|
||||
<div class="" dir="auto">
|
||||
<router-link to="[object Object]">
|
||||
<h2 class="mt-0">Framasoft</h2>
|
||||
<div class="flex flex-col items-start"><span class="text-sm">@framasoft@mobilizon.fr</span><span data-v-6955ca87="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-mbz-info dark:text-black">Administrator</span></div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 prose dark:prose-invert lg:prose-xl prose-p:m-0 line-clamp-2">
|
||||
<p><strong>La Fediverse</strong>, <strong>c'est la <em><u>Féd</u>ération qui englobe l'Un<u>ivers</u> des réseaux sociaux libres et décentralisés,</em> </strong>dont Mobilizon (évènements), Mastodon (microblog), Peertube (vidéos), Pixelfed (photos), Funkwhale (musique), Matrix (messagerie instantanée)... et tant d'autres font partie.</p>
|
||||
<p><strong>Et "La Fediverse <em>Nantaise</em>" est un collectif cherchant à faire connaître localement tout le potentiel de ces réseaux ! :-)</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<o-dropdown aria-role="list" position="bottom-left">
|
||||
<o-dropdown-item class="inline-flex gap-1" aria-role="listitem"><span aria-hidden="true" class="material-design-icon exit-to-app-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V9H5V5H19V19H5V15H3V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10.08,15.58L11.5,17L16.5,12L11.5,7L10.08,8.41L12.67,11H3V13H12.67L10.08,15.58Z"><!--v-if--></path></svg></span> Leave</o-dropdown-item>
|
||||
</o-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,12 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Inline Address Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="with locality">
|
||||
<div class="truncate flex gap-1" dir="auto" title="Locaux Motiv, Lyon"><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Lyon</span></div>
|
||||
</variant>
|
||||
<variant title="without locality">
|
||||
<div class="truncate flex gap-1" dir="auto" title="Locaux Motiv, null"><span aria-hidden="true" class="material-design-icon map-marker-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"><!--v-if--></path></svg></span><span>Locaux Motiv</span></div>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,18 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Instance Contact Link Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="empty">
|
||||
<p><span>contact uninformed</span></p>
|
||||
</variant>
|
||||
<variant title="string">
|
||||
<p><span dir="auto">someone</span></p>
|
||||
</variant>
|
||||
<variant title="email">
|
||||
<p><a dir="auto" title="someone@somewhere.tld" href="mailto:someone@somewhere.tld">someone@somewhere.tld</a></p>
|
||||
</variant>
|
||||
<variant title="url">
|
||||
<p><a dir="auto" title="https://somewhere.com" href="https://somewhere.com">somewhere.com</a></p>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,15 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Material Icon Story > Default 1`] = `
|
||||
"<story layout="[object Object]">
|
||||
<variant title="Google">
|
||||
<!---->
|
||||
</variant>
|
||||
<variant title="Calendar">
|
||||
<!---->
|
||||
</variant>
|
||||
<variant title="Account Multiple Plus">
|
||||
<!---->
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,27 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Mobilizon Presentation Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant>
|
||||
<div class="container mx-auto py-4 px-2">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
<div>
|
||||
<h3 class="dark:text-white text-3xl font-bold">A practical tool</h3>
|
||||
<p class="dark:text-white">Mobilizon is a tool that helps you <b>find, create and organise events</b>.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="dark:text-white text-3xl font-bold">An ethical alternative</h3>
|
||||
<p class="dark:text-white">Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="dark:text-white text-3xl font-bold">A federated software</h3>
|
||||
<p class="dark:text-white">Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<o-button variant="primary" size="large" tag="a" href="https://joinmobilizon.org">Learn more about Mobilizon</o-button>
|
||||
</div>
|
||||
</div>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,24 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Popover Actor Card Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant setup-app="function setupApp({ app }) {
|
||||
app.use(__vite_ssr_import_2__.default);
|
||||
}" title="Person">
|
||||
<div class="p-5">
|
||||
<vmenu distance="16" triggers="hover" class="popover">
|
||||
<div><b> Popover me !</b></div>
|
||||
</vmenu>
|
||||
</div>
|
||||
</variant>
|
||||
<variant setup-app="function setupApp({ app }) {
|
||||
app.use(__vite_ssr_import_2__.default);
|
||||
}" title="Group">
|
||||
<div class="p-5">
|
||||
<vmenu distance="16" triggers="hover" class="popover">
|
||||
<div><b> Popover me !</b></div>
|
||||
</vmenu>
|
||||
</div>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,60 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Post List Item Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="Public">
|
||||
<router-link data-v-6ca7cc69="" class="block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md" dir="auto" to="[object Object]">
|
||||
<div data-v-6ca7cc69="" class="flex-1 object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg">
|
||||
<div class="h-full w-full max-w-100 min-h-[10rem]">
|
||||
<!-- Show the placeholder as background -->
|
||||
<!--v-if-->
|
||||
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-6ca7cc69="" class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
|
||||
<h3 data-v-6ca7cc69="" class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold">Musique sur Nantes : un groupe à développer ensemble !</h3>
|
||||
<p data-v-6ca7cc69="" class="flex gap-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon clock-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"><!--v-if--></path></svg></span><span data-v-6ca7cc69="">less than a minute ago</span></p>
|
||||
<div data-v-6ca7cc69="" class="flex flex-wrap gap-y-0 gap-x-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon tag-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z"><!--v-if--></path></svg></span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Musique</span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Concert</span></div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</router-link>
|
||||
</variant>
|
||||
<variant title="Long">
|
||||
<router-link data-v-6ca7cc69="" class="block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md" dir="auto" to="[object Object]">
|
||||
<div data-v-6ca7cc69="" class="flex-1 object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg">
|
||||
<div class="h-full w-full max-w-100 min-h-[10rem]">
|
||||
<!-- Show the placeholder as background -->
|
||||
<!--v-if-->
|
||||
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-6ca7cc69="" class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
|
||||
<h3 data-v-6ca7cc69="" class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold">Musique sur Nantes : un groupe à développer ensemble ! Musique sur Nantes : un groupe à développer ensemble !</h3>
|
||||
<p data-v-6ca7cc69="" class="flex gap-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon clock-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"><!--v-if--></path></svg></span><span data-v-6ca7cc69="">less than a minute ago</span></p>
|
||||
<div data-v-6ca7cc69="" class="flex flex-wrap gap-y-0 gap-x-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon tag-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z"><!--v-if--></path></svg></span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Musique</span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Concert</span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">VeryLongTagWhatHappensThen</span></div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</router-link>
|
||||
</variant>
|
||||
<variant title="Is member">
|
||||
<router-link data-v-6ca7cc69="" class="block md:flex bg-white dark:bg-violet-2 dark:text-white dark:hover:text-white rounded-lg shadow-md" dir="auto" to="[object Object]">
|
||||
<div data-v-6ca7cc69="" class="flex-1 object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg object-cover flex-none h-48 md:h-auto md:w-48 rounded-t-lg md:rounded-none md:rounded-l-lg">
|
||||
<div class="h-full w-full max-w-100 min-h-[10rem]">
|
||||
<!-- Show the placeholder as background -->
|
||||
<!--v-if-->
|
||||
<!-- Show the real image on the top and fade in after loading --><img class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full opacity-0" alt="" src="" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div data-v-6ca7cc69="" class="flex flex-col gap-1 bg-inherit p-2 rounded-lg flex-1">
|
||||
<h3 data-v-6ca7cc69="" class="text-xl color-violet-3 line-clamp-3 mb-2 font-bold">Musique sur Nantes : un groupe à développer ensemble ! Musique sur Nantes : un groupe à développer ensemble !</h3>
|
||||
<p data-v-6ca7cc69="" class="flex gap-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon clock-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z"><!--v-if--></path></svg></span><span data-v-6ca7cc69="">less than a minute ago</span></p>
|
||||
<div data-v-6ca7cc69="" class="flex flex-wrap gap-y-0 gap-x-2"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon tag-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5.5,7A1.5,1.5 0 0,1 4,5.5A1.5,1.5 0 0,1 5.5,4A1.5,1.5 0 0,1 7,5.5A1.5,1.5 0 0,1 5.5,7M21.41,11.58L12.41,2.58C12.05,2.22 11.55,2 11,2H4C2.89,2 2,2.89 2,4V11C2,11.55 2.22,12.05 2.59,12.41L11.58,21.41C11.95,21.77 12.45,22 13,22C13.55,22 14.05,21.77 14.41,21.41L21.41,14.41C21.78,14.05 22,13.55 22,13C22,12.44 21.77,11.94 21.41,11.58Z"><!--v-if--></path></svg></span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Musique</span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">Concert</span><span data-v-6955ca87="" data-v-6ca7cc69="" class="rounded-md truncate text-sm text-black px-2 py-1 bg-purple-3 dark:text-violet-3">VeryLongTagWhatHappensThen</span></div>
|
||||
<p data-v-6ca7cc69="" class="flex gap-1"><span data-v-6ca7cc69="" aria-hidden="true" class="material-design-icon account-edit-icon" role="img"><svg fill="currentColor" class="material-design-icon__svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21.7,13.35L20.7,14.35L18.65,12.3L19.65,11.3C19.86,11.09 20.21,11.09 20.42,11.3L21.7,12.58C21.91,12.79 21.91,13.14 21.7,13.35M12,18.94L18.06,12.88L20.11,14.93L14.06,21H12V18.94M12,14C7.58,14 4,15.79 4,18V20H10V18.11L14,14.11C13.34,14.03 12.67,14 12,14M12,4A4,4 0 0,0 8,8A4,4 0 0,0 12,12A4,4 0 0,0 16,8A4,4 0 0,0 12,4Z"><!--v-if--></path></svg></span>Published by <b data-v-6ca7cc69="" class="">I'm the author</b></p>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</router-link>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,19 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Profile On boarding Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant>
|
||||
<div class="p-5">
|
||||
<div class="">
|
||||
<h2 class="text-2xl">Profiles and federation</h2>
|
||||
</div>
|
||||
<p class="my-2">Mobilizon uses a system of profiles to compartiment your activities. You will be able to create as many profiles as you want.</p>
|
||||
<hr role="presentation">
|
||||
<p class="my-2"><span>Mobilizon is a federated software, meaning you can interact - depending on your admin's federation settings - with content from other instances, such as joining groups or events that were created elsewhere.</span>This instance, <b>Instance name (localhost)</b>, hosts your profile, so remember its name.</p>
|
||||
<hr role="presentation">
|
||||
<p class="my-2">If you are being asked for your federated indentity, it's composed of your username and your instance. For instance, the federated identity for your first profile is:</p>
|
||||
<div class="text-center"><code>tcit@localhost</code></div>
|
||||
</div>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,64 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Skeleton Event Result Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="row">
|
||||
<div class="bg-white dark:bg-slate-800 shadow rounded-md max-w-4xl w-full mx-auto">
|
||||
<div class="animate-pulse flex flex-col items-center md:flex-row">
|
||||
<div class="object-cover h-56 w-full md:max-w-[20rem] bg-slate-700"></div>
|
||||
<div class="flex-1 space-3-4 flex self-start flex-col justify-between p-2 md:p-4 w-full"><span class="h-2 bg-slate-700"></span><span class="mb-2 h-4 bg-slate-700"></span>
|
||||
<div class="flex space-x-4 flex-row">
|
||||
<div class="rounded-full bg-slate-700 h-10 w-10"></div>
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<div class="h-3 bg-slate-700"></div>
|
||||
<div class="h-2 bg-slate-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</variant>
|
||||
<variant title="column">
|
||||
<div class="bg-white dark:bg-slate-800 shadow rounded-md max-w-sm w-full mx-auto">
|
||||
<div class="animate-pulse flex flex-col items-center md:flex-col">
|
||||
<div class="object-cover h-56 w-full md:max-w-[20rem] bg-slate-700"></div>
|
||||
<div class="flex-1 space-3-4 flex self-start flex-col justify-between p-2 md:p-4 w-full"><span class="h-2 bg-slate-700"></span><span class="mb-2 h-4 bg-slate-700"></span>
|
||||
<div class="flex space-x-4 flex-row">
|
||||
<div class="rounded-full bg-slate-700 h-10 w-10"></div>
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<div class="h-3 bg-slate-700"></div>
|
||||
<div class="h-2 bg-slate-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</variant>
|
||||
<variant title="not minimal">
|
||||
<div class="bg-white dark:bg-slate-800 shadow rounded-md max-w-4xl w-full mx-auto">
|
||||
<div class="animate-pulse flex flex-col items-center md:flex-row">
|
||||
<div class="object-cover h-56 w-full md:max-w-[20rem] bg-slate-700"></div>
|
||||
<div class="flex-1 space-3-4 flex self-start flex-col justify-between p-2 md:p-4 w-full"><span class="h-2 bg-slate-700"></span><span class="mb-2 h-4 bg-slate-700"></span>
|
||||
<div class="flex space-x-4 flex-row">
|
||||
<div class="rounded-full bg-slate-700 h-10 w-10"></div>
|
||||
<div class="flex flex-col flex-1 space-y-2">
|
||||
<div class="h-3 bg-slate-700"></div>
|
||||
<div class="h-2 bg-slate-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-3 bg-slate-700 mt-3 w-60"></div>
|
||||
<div class="flex">
|
||||
<div class="h-3 bg-slate-700 mt-2 w-20 mr-2 rounded"></div>
|
||||
<div class="h-3 bg-slate-700 mt-2 w-20 mr-2 rounded"></div>
|
||||
<div class="h-3 bg-slate-700 mt-2 w-20 mr-2 rounded"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,14 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Tag Input Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="new">
|
||||
<o-field label-for="tag-input-1" class="taginput-field">
|
||||
<o-taginput modelvalue="Hello" data="" allow-autocomplete="true" allow-new="true" field="title" icon="label" maxlength="20" maxitems="10" placeholder="Eg: Stockholm, Dance, Chess…" id="tag-input-1" dir="auto" expanded=""></o-taginput>
|
||||
</o-field>
|
||||
</variant>
|
||||
<!-- <Variant title="small">
|
||||
<TagInput v-model="tags" />
|
||||
</Variant> -->
|
||||
</story>"
|
||||
`;
|
||||
@@ -0,0 +1,18 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Unlogged Introduction Story > Default 1`] = `
|
||||
"<story>
|
||||
<variant title="Open">
|
||||
<section class="container mx-auto px-2 my-3">
|
||||
<h1 class="dark:text-white font-bold">Test! Test! Test!</h1>
|
||||
<p class="dark:text-white mb-2">An instance that doesn't exist</p>
|
||||
</section>
|
||||
</variant>
|
||||
<variant title="Closed">
|
||||
<section class="container mx-auto px-2 my-3">
|
||||
<h1 class="dark:text-white font-bold">Test! Test! Test!</h1>
|
||||
<p class="dark:text-white mb-2">An instance that doesn't exist</p>
|
||||
</section>
|
||||
</variant>
|
||||
</story>"
|
||||
`;
|
||||
Reference in New Issue
Block a user