mirror of
https://github.com/scm-manager/scm-manager.git
synced 2026-03-04 03:10:50 +01:00
Merge pull request #1100 from scm-manager/feature/add_icon_options
Add iconStyle + onClick option and story shot for icon component
This commit is contained in:
Sebastian Sdorra
GitHub
30
CHANGELOG.md
30
CHANGELOG.md
@@ -5,24 +5,26 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## Unreleased
|
||||
### Added
|
||||
- Add iconStyle + onClick option and story shot for icon component ([#1100](https://github.com/scm-manager/scm-manager/pull/1100))
|
||||
|
||||
### Changed
|
||||
- Removed the `requires` attribute on the `@Extension` annotation and instead create a new `@Requires` annotation ([#1097](https://github.com/scm-manager/scm-manager/pull/1097))
|
||||
|
||||
## 2.0.0-rc7 - 2020-04-09
|
||||
## [2.0.0-rc7] - 2020-04-09
|
||||
### Added
|
||||
- Fire various plugin events ([#1088](https://github.com/scm-manager/scm-manager/pull/1088))
|
||||
- Display version for plugins ([#1089](https://github.com/scm-manager/scm-manager/pull/1089)
|
||||
- Display version for plugins ([#1089](https://github.com/scm-manager/scm-manager/pull/1089))
|
||||
|
||||
### Changed
|
||||
- Simplified collapse state management of the secondary navigation ([#1086](https://github.com/scm-manager/scm-manager/pull/1086)
|
||||
- Ensure same monospace font-family throughout whole SCM-Manager ([#1091](https://github.com/scm-manager/scm-manager/pull/1091)
|
||||
- Simplified collapse state management of the secondary navigation ([#1086](https://github.com/scm-manager/scm-manager/pull/1086))
|
||||
- Ensure same monospace font-family throughout whole SCM-Manager ([#1091](https://github.com/scm-manager/scm-manager/pull/1091))
|
||||
|
||||
### Fixed
|
||||
- Authentication for write requests for repositories with anonymous read access ([#108](https://github.com/scm-manager/scm-manager/pull/1081))
|
||||
- Submodules in git do no longer lead to a server error in the browser command ([#1093](https://github.com/scm-manager/scm-manager/pull/1093))
|
||||
|
||||
## 2.0.0-rc6 - 2020-03-26
|
||||
## [2.0.0-rc6] - 2020-03-26
|
||||
### Added
|
||||
- Extension point to add links to the repository cards from plug ins ([#1041](https://github.com/scm-manager/scm-manager/pull/1041))
|
||||
- Libc based restart strategy for posix operating systems ([#1079](https://github.com/scm-manager/scm-manager/pull/1079))
|
||||
@@ -46,7 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- Show specific notification for plugin actions on plugin administration ([#1057](https://github.com/scm-manager/scm-manager/pull/1057))
|
||||
- Invalid markdown could make parts of the page inaccessible ([#1077](https://github.com/scm-manager/scm-manager/pull/1077))
|
||||
|
||||
## 2.0.0-rc5 - 2020-03-12
|
||||
## [2.0.0-rc5] - 2020-03-12
|
||||
### Added
|
||||
- Added footer extension points for links and avatar
|
||||
- Create OpenAPI specification during build
|
||||
@@ -71,7 +73,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- Enunciate rest documentation
|
||||
- Obsolete fields in data transfer objects
|
||||
|
||||
## 2.0.0-rc4 - 2020-02-14
|
||||
## [2.0.0-rc4] - 2020-02-14
|
||||
### Added
|
||||
- Support for Java versions > 8
|
||||
- Simple ClassLoaderLifeCycle to fix integration tests on Java > 8
|
||||
@@ -87,12 +89,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
### Fixed
|
||||
- Committer of new Git commits set to "SCM-Manager <noreply@scm-manager.org>"
|
||||
|
||||
## 2.0.0-rc3 - 2020-01-31
|
||||
## [2.0.0-rc3] - 2020-01-31
|
||||
### Fixed
|
||||
- Broken plugin order fixed
|
||||
- MarkdownViewer in code section renders markdown properly
|
||||
|
||||
## 2.0.0-rc2 - 2020-01-29
|
||||
## [2.0.0-rc2] - 2020-01-29
|
||||
### Added
|
||||
- Set individual page title
|
||||
- Copy on write
|
||||
@@ -115,7 +117,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- Page title is now set correctly
|
||||
- Restart after migration
|
||||
|
||||
## 2.0.0-rc1 - 2019-12-02
|
||||
## [2.0.0-rc1] - 2019-12-02
|
||||
### Added
|
||||
- Namespace concept and endpoints
|
||||
- File history
|
||||
@@ -132,3 +134,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- Anonymous access via git-clone and API access with anonymous user
|
||||
- Cache and x-requested-with header to bundle requests
|
||||
- remove public flag from repository and migrate permissions to anonymous user
|
||||
|
||||
[2.0.0-rc1]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc1
|
||||
[2.0.0-rc2]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc2
|
||||
[2.0.0-rc3]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc3
|
||||
[2.0.0-rc4]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc4
|
||||
[2.0.0-rc5]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc5
|
||||
[2.0.0-rc6]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc6
|
||||
[2.0.0-rc7]: https://github.com/scm-manager/scm-manager/releases/tag/2.0.0-rc7
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
import React, { FC } from "react";
|
||||
import React from "react";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import CardColumn from "./CardColumn";
|
||||
@@ -35,8 +35,6 @@ const Wrapper = styled.div`
|
||||
max-width: 400px;
|
||||
`;
|
||||
|
||||
const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
|
||||
|
||||
const link = "/foo/bar";
|
||||
const avatar = <Icon name="icons fa-2x fa-fw" />;
|
||||
const title = <strong>title</strong>;
|
||||
@@ -46,8 +44,8 @@ const baseDate = "2020-03-26T12:13:42+02:00";
|
||||
|
||||
storiesOf("CardColumn", module)
|
||||
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
|
||||
.addDecorator(storyFn => <Container>{storyFn()}</Container>)
|
||||
.add("default", () => (
|
||||
.addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
|
||||
.add("Default", () => (
|
||||
<CardColumn
|
||||
link={link}
|
||||
avatar={avatar}
|
||||
@@ -57,16 +55,15 @@ storiesOf("CardColumn", module)
|
||||
footerRight={footerRight}
|
||||
/>
|
||||
))
|
||||
.add("minimal", () => (
|
||||
.add("Minimal", () => <CardColumn title={title} footerLeft={footerLeft} footerRight={footerRight} />)
|
||||
.add("With hoverable date", () => (
|
||||
<CardColumn
|
||||
title={title}
|
||||
footerLeft={footerLeft}
|
||||
footerRight={footerRight}
|
||||
footerRight={
|
||||
<small className="level-item">
|
||||
<DateFromNow baseDate={baseDate} date={repository.creationDate} />
|
||||
</small>
|
||||
}
|
||||
/>
|
||||
))
|
||||
.add("with hoverable date", () => (
|
||||
<CardColumn title={title} footerLeft={footerLeft} footerRight={
|
||||
<small className="level-item">
|
||||
<DateFromNow baseDate={baseDate} date={repository.creationDate}/>
|
||||
</small>} />
|
||||
));
|
||||
));
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
import React, { FC } from "react";
|
||||
import React from "react";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import CardColumnSmall from "./CardColumnSmall";
|
||||
@@ -33,8 +33,6 @@ const Wrapper = styled.div`
|
||||
max-width: 400px;
|
||||
`;
|
||||
|
||||
const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
|
||||
|
||||
const link = "/foo/bar";
|
||||
const icon = <Icon name="icons fa-2x fa-fw" />;
|
||||
const contentLeft = <strong className="is-marginless">main content</strong>;
|
||||
@@ -42,10 +40,8 @@ const contentRight = <small>more text</small>;
|
||||
|
||||
storiesOf("CardColumnSmall", module)
|
||||
.addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
|
||||
.addDecorator(storyFn => <Container>{storyFn()}</Container>)
|
||||
.add("default", () => (
|
||||
.addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
|
||||
.add("Default", () => (
|
||||
<CardColumnSmall link={link} avatar={icon} contentLeft={contentLeft} contentRight={contentRight} />
|
||||
))
|
||||
.add("minimal", () => (
|
||||
<CardColumnSmall link={link} contentLeft={contentLeft} contentRight={contentRight} />
|
||||
));
|
||||
.add("Minimal", () => <CardColumnSmall link={link} contentLeft={contentLeft} contentRight={contentRight} />);
|
||||
|
||||
78
scm-ui/ui-components/src/Icon.stories.tsx
Normal file
78
scm-ui/ui-components/src/Icon.stories.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
/*
|
||||
* MIT License
|
||||
*
|
||||
* Copyright (c) 2020-present Cloudogu GmbH and Contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
import React from "react";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import styled from "styled-components";
|
||||
import Icon from "./Icon";
|
||||
|
||||
const Wrapper = styled.div`
|
||||
* {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const colors = ["primary", "link", "info", "success", "warning", "danger", "white", "light", "dark", "black", "text"];
|
||||
const sizing = ["xs", "sm", "lg", "2x", "3x", "5x", "7x", "10x"];
|
||||
|
||||
storiesOf("Icon", module)
|
||||
.addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
|
||||
.add("Default", () => (
|
||||
<>
|
||||
<Icon name="cat" />
|
||||
<Icon title="Download" name="download" color="info" />
|
||||
<Icon title="Pull Request" name="code-branch fa-rotate-180" color="warning" />
|
||||
<Icon title="Star" iconStyle="far" name="star" color="inherit" />
|
||||
</>
|
||||
))
|
||||
.add("Colors", () => (
|
||||
<>
|
||||
<Icon title="default color" name="cat" />
|
||||
{colors.map(color => (
|
||||
<Icon key={color} title={color} name="cat" color={color} />
|
||||
))}
|
||||
</>
|
||||
))
|
||||
.add("Sizing", () => (
|
||||
<>
|
||||
<Icon title="default size" name="cat" />
|
||||
{sizing.map(size => (
|
||||
<Icon key={size} title={"fa-" + size} name={"cat fa-" + size} />
|
||||
))}
|
||||
</>
|
||||
))
|
||||
.add("Icon styles", () => (
|
||||
<>
|
||||
<Icon title="solid style" name="star" color="inherit" />
|
||||
<Icon title="regular style" iconStyle="far" name="star" color="inherit" />
|
||||
<Icon title="brand style" iconStyle="fab" name="react" color="inherit" />
|
||||
</>
|
||||
))
|
||||
.add("More options", () => (
|
||||
<>
|
||||
<Icon title="rotate-270" name="snowboarding fa-rotate-270" />
|
||||
<Icon title="spin" name="spinner fa-spin" />
|
||||
<Icon title="custom sizing" name="cat" className="is-size-4" />
|
||||
<Icon title="custom background" name="hand-sparkles" className="has-background-primary-25" />
|
||||
</>
|
||||
));
|
||||
@@ -26,6 +26,7 @@ import classNames from "classnames";
|
||||
|
||||
type Props = {
|
||||
title?: string;
|
||||
iconStyle: string;
|
||||
name: string;
|
||||
color: string;
|
||||
className?: string;
|
||||
@@ -33,14 +34,17 @@ type Props = {
|
||||
|
||||
export default class Icon extends React.Component<Props> {
|
||||
static defaultProps = {
|
||||
iconStyle: "fas",
|
||||
color: "grey-light"
|
||||
};
|
||||
|
||||
render() {
|
||||
const { title, name, color, className } = this.props;
|
||||
const { title, iconStyle, name, color, className } = this.props;
|
||||
if (title) {
|
||||
return <i title={title} className={classNames("fas", "fa-fw", "fa-" + name, `has-text-${color}`, className)} />;
|
||||
return (
|
||||
<i title={title} className={classNames(iconStyle, "fa-fw", "fa-" + name, `has-text-${color}`, className)} />
|
||||
);
|
||||
}
|
||||
return <i className={classNames("fas", "fa-" + name, `has-text-${color}`, className)} />;
|
||||
return <i className={classNames(iconStyle, "fa-" + name, `has-text-${color}`, className)} />;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -445,7 +445,7 @@ exports[`Storyshots Buttons|SubmitButton Default 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots CardColumn default 1`] = `
|
||||
exports[`Storyshots CardColumn Default 1`] = `
|
||||
<div
|
||||
className="CardColumnstories__Wrapper-sc-1ztucl-0 IFDjP"
|
||||
>
|
||||
@@ -510,7 +510,7 @@ exports[`Storyshots CardColumn default 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots CardColumn minimal 1`] = `
|
||||
exports[`Storyshots CardColumn Minimal 1`] = `
|
||||
<div
|
||||
className="CardColumnstories__Wrapper-sc-1ztucl-0 IFDjP"
|
||||
>
|
||||
@@ -558,7 +558,7 @@ exports[`Storyshots CardColumn minimal 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots CardColumn with hoverable date 1`] = `
|
||||
exports[`Storyshots CardColumn With hoverable date 1`] = `
|
||||
<div
|
||||
className="CardColumnstories__Wrapper-sc-1ztucl-0 IFDjP"
|
||||
>
|
||||
@@ -613,7 +613,7 @@ exports[`Storyshots CardColumn with hoverable date 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots CardColumnSmall default 1`] = `
|
||||
exports[`Storyshots CardColumnSmall Default 1`] = `
|
||||
<div
|
||||
className="CardColumnSmallstories__Wrapper-ofr817-0 fwZASP"
|
||||
>
|
||||
@@ -661,7 +661,7 @@ exports[`Storyshots CardColumnSmall default 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots CardColumnSmall minimal 1`] = `
|
||||
exports[`Storyshots CardColumnSmall Minimal 1`] = `
|
||||
<div
|
||||
className="CardColumnSmallstories__Wrapper-ofr817-0 fwZASP"
|
||||
>
|
||||
@@ -32706,6 +32706,168 @@ exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Icon Colors 1`] = `
|
||||
<div
|
||||
className="Iconstories__Wrapper-sc-1g657fe-0 hCEjkH"
|
||||
>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-grey-light"
|
||||
title="default color"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-primary"
|
||||
title="primary"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-link"
|
||||
title="link"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-info"
|
||||
title="info"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-success"
|
||||
title="success"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-warning"
|
||||
title="warning"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-danger"
|
||||
title="danger"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-white"
|
||||
title="white"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-light"
|
||||
title="light"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-dark"
|
||||
title="dark"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-black"
|
||||
title="black"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-text"
|
||||
title="text"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Icon Default 1`] = `
|
||||
<div
|
||||
className="Iconstories__Wrapper-sc-1g657fe-0 hCEjkH"
|
||||
>
|
||||
<i
|
||||
className="fas fa-cat has-text-grey-light"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-download has-text-info"
|
||||
title="Download"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-code-branch fa-rotate-180 has-text-warning"
|
||||
title="Pull Request"
|
||||
/>
|
||||
<i
|
||||
className="far fa-fw fa-star has-text-inherit"
|
||||
title="Star"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Icon Icon styles 1`] = `
|
||||
<div
|
||||
className="Iconstories__Wrapper-sc-1g657fe-0 hCEjkH"
|
||||
>
|
||||
<i
|
||||
className="fas fa-fw fa-star has-text-inherit"
|
||||
title="solid style"
|
||||
/>
|
||||
<i
|
||||
className="far fa-fw fa-star has-text-inherit"
|
||||
title="regular style"
|
||||
/>
|
||||
<i
|
||||
className="fab fa-fw fa-react has-text-inherit"
|
||||
title="brand style"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Icon More options 1`] = `
|
||||
<div
|
||||
className="Iconstories__Wrapper-sc-1g657fe-0 hCEjkH"
|
||||
>
|
||||
<i
|
||||
className="fas fa-fw fa-snowboarding fa-rotate-270 has-text-grey-light"
|
||||
title="rotate-270"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-spinner fa-spin has-text-grey-light"
|
||||
title="spin"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-grey-light is-size-4"
|
||||
title="custom sizing"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-hand-sparkles has-text-grey-light has-background-primary-25"
|
||||
title="custom background"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Icon Sizing 1`] = `
|
||||
<div
|
||||
className="Iconstories__Wrapper-sc-1g657fe-0 hCEjkH"
|
||||
>
|
||||
<i
|
||||
className="fas fa-fw fa-cat has-text-grey-light"
|
||||
title="default size"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat fa-xs has-text-grey-light"
|
||||
title="fa-xs"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat fa-sm has-text-grey-light"
|
||||
title="fa-sm"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat fa-lg has-text-grey-light"
|
||||
title="fa-lg"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat fa-2x has-text-grey-light"
|
||||
title="fa-2x"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat fa-3x has-text-grey-light"
|
||||
title="fa-3x"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat fa-5x has-text-grey-light"
|
||||
title="fa-5x"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat fa-7x has-text-grey-light"
|
||||
title="fa-7x"
|
||||
/>
|
||||
<i
|
||||
className="fas fa-fw fa-cat fa-10x has-text-grey-light"
|
||||
title="fa-10x"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Layout|Footer Default 1`] = `
|
||||
<footer
|
||||
className="footer"
|
||||
|
||||
Reference in New Issue
Block a user