Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-08 22:45:45 +01:00
Code Issues Packages Projects Releases Activity

added stories for the footer

Browse Source
This commit is contained in:
Sebastian Sdorra
2020-02-19 09:49:31 +01:00
parent f23b464524
commit f96ebc98cd
3 changed files with 322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
scm-ui/ui-components/src/__resources__/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

266
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -32389,6 +32389,272 @@ exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
</div> </div>
`; `;
exports[`Storyshots Layout|Footer Default 1`] = `
<footer
className="footer"
>
<div
className="container is-centered has-text-centered "
>
<p
className="is-size-6 columns is-centered"
>
<a
href="/me"
onClick={[Function]}
>
Trillian McMillian
</a>
</p>
<hr
className="has-background-grey-lighter"
/>
<p>
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
2.0.0
</a>
</p>
<br />
<p>
Powered by
<a
href="https://cloudogu.com/"
target="_blank"
>
Cloudogu GmbH
</a>
| Learn more about
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
</a>
</p>
</div>
</footer>
`;
exports[`Storyshots Layout|Footer Full 1`] = `
<footer
className="footer"
>
<div
className="container is-centered has-text-centered "
>
<p
className="is-size-6 columns is-centered"
>
<figure
className="media-left"
>
<p
className="image is-24x24 is-rounded"
>
<img
alt="trillian"
className="is-rounded"
src="test-file-stub"
/>
</p>
</figure>
<a
href="/me"
onClick={[Function]}
>
Trillian McMillian
</a>
</p>
<hr
className="has-background-grey-lighter"
/>
<p>
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
2.0.0
</a>
|
<a
href="#"
>
REST API
</a>
|
<a
href="#"
>
CLI
</a>
</p>
<br />
<p>
Powered by
<a
href="https://cloudogu.com/"
target="_blank"
>
Cloudogu GmbH
</a>
| Learn more about
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
</a>
</p>
</div>
</footer>
`;
exports[`Storyshots Layout|Footer With Avatar 1`] = `
<footer
className="footer"
>
<div
className="container is-centered has-text-centered "
>
<p
className="is-size-6 columns is-centered"
>
<figure
className="media-left"
>
<p
className="image is-24x24 is-rounded"
>
<img
alt="trillian"
className="is-rounded"
src="test-file-stub"
/>
</p>
</figure>
<a
href="/me"
onClick={[Function]}
>
Trillian McMillian
</a>
</p>
<hr
className="has-background-grey-lighter"
/>
<p>
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
2.0.0
</a>
</p>
<br />
<p>
Powered by
<a
href="https://cloudogu.com/"
target="_blank"
>
Cloudogu GmbH
</a>
| Learn more about
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
</a>
</p>
</div>
</footer>
`;
exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
<footer
className="footer"
>
<div
className="container is-centered has-text-centered "
>
<p
className="is-size-6 columns is-centered"
>
<a
href="/me"
onClick={[Function]}
>
Trillian McMillian
</a>
</p>
<hr
className="has-background-grey-lighter"
/>
<p>
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
2.0.0
</a>
|
<a
href="#"
>
REST API
</a>
|
<a
href="#"
>
CLI
</a>
</p>
<br />
<p>
Powered by
<a
href="https://cloudogu.com/"
target="_blank"
>
Cloudogu GmbH
</a>
| Learn more about
<a
href="https://www.scm-manager.org/"
target="_blank"
>
SCM-Manager
</a>
</p>
</div>
</footer>
`;
exports[`Storyshots Loading Default 1`] = ` exports[`Storyshots Loading Default 1`] = `
<div> <div>
<div <div

56
scm-ui/ui-components/src/layout/Footer.stories.tsx Normal file
View File

@@ -0,0 +1,56 @@
import React from "react";
import { storiesOf } from "@storybook/react";
import Footer from "./Footer";
import { Binder, BinderContext } from "@scm-manager/ui-extensions";
import { Me } from "@scm-manager/ui-types";
import { EXTENSION_POINT } from "../avatar/Avatar";
// @ts-ignore ignore unknown png
import avatar from "../__resources__/avatar.png";
const trillian: Me = {
name: "trillian",
displayName: "Trillian McMillian",
mail: "tricia@hitchhiker.com",
groups: ["crew"],
_links: {}
};
const bindAvatar = (binder: Binder) => {
binder.bind(EXTENSION_POINT, () => {
return avatar;
});
};
const bindLinks = (binder: Binder) => {
binder.bind("footer.links", () => <a href="#">REST API</a>);
binder.bind("footer.links", () => <a href="#">CLI</a>);
};
const withBinder = (binder: Binder) => {
return (
<BinderContext.Provider value={binder}>
<Footer me={trillian} version="2.0.0" links={{}} />
</BinderContext.Provider>
);
};
storiesOf("Layout|Footer", module)
.add("Default", () => {
return <Footer me={trillian} version="2.0.0" links={{}} />;
})
.add("With Avatar", () => {
const binder = new Binder("avatar-story");
bindAvatar(binder);
return withBinder(binder);
})
.add("With Plugin Links", () => {
const binder = new Binder("link-story");
bindLinks(binder);
return withBinder(binder);
})
.add("Full", () => {
const binder = new Binder("link-story");
bindAvatar(binder);
bindLinks(binder);
return withBinder(binder);
});