Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2026-05-07 01:05:48 +02:00
Code Issues Packages Projects Releases Activity

Add storyshot for our concrete bug case

Browse Source
This commit is contained in:
Florian Scholdei
2020-07-30 16:52:22 +02:00
parent 2490eccc71
commit 4268fed114
2 changed files with 115 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41565,6 +41565,97 @@ exports[`Storyshots Modal|Modal Default 1`] = `
</div>
`;
exports[`Storyshots Modal|Modal With Checkbox with HelpText inside 1`] = `
<div
className="modal is-active"
>
<div
className="modal-background"
/>
<div
className="modal-card"
>
<header
className="modal-card-head has-background-light"
>
<p
className="modal-card-title is-marginless"
>
Hitchhiker Modal
</p>
<button
aria-label="close"
className="delete"
onClick={[Function]}
/>
</header>
<section
className="modal-card-body"
>
<p>
This content should not cause a vertical scrollbar.
</p>
<div
className="Modalstories__TopAndBottomMargin-sc-2lb0wg-0 bfocSI"
>
<div
className="field"
>
<div
className="control"
onClick={[Function]}
>
<label
className="checkbox"
>
<i
className="is-outlined fa-square has-text-black far"
/>
Classic helpText
<span
className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 cYhfno is-inline-block has-tooltip-multiline"
data-tooltip="This is a classic help text."
>
<i
className="fas fa-question-circle has-text-blue-light"
/>
</span>
</label>
</div>
</div>
<div
className="field"
>
<div
className="control"
onClick={[Function]}
>
<label
className="checkbox"
>
<i
className="is-outlined fa-check-square has-text-link fa"
/>
Long helpText
<span
className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 cYhfno is-inline-block has-tooltip-multiline"
data-tooltip="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
>
<i
className="fas fa-question-circle has-text-blue-light"
/>
</span>
</label>
</div>
</div>
</div>
</section>
</div>
</div>
`;
exports[`Storyshots Navigation|Secondary Active when match 1`] = `
<div
className="SecondaryNavigationstories__Columns-fdxo4w-0 iEPunq columns"

25
scm-ui/ui-components/src/modals/Modal.stories.tsx
View File

@@ -27,6 +27,12 @@ import { MemoryRouter } from "react-router-dom";
import * as React from "react";
import { useState } from "react";
import Modal from "./Modal";
import Checkbox from "../forms/Checkbox";
import styled from "styled-components";
const TopAndBottomMargin = styled.div`
margin: 0.75rem 0; // only for aesthetic reasons
`;
const body = (
<p>
@@ -37,9 +43,26 @@ const body = (
</p>
);
const checkboxBody = (
<>
<p>This content should not cause a vertical scrollbar.</p>
<TopAndBottomMargin>
<Checkbox label="Classic helpText" checked={false} helpText="This is a classic help text." />
<Checkbox
label="Long helpText"
checked={true}
helpText="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
/>
</TopAndBottomMargin>
</>
);
storiesOf("Modal|Modal", module)
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
.add("Default", () => <CloseableModal />);
.add("Default", () => <CloseableModal />)
.add("With Checkbox with HelpText inside", () => (
<Modal body={checkboxBody} closeFunction={() => true} active={true} title={"Hitchhiker Modal"} />
));
const CloseableModal = () => {
const [show, setShow] = useState(true);