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

Merge branch 'develop' into feature/commit_mention_links_markdown

Browse Source
This commit is contained in:
eheimbuch
2020-06-24 15:29:39 +02:00
committed by GitHub
parent 0eeddd5103 a64fad9622
commit d651f7a2e4
21 changed files with 466 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
scm-ui/ui-components/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@scm-manager/ui-components",
"version": "2.1.0",
"version": "2.1.1",
"description": "UI Components for SCM-Manager and its plugins",
"main": "src/index.ts",
"files": [

44
scm-ui/ui-components/src/Tooltip.stories.tsx
View File

@@ -32,24 +32,38 @@ import Button from "./buttons/Button";
const Wrapper = styled.div`
margin: 2rem;
max-width: 400px;
width: 100%;
`;
const Spacing = styled.div`
padding: 2em 6em;
width: 50%;
margin: 0 auto;
`;
const positions = ["right", "top", "left", "bottom"];
const message = "Heart of Gold";
const mutltiline = `Characters:
- Arthur Dent
- Ford Prefect
- Zaphod Beeblebrox
- Marvin the Paranoid Android
- Trillian
- Slartibartfast`;
const shortMultiline = `* a
* b
* c`;
const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
storiesOf("Tooltip", module)
.addDecorator(RoutingDecorator)
.addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
.add("Default", () => (
<div>
<Wrapper>
{positions.map(position => (
<Spacing>
<Tooltip message={message} location={position}>
@@ -57,5 +71,27 @@ storiesOf("Tooltip", module)
</Tooltip>
</Spacing>
))}
</div>
</Wrapper>
))
.add("Multiline", () => (
<Wrapper>
{positions.map(position => (
<Spacing>
<Tooltip message={mutltiline} location={position}>
<Button label={position} color="info" />{" "}
</Tooltip>
</Spacing>
))}
</Wrapper>
))
.add("Short Multiline", () => (
<Wrapper>
{positions.map(position => (
<Spacing>
<Tooltip message={shortMultiline} location={position}>
<Button label={position} color="info" />{" "}
</Tooltip>
</Spacing>
))}
</Wrapper>
));

3
scm-ui/ui-components/src/Tooltip.tsx
View File

@@ -38,9 +38,8 @@ class Tooltip extends React.Component<Props> {
render() {
const { className, message, location, children } = this.props;
const multiline = message.length > 60 ? "has-tooltip-multiline" : "";
return (
<span className={classNames("tooltip", "has-tooltip-" + location, multiline, className)} data-tooltip={message}>
<span className={classNames("tooltip", "has-tooltip-" + location, className)} data-tooltip={message}>
{children}
</span>
);

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

@@ -17281,7 +17281,7 @@ exports[`Storyshots Diff File Controls 1`] = `
className="control"
>
<span
className="tooltip has-tooltip-top has-tooltip-multiline"
className="tooltip has-tooltip-top"
data-tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
>
<a
@@ -17862,7 +17862,7 @@ exports[`Storyshots Diff File Controls 1`] = `
className="control"
>
<span
className="tooltip has-tooltip-top has-tooltip-multiline"
className="tooltip has-tooltip-top"
data-tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
>
<a
@@ -18720,7 +18720,7 @@ exports[`Storyshots Diff File Controls 1`] = `
className="control"
>
<span
className="tooltip has-tooltip-top has-tooltip-multiline"
className="tooltip has-tooltip-top"
data-tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
>
<a
@@ -19174,7 +19174,7 @@ exports[`Storyshots Diff File Controls 1`] = `
className="control"
>
<span
className="tooltip has-tooltip-top has-tooltip-multiline"
className="tooltip has-tooltip-top"
data-tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
>
<a
@@ -19628,7 +19628,7 @@ exports[`Storyshots Diff File Controls 1`] = `
className="control"
>
<span
className="tooltip has-tooltip-top has-tooltip-multiline"
className="tooltip has-tooltip-top"
data-tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
>
<a
@@ -20689,7 +20689,7 @@ exports[`Storyshots Diff File Controls 1`] = `
className="control"
>
<span
className="tooltip has-tooltip-top has-tooltip-multiline"
className="tooltip has-tooltip-top"
data-tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
>
<a
@@ -43584,81 +43584,273 @@ exports[`Storyshots Toast Warning 1`] = `null`;
exports[`Storyshots Tooltip Default 1`] = `
<div
className="Tooltipstories__Wrapper-sc-1c34uq-0 kMYfDl"
className="Tooltipstories__Wrapper-sc-1c34uq-0 QoXmo"
>
<div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 loCuMv"
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
>
<span
className="tooltip has-tooltip-right"
data-tooltip="Heart of Gold"
>
<span
className="tooltip has-tooltip-right"
data-tooltip="Heart of Gold"
<button
className="button is-info"
onClick={[Function]}
type="button"
>
<button
className="button is-info"
onClick={[Function]}
type="button"
>
right
</button>
right
</span>
</div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 loCuMv"
</button>
</span>
</div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
>
<span
className="tooltip has-tooltip-top"
data-tooltip="Heart of Gold"
>
<span
className="tooltip has-tooltip-top"
data-tooltip="Heart of Gold"
<button
className="button is-info"
onClick={[Function]}
type="button"
>
<button
className="button is-info"
onClick={[Function]}
type="button"
>
top
</button>
top
</span>
</div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 loCuMv"
</button>
</span>
</div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
>
<span
className="tooltip has-tooltip-left"
data-tooltip="Heart of Gold"
>
<span
className="tooltip has-tooltip-left"
data-tooltip="Heart of Gold"
<button
className="button is-info"
onClick={[Function]}
type="button"
>
<button
className="button is-info"
onClick={[Function]}
type="button"
>
left
</button>
left
</span>
</div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 loCuMv"
</button>
</span>
</div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
>
<span
className="tooltip has-tooltip-bottom"
data-tooltip="Heart of Gold"
>
<span
className="tooltip has-tooltip-bottom"
data-tooltip="Heart of Gold"
<button
className="button is-info"
onClick={[Function]}
type="button"
>
<button
className="button is-info"
onClick={[Function]}
type="button"
>
bottom
</button>
bottom
</span>
</div>
</button>
</span>
</div>
</div>
`;
exports[`Storyshots Tooltip Multiline 1`] = `
<div
className="Tooltipstories__Wrapper-sc-1c34uq-0 QoXmo"
>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
>
<span
className="tooltip has-tooltip-right"
data-tooltip="Characters:
- Arthur Dent
- Ford Prefect
- Zaphod Beeblebrox
- Marvin the Paranoid Android
- Trillian
- Slartibartfast"
>
<button
className="button is-info"
onClick={[Function]}
type="button"
>
right
</button>
</span>
</div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
>
<span
className="tooltip has-tooltip-top"
data-tooltip="Characters:
- Arthur Dent
- Ford Prefect
- Zaphod Beeblebrox
- Marvin the Paranoid Android
- Trillian
- Slartibartfast"
>
<button
className="button is-info"
onClick={[Function]}
type="button"
>
top
</button>
</span>
</div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
>
<span
className="tooltip has-tooltip-left"
data-tooltip="Characters:
- Arthur Dent
- Ford Prefect
- Zaphod Beeblebrox
- Marvin the Paranoid Android
- Trillian
- Slartibartfast"
>
<button
className="button is-info"
onClick={[Function]}
type="button"
>
left
</button>
</span>
</div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
>
<span
className="tooltip has-tooltip-bottom"
data-tooltip="Characters:
- Arthur Dent
- Ford Prefect
- Zaphod Beeblebrox
- Marvin the Paranoid Android
- Trillian
- Slartibartfast"
>
<button
className="button is-info"
onClick={[Function]}
type="button"
>
bottom
</button>
</span>
</div>
</div>
`;
exports[`Storyshots Tooltip Short Multiline 1`] = `
<div
className="Tooltipstories__Wrapper-sc-1c34uq-0 QoXmo"
>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
>
<span
className="tooltip has-tooltip-right"
data-tooltip="* a
* b
* c"
>
<button
className="button is-info"
onClick={[Function]}
type="button"
>
right
</button>
</span>
</div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
>
<span
className="tooltip has-tooltip-top"
data-tooltip="* a
* b
* c"
>
<button
className="button is-info"
onClick={[Function]}
type="button"
>
top
</button>
</span>
</div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
>
<span
className="tooltip has-tooltip-left"
data-tooltip="* a
* b
* c"
>
<button
className="button is-info"
onClick={[Function]}
type="button"
>
left
</button>
</span>
</div>
<div
className="Tooltipstories__Spacing-sc-1c34uq-1 fFVjYs"
>
<span
className="tooltip has-tooltip-bottom"
data-tooltip="* a
* b
* c"
>
<button
className="button is-info"
onClick={[Function]}
type="button"
>
bottom
</button>
</span>
</div>
</div>
`;