4 |
5 | Set of React components used by [Argo Workflows](https://github.com/argoproj/argo-workflows), [Argo CD](https://github.com/argoproj/argo-cd), and [Argo Rollouts](https://github.com/argoproj/argo-rollouts).
6 |
7 | ## Build & Run
8 |
9 | 1. Install Toolset: [NodeJS](https://nodejs.org/en/download/) and [Yarn v1](https://classic.yarnpkg.com/en/docs)
10 | 1. Install Dependencies: run `yarn install`
11 | 1. Run: `yarn start` - starts the [Storybook v6](https://storybook.js.org/docs/6.5/get-started/install) dev server
12 |
13 | ## Local Development
14 |
15 | To test your changes locally against Argo CD or another Argo project, we recommend using [`yalc`](https://github.com/wclr/yalc).
16 |
17 | First, install `yalc`:
18 |
19 | ```sh
20 | npm i -g yalc
21 | ```
22 |
23 | Next, in your local `argo-ui` directory, run
24 |
25 | ```sh
26 | yalc publish
27 | ```
28 |
29 | Finally, in your local `argo-cd/ui` directory, run
30 |
31 | ```sh
32 | yalc add argo-ui
33 | ```
34 |
35 | Your local changes to the `argo-ui` package will now be seen by your local `argo-cd`.
36 |
--------------------------------------------------------------------------------
/VERSION:
--------------------------------------------------------------------------------
1 | v2.2.1
2 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: 'ts-jest',
3 | collectCoverage: true,
4 | collectCoverageFrom: [
5 | 'src/**/*.{ts,tsx}'
6 | ],
7 | "moduleNameMapper": {
8 | "\\.(css|less|scss|sass)$": "identity-obj-proxy"
9 | },
10 | snapshotSerializers: ['enzyme-to-json/serializer'],
11 | setupFilesAfterEnv: ['-
24 | {this.props.items.map((item, i) =>
- this.onItemClick(item, event)} key={i}> 26 | {item.iconClassName && } {item.title} 27 | )} 28 |
16 |
21 | );
22 |
--------------------------------------------------------------------------------
/src/components/logs-viewer/logs-viewer.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/config';
2 | @import 'node_modules/xterm/css/xterm';
3 |
4 | .logs-viewer {
5 | font: normal 13px/1.2 'Courier', sans-serif;
6 | line-height: 20px;
7 | height: 100%;
8 | overflow: hidden;
9 |
10 | &__container {
11 | height: 100%;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/mockup-list/mockup-list.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/config';
2 |
3 | @keyframes wavemove {
4 | from {left: -100%;}
5 | to {left: 100%;}
6 | }
7 | $wave-time: 2s;
8 |
9 | .mockup-list {
10 |
11 | &__item {
12 | position: relative;
13 | overflow: hidden;
14 | font-size: .875em;
15 | color: $argo-color-gray-6;
16 | background-color: #fff;
17 | border-radius: 4px;
18 | box-shadow: 1px 2px 3px rgba($argo-color-gray-9, .1);
19 | opacity: 0.3;
20 | }
21 |
22 | &__wave-loader {
23 | position: relative;
24 | overflow: hidden;
25 | background: linear-gradient(to right, #fff, $argo-color-teal-3, #fff);
26 | width: 50%;
27 | height: 100%;
28 | animation: wavemove $wave-time infinite;
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/mockup-list/mockup-list.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | export interface MockupListProps { height?: number; marginTop?: number; }
4 |
5 | require('./mockup-list.scss');
6 |
7 | export class MockupList extends React.Component
17 |
20 |
25 | { items.map((i: number) => (
26 |
);
31 | }
32 |
33 | private get itemHeight() {
34 | return this.props.height || 60;
35 | }
36 |
37 | private get itemMarginTop() {
38 | return this.props.marginTop || 20;
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/nav-bar/nav-bar.tsx:
--------------------------------------------------------------------------------
1 | import {default as classNames} from 'classnames';
2 | import * as PropTypes from 'prop-types';
3 | import * as React from 'react';
4 |
5 | import { AppContext } from '../../context';
6 | import {Tooltip} from '../tooltip/tooltip';
7 |
8 | require('./nav-bar.scss');
9 |
10 | export interface NavBarProps {
11 | items: Array<{ path: string; iconClassName: string; title: string; }>;
12 | version?: () => React.ReactElement;
13 | style?: NavBarStyle;
14 | }
15 |
16 | export interface NavBarStyle {
17 | backgroundColor?: string;
18 | }
19 |
20 | export function isActiveRoute(locationPath: string, path: string) {
21 | return locationPath === path || locationPath.startsWith(`${path}/`);
22 | }
23 |
24 | export const NavBar: React.FunctionComponent
27 |
28 |
29 | ))}
30 | = 10,
32 | })} style={navBarStyle}>
33 |
46 | );
47 | };
48 |
49 | NavBar.contextTypes = {
50 | router: PropTypes.object,
51 | };
52 |
--------------------------------------------------------------------------------
/src/components/navigation.ts:
--------------------------------------------------------------------------------
1 | import { History } from 'history';
2 | import * as React from 'react';
3 |
4 | export interface NavigationApi {
5 | goto(path: string, query?: {[name: string]: any}, options?: { event?: React.MouseEvent, replace?: boolean }): void;
6 | }
7 |
8 | export class NavigationManager implements NavigationApi {
9 |
10 | private history: History;
11 |
12 | constructor(history: History) {
13 | this.history = history;
14 | }
15 |
16 | public goto(path: string, query: {[name: string]: any} = {}, options?: { event?: React.MouseEvent, replace?: boolean }): void {
17 | if (path.startsWith('.')) {
18 | path = this.history.location.pathname + path.slice(1);
19 | }
20 | const noPathChange = path === this.history.location.pathname;
21 | const params = noPathChange ? new URLSearchParams(this.history.location.search) : new URLSearchParams();
22 | for (const name of Object.keys(query)) {
23 | const val = query[name];
24 | params.delete(name);
25 | if (val !== undefined && val !== null) {
26 | if (val instanceof Array) {
27 | for (const item of val) {
28 | params.append(name, item);
29 | }
30 | } else {
31 | params.set(name, val);
32 | }
33 | }
34 | }
35 | const urlQuery = params.toString();
36 | if (urlQuery !== '') {
37 | path = `${path}?${urlQuery}`;
38 | }
39 | options = options || {};
40 | if (options.event && (options.event.metaKey || options.event.ctrlKey || options.event.button === 1)) {
41 | window.open(path, '_blank');
42 | } else {
43 | if (options.replace) {
44 | this.history.replace(path);
45 | } else {
46 | this.history.push(path);
47 | }
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/notifications/notification-manager.ts:
--------------------------------------------------------------------------------
1 | import { ReplaySubject } from 'rxjs';
2 | import { NotificationInfo } from './notifications';
3 |
4 | export interface NotificationsApi {
5 | show(notification: NotificationInfo, autoHideMs?: number): void;
6 | }
7 |
8 | export class NotificationsManager {
9 | private readonly notificationsSubject = new ReplaySubject
34 | 
35 |
38 |
43 | ))}
44 |
45 |
35 | {props.version && props.version()}
36 | {(props.items || []).map((item) => (
37 | context.router.history.push(item.path)}>
40 |
41 |
42 |
23 |
43 | );
44 |
--------------------------------------------------------------------------------
/src/components/slide-contents/slide-contents.scss:
--------------------------------------------------------------------------------
1 | .slide-contents {
2 | .slide-contents--title {
3 | cursor: pointer;
4 | }
5 | .slide-contents--contents {
6 | overflow-y: hidden;
7 | max-height: 100%;
8 |
9 | &.slide-contents--contents-hidden {
10 | max-height: 0;
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/slide-contents/slide-contents.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | require('./slide-contents.scss');
4 |
5 | export interface SlideContentsProps {
6 | title: string;
7 | contents: JSX.Element;
8 | className: string;
9 | }
10 |
11 | export interface SlideContentsState {
12 | hidden: boolean;
13 | }
14 |
15 | export class SlideContents extends React.Component
24 |
42 |
25 | {props.title}
26 |
27 |
28 | {props.icon &&
29 |
37 |
38 |
30 |
31 |
32 | }
33 |
34 | {isPopupWithChildren(props) ? props.children :
36 |
39 | {props.footer}
40 |
41 |
49 |
59 | );
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/components/ticker.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {interval, Subscription} from 'rxjs';
3 |
4 | export class Ticker extends React.Component<{intervalMs?: number, disabled?: boolean, children?: ((time: Date) => React.ReactNode)}, {time: Date}> {
5 |
6 | private subscription: Subscription | null = null;
7 |
8 | constructor(props: {intervalMs?: number, children?: ((time: Date) => React.ReactNode)}) {
9 | super(props);
10 | this.state = { time: new Date() };
11 | this.ensureSubscribed();
12 | }
13 |
14 | public render() {
15 | return this.props.children && this.props.children(this.state.time);
16 | }
17 |
18 | public componentDidUpdate() {
19 | this.ensureSubscribed();
20 | }
21 |
22 | public componentWillUnmount() {
23 | this.ensureUnsubscribed();
24 | }
25 |
26 | private ensureSubscribed() {
27 | if (this.props.disabled) {
28 | this.ensureUnsubscribed();
29 | } else if (!this.subscription) {
30 | this.subscription = interval(this.props.intervalMs || 1000).subscribe(() => this.setState({ time: new Date() }));
31 | }
32 | }
33 |
34 | private ensureUnsubscribed() {
35 | if (this.subscription != null) {
36 | this.subscription.unsubscribe();
37 | this.subscription = null;
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/tooltip/tooltip.tsx:
--------------------------------------------------------------------------------
1 | import Tippy, { TippyProps } from '@tippy.js/react';
2 | import * as React from 'react';
3 | import 'tippy.js/dist/tippy.css';
4 | import 'tippy.js/themes/light.css';
5 |
6 | export const Tooltip = ( props: TippyProps ) => (
7 | 50 | {title} 51 | {toggleSwitch} 52 |
53 |
54 |
58 |
55 | {contents}
56 |
57 |
25 | {data}
26 |
27 | )}
28 | Dropdown content here
-
17 |
- menu item 1 18 |
- menu item 2 19 |
12 | new Observable((observer) => {
15 | const interval = setInterval(() => observer.next('test\n'), 1000);
16 | return () => clearInterval(interval);
17 | }),
18 | shouldRepeat: () => false,
19 | }}/>
20 |
21 | );
22 | Default.storyName = 'default';
23 |
--------------------------------------------------------------------------------
/stories/notifications.stories.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { NotificationType } from '../src/components/notifications/notifications';
4 |
5 | import { App } from './utils';
6 |
7 | const messages = [
8 | 'Mist enveloped the ship three hours out from port. The recorded voice scratched in the speaker. Silver mist suffused the deck of the ship.',
9 | 'Then came the night of the first falling star. A red flare silhouetted the jagged edge of a wing. She stared through the window at the stars.',
10 | 'The spectacle before us was indeed sublime. A shining crescent far beneath the flying vessel. She stared through the window at the stars.',
11 | ];
12 |
13 | function getMessage() {
14 | return messages[Math.floor(Math.random() * messages.length)];
15 | }
16 |
17 | export default {
18 | title: 'Notifications',
19 | };
20 |
21 | export const Default = () => {
22 | return (
23 |
13 |
24 | )
25 | };
26 | Default.storyName = 'default';
27 |
28 | export const MultiSelect = () => {
29 | const [selected, setSelected] = React.useState(['option1']);
30 | return (
31 | 14 | Selected option value: {selected} 15 | 16 |
17 |
32 |
40 | )
41 | };
42 | MultiSelect.storyName = 'multi-select';
43 |
--------------------------------------------------------------------------------
/stories/table.stories.tsx:
--------------------------------------------------------------------------------
1 | import {default as classNames} from 'classnames';
2 | import * as React from 'react';
3 |
4 | export default {
5 | title: 'Table',
6 | };
7 |
8 | class TableExample extends React.Component
19 |
36 | );
37 | }
38 | }
39 |
40 | export const Default = () =>
20 |
26 | {items.map((item, i) => (
27 |
21 |
25 | Header 1
22 | Header 2
23 | Header 3
24 | this.setState({ selectedIndex: i })}>
28 |
34 | ))}
35 |
29 |
33 | Cell 1 {item}
30 | Cell 2 {item}
31 | Cell 3 {item}
32 | Tab 2 content
, 18 | key: 'tab2', 19 | badge: '5', 20 | }]}/> 21 | ); 22 | BasicTabs.storyName = 'basic tabs'; 23 | -------------------------------------------------------------------------------- /stories/utils.tsx: -------------------------------------------------------------------------------- 1 | import * as PropTypes from 'prop-types'; 2 | import * as React from 'react'; 3 | 4 | import { Notifications } from '../src/components/notifications/notifications'; 5 | import { NotificationsApi, NotificationsManager } from '../src/components/notifications/notification-manager'; 6 | import { Popup, PopupProps } from '../src/components/popup/popup'; 7 | import { PopupApi, PopupManager } from '../src/components/popup/popup-manager'; 8 | 9 | export class App extends React.Component<{ children: (apis: { 10 | notifications: NotificationsApi, 11 | popup: PopupApi, 12 | }) => React.ReactNode }, { popupProps: PopupProps }> { 13 | 14 | public static childContextTypes = { 15 | history: PropTypes.object, 16 | apis: PropTypes.object, 17 | }; 18 | 19 | private popupManager: PopupManager; 20 | private notificationsManager: NotificationsManager; 21 | 22 | constructor(props: { children: (apis: { notifications: NotificationsApi, popup: PopupApi }) => React.ReactNode }) { 23 | super(props); 24 | this.state = { popupProps: null }; 25 | this.notificationsManager = new NotificationsManager(); 26 | this.popupManager = new PopupManager(); 27 | } 28 | 29 | public componentDidMount() { 30 | this.popupManager.popupProps.subscribe((popupProps) => this.setState({ popupProps })); 31 | } 32 | 33 | public render() { 34 | return ( 35 |
36 |
37 | {this.state.popupProps &&
40 | );
41 | }
42 |
43 | public getChildContext() {
44 | return { history, apis: { popup: this.popupManager, notifications: this.notificationsManager } };
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./../bundle",
4 | "sourceMap": true,
5 | "noImplicitAny": true,
6 | "module": "commonjs",
7 | "target": "es6",
8 | "jsx": "react",
9 | "esModuleInterop": true,
10 | "experimentalDecorators": true,
11 | "noUnusedLocals": true,
12 | "declaration": true,
13 | "skipLibCheck": true,
14 | "lib": [
15 | "es2017",
16 | "dom"
17 | ],
18 | "typeRoots": [
19 | "./node_modules/@types"
20 | ]
21 | },
22 | "include": ["./**/*"],
23 | "exclude": ["node_modules", "./**/*.test.ts", "./**/*.test.tsx", "./**/*.stories.tsx"]
24 | }
25 |
--------------------------------------------------------------------------------
/v2/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [["@babel/plugin-proposal-private-property-in-object", {"loose": true}]]
3 | }
4 |
--------------------------------------------------------------------------------
/v2/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/v2/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "bracketSpacing": false,
3 | "jsxSingleQuote": true,
4 | "printWidth": 180,
5 | "singleQuote": true,
6 | "tabWidth": 4,
7 | "jsxBracketSameLine": true,
8 | "quoteProps": "consistent"
9 | }
10 |
--------------------------------------------------------------------------------
/v2/.storybook/Argo.js:
--------------------------------------------------------------------------------
1 | import {create} from '@storybook/theming';
2 |
3 | export default create({
4 | base: 'light',
5 | brandTitle: 'Argo UX',
6 | fontBase: '"Heebo", sans-serif',
7 | brandUrl: 'https://github.com/argoproj/argo-ui',
8 | brandImage: 'https://raw.githubusercontent.com/cncf/artwork/master/projects/argo/horizontal/color/argo-horizontal-color.png',
9 | });
10 |
--------------------------------------------------------------------------------
/v2/.storybook/images/argo-favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/argoproj/argo-ui/5cf36101733ce43eed57242a12389f2a7e40bd2b/v2/.storybook/images/argo-favicon.png
--------------------------------------------------------------------------------
/v2/.storybook/images/argo-icon-color-square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/argoproj/argo-ui/5cf36101733ce43eed57242a12389f2a7e40bd2b/v2/.storybook/images/argo-icon-color-square.png
--------------------------------------------------------------------------------
/v2/.storybook/main.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | stories: ['../components/**/*.stories.tsx'],
5 | addons: ['@storybook/addon-essentials'],
6 | webpackFinal: async (config, {configType}) => {
7 | config.module.rules.push({
8 | test: /\.scss$/,
9 | use: ['style-loader', 'css-loader', 'sass-loader'],
10 | include: path.resolve(__dirname, '../'),
11 | });
12 | return config;
13 | },
14 | managerHead: (head) => `
15 | ${head}
16 |
17 | `,
18 | };
19 |
--------------------------------------------------------------------------------
/v2/.storybook/manager.js:
--------------------------------------------------------------------------------
1 | import {addons} from '@storybook/addons';
2 | import argo from './Argo';
3 |
4 | addons.setConfig({
5 | theme: argo,
6 | });
7 |
--------------------------------------------------------------------------------
/v2/.storybook/preview.js:
--------------------------------------------------------------------------------
1 | import argo from './Argo';
2 |
3 | export const parameters = {
4 | backgrounds: {
5 | default: 'light',
6 | values: [
7 | {
8 | name: 'light',
9 | value: '#dee6eb',
10 | },
11 | {
12 | name: 'dark',
13 | value: '#0e0e14',
14 | },
15 | ],
16 | },
17 | docs: {
18 | theme: argo,
19 | },
20 | };
21 |
--------------------------------------------------------------------------------
/v2/README.md:
--------------------------------------------------------------------------------
1 | # Argo UI v2 Components
2 |
3 | Version 2 components are all based on React Hooks, and contain inline documentation.
4 |
--------------------------------------------------------------------------------
/v2/components/alert/alert.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/colors.scss';
2 |
3 | .alert {
4 | font-family: 'Heebo', sans-serif;
5 | height: 2em;
6 | line-height: 2em;
7 | padding: 5px 10px;
8 | border-radius: 5px;
9 | color: white;
10 | &--error {
11 | background-color: $coral;
12 | }
13 |
14 | &--dark#{&}--error {
15 | background-color: $dirt;
16 | }
17 |
18 | &--success {
19 | background-color: $lime;
20 | }
21 |
22 | &--dark#{&--success} {
23 | background-color: $leaf;
24 | }
25 |
26 | &--warning {
27 | background-color: $canary;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/v2/components/alert/alert.stories.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Alert} from './alert';
3 |
4 | export default {
5 | title: 'Components/Alert',
6 | component: Alert,
7 | argTypes: {
8 | text: {control: {type: 'text'}},
9 | style: {control: {disable: true}},
10 | },
11 | };
12 |
13 | export const Primary = (args: any) => {
14 | return
17 |
19 | );
20 |
21 | Primary.args = {
22 | placeholder: 'Type something here',
23 | };
24 |
--------------------------------------------------------------------------------
/v2/components/box/box.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/colors.scss';
2 |
3 | .argo-box {
4 | border: 1px solid $argo-color-gray-4;
5 | border-radius: 5px;
6 | padding: 20px;
7 | background-color: white;
8 | height: max-content;
9 | box-sizing: border-box;
10 |
11 | &__title {
12 | font-size: 18px;
13 | font-weight: 600;
14 | margin-bottom: 0.5em;
15 | }
16 |
17 | &--dark {
18 | background-color: $space;
19 | border-color: $silver-lining;
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/v2/components/box/box.stories.tsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/argoproj/argo-ui/5cf36101733ce43eed57242a12389f2a7e40bd2b/v2/components/box/box.stories.tsx
--------------------------------------------------------------------------------
/v2/components/box/box.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import {ThemeDiv} from '../theme-div/theme-div';
4 |
5 | import './box.scss';
6 |
7 | export const Box = (props: {children: React.ReactNode}) => {
8 | return {
23 | e.stopPropagation();
24 | syncValue(!value);
25 | }}
26 | style={props.style}>
27 |
28 |
29 | );
30 | };
31 |
--------------------------------------------------------------------------------
/v2/components/effect-div/effect-div.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/colors.scss';
2 |
3 | .effect-div {
4 | position: relative;
5 | &__background {
6 | width: 100%;
7 | height: 100%;
8 | position: absolute;
9 | box-sizing: border-box;
10 | top: 0;
11 | left: 0;
12 | right: 0;
13 | bottom: 0;
14 | background-size: cover;
15 | will-change: transform;
16 | transition: transform 0.1s ease-out;
17 | pointer-events: none;
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/v2/components/effect-div/effect-div.stories.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Text from '../text/text';
3 | import {EffectDiv} from './effect-div';
4 |
5 | export default {
6 | component: EffectDiv,
7 | title: 'Components/EffectDiv',
8 | };
9 |
10 | export const Primary = (args: any) => {
11 | return (
12 | {props.children}
28 |
6 | {props.children}
7 |
8 | );
9 | };
10 |
--------------------------------------------------------------------------------
/v2/components/header/header.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/colors.scss';
2 |
3 | .header {
4 | display: flex;
5 | background: $slate;
6 | color: white;
7 | align-items: center;
8 | padding: 10px 0;
9 | font-family: 'Heebo', sans-serif;
10 |
11 | &__brand {
12 | color: $shine;
13 | display: flex;
14 | align-items: center;
15 | text-decoration: none;
16 | -webkit-user-select: none;
17 | -moz-user-select: none;
18 | -ms-user-select: none;
19 | user-select: none;
20 | }
21 |
22 | &__welcome {
23 | position: absolute;
24 | transform-origin: left;
25 | display: block;
26 | overflow: hidden;
27 | white-space: nowrap;
28 | transition: transform 1s ease 1s, opacity 1s ease;
29 | }
30 |
31 | &__title {
32 | position: absolute;
33 | transition: transform 500ms ease 750ms;
34 | display: flex;
35 | flex-wrap: nowrap;
36 | flex-grow: 1;
37 | align-items: center;
38 | white-space: nowrap;
39 | }
40 |
41 | h1 {
42 | position: relative;
43 | font-size: 22px;
44 | font-weight: 400;
45 | margin: 0;
46 | display: flex;
47 | align-items: center;
48 | }
49 |
50 | h2 {
51 | font-size: 18px;
52 | color: $sherbert;
53 | margin: 0;
54 | margin-left: 10px;
55 | flex-grow: 1;
56 | white-space: nowrap;
57 | }
58 |
59 | &__info {
60 | margin-left: auto;
61 | display: flex;
62 | align-items: center;
63 | }
64 | &__version {
65 | color: $shine;
66 | margin: 0 15px;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/v2/components/header/header.stories.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Brand, Header} from './header';
3 |
4 | export default {
5 | component: Header,
6 | title: 'Components/Header',
7 | argTypes: {
8 | text: {control: {type: 'text'}},
9 | style: {control: {disable: true}},
10 | },
11 | };
12 |
13 | export const Primary = (args: any) => {
14 | return (
15 | {args.text}
17 |
;
6 |
7 | interface BrandProps {
8 | path?: string;
9 | welcomeText?: string;
10 | brandName?: string;
11 | logo?: React.ReactNode;
12 | }
13 | /**
14 | * Brand Hero designed for display in a header. Includes the Argo Logo and a welcome message that fades after page load
15 | */
16 | export const Brand = (props: BrandProps) => {
17 | const [loading, setLoading] = React.useState(true);
18 | React.useEffect(() => {
19 | setLoading(true);
20 | setTimeout(() => setLoading(false), 500);
21 | }, [props.welcomeText]);
22 |
23 | const showWelcome = loading && !props.path;
24 | const welcomeText = props.welcomeText || 'Welcome to';
25 | return (
26 |
27 | {props.logo ? props.logo :
29 |
36 |
37 | );
38 | };
39 |
40 | interface HeaderProps {
41 | children: React.ReactNode;
42 | style?: React.CSSProperties;
43 | }
44 |
45 | /**
46 | * Header banner in dark indigo color, designed for display at the top of a page. Wraps its children in indigo banner.
47 | */
48 | export const Header = (props: HeaderProps) => {
49 | return (
50 |
29 |
30 | {welcomeText}
31 |
32 |
33 | {props.brandName || 'Argo'} {props.path && / {props.path}
}
34 |
35 |
36 | / {props.path}
} 34 |
19 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/v2/components/info-item/info-item.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/colors.scss';
2 |
3 | .info-item {
4 | background-color: $argo-color-gray-4;
5 | border-radius: 3px;
6 | border: 1px solid $argo-color-gray-5;
7 | padding: 5px 7px;
8 | margin-right: 5px;
9 | color: $argo-color-gray-8;
10 | display: flex;
11 | align-items: center;
12 | min-width: 0;
13 |
14 | &--lightweight {
15 | border: none;
16 | background: none;
17 | font-weight: 500;
18 | padding-left: 0;
19 | padding-right: 0;
20 | }
21 |
22 | &--dark {
23 | background-color: $fog;
24 | border: 1px solid $silver-lining;
25 | color: $dull-shine;
26 | }
27 |
28 | &--colored {
29 | background-color: $sherbert;
30 | border: 1px solid $sherbert;
31 | color: white;
32 | }
33 |
34 | &--dark#{&}--colored {
35 | background-color: $spray-tan;
36 | border: 1px solid $sherbert;
37 | color: white;
38 | }
39 |
40 | &--canary {
41 | background-color: $canary;
42 | border: 1px solid $canary;
43 | color: $space;
44 | }
45 |
46 | &--bluegreen {
47 | background-color: $sea;
48 | border: 1px solid $sea;
49 | color: white;
50 | }
51 |
52 | &--monospace {
53 | font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono',
54 | 'Droid Sans Mono', 'Courier New', monospace;
55 | font-size: 14px;
56 | }
57 |
58 | &--row {
59 | display: flex;
60 | align-items: center;
61 | flex-grow: 1;
62 | label {
63 | margin-right: auto;
64 | padding-right: 5px;
65 | }
66 | .info-item {
67 | margin: 0.25em 0;
68 | margin-left: 5px;
69 | }
70 |
71 | &__container {
72 | margin-left: auto;
73 | display: flex;
74 | min-width: 0;
75 | padding-left: 25px;
76 | flex-wrap: wrap;
77 | justify-content: flex-end;
78 | }
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/v2/components/info-item/info-item.stories.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {InfoItem} from './info-item';
3 |
4 | export default {
5 | component: InfoItem,
6 | title: 'Components/InfoItem',
7 | argTypes: {
8 | style: {control: {disable: true}},
9 | },
10 | args: {
11 | content: 'Hello world',
12 | },
13 | };
14 |
15 | export const Primary = (args: any) => {
16 | return (
17 |
18 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/v2/components/input/input.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/colors.scss';
2 |
3 | .input-container {
4 | min-width: 0;
5 | box-sizing: border-box;
6 | .input {
7 | box-sizing: border-box;
8 | width: 100%;
9 | appearance: none;
10 | border-radius: 5px;
11 | padding: 7px 10px;
12 | background-color: $argo-color-gray-3;
13 | border: 1px solid $argo-color-gray-5;
14 | color: $argo-color-gray-7;
15 | min-width: 0;
16 | font-size: 14px;
17 | line-height: 1.5em;
18 | }
19 |
20 | input::placeholder {
21 | color: $argo-color-gray-6;
22 | }
23 |
24 | &--dark {
25 | .input {
26 | background-color: $space;
27 | border: 1px solid $silver-lining;
28 | color: $shine;
29 | }
30 |
31 | input::placeholder {
32 | color: $dull-shine;
33 | }
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/v2/components/input/input.stories.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import Text from '../text/text';
3 | import {Input, useInput} from './input';
4 |
5 | export default {
6 | title: 'Components/Input',
7 | component: Input,
8 | argTypes: {
9 | style: {control: {disable: true}},
10 | innerref: {control: {disable: true}},
11 | placeholder: {control: {type: 'text'}},
12 | onChange: {action: 'inputChanged'},
13 | },
14 | };
15 |
16 | export const Primary = (args: any) => {
17 | const [field, , fieldProps] = useInput('');
18 | const origOnChange = fieldProps.onChange;
19 | fieldProps.onChange = (val) => {
20 | origOnChange(val);
21 | args.onChange(val);
22 | };
23 | return (
24 |
26 |
27 |
28 | {field && field !== '' &&
13 |
16 |
17 | );
18 | };
19 |
20 | Primary.args = {
21 | items: ['A', 'B', 'C'],
22 | };
23 |
--------------------------------------------------------------------------------
/v2/components/row/row.scss:
--------------------------------------------------------------------------------
1 | .argo-row {
2 | display: flex;
3 | width: 100%;
4 | margin-bottom: 1.5em;
5 | justify-content: center;
6 |
7 | .argo-box {
8 | height: auto;
9 | width: 400px;
10 | margin-right: 15px;
11 |
12 | &:last-child {
13 | margin-right: 0;
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/v2/components/row/row.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import {ThemeDiv} from '../theme-div/theme-div';
4 |
5 | import './row.scss';
6 |
7 | export const CenteredRow = (props: {children: React.ReactNode}) => {theme === Theme.Dark ? 'test test--dark' : 'test'}
28 |
37 | {props.children}
38 |
39 | );
40 | };
41 |
42 | export default ThemeDiv;
43 |
--------------------------------------------------------------------------------
/v2/components/theme-toggle/theme-toggle.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {Theme, ThemeContext} from '../../shared/context/theme';
3 | import {ActionButton} from '../action-button/action-button';
4 |
5 | export const ThemeToggle = () => {
6 | const dmCtx = React.useContext(ThemeContext);
7 | const isDark = dmCtx.theme === Theme.Dark;
8 | const icon = isDark ? 'fa-sun' : 'fa-moon';
9 | return
13 | {args.content}}>
14 | Hover over me!
15 |
16 |
17 | );
18 | };
19 |
20 | Primary.args = {
21 | content: 'Hello there!',
22 | };
23 |
--------------------------------------------------------------------------------
/v2/components/tooltip/tooltip.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {ThemeDiv} from '../theme-div/theme-div';
3 |
4 | import './tooltip.scss';
5 |
6 | export const useHover = (): [React.MutableRefObject
37 |
38 | {props.content}
39 |
40 |
42 | );
43 | };
44 |
--------------------------------------------------------------------------------
/v2/components/wait-for/loading-bar.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/colors.scss';
2 |
3 | .loading-bar {
4 | background-color: $argo-color-gray-4;
5 | border-radius: 3px;
6 | height: 7px;
7 | overflow: hidden;
8 | width: 350px;
9 | will-change: opacity;
10 | &--dark {
11 | background-color: $slate;
12 | }
13 | &__fill {
14 | transform-origin: left;
15 | background-color: $sherbert;
16 | height: 100%;
17 | width: 1px;
18 |
19 | &--loaded {
20 | transform: scaleX(350);
21 | }
22 | }
23 |
24 | &--loaded {
25 | opacity: 0;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/v2/components/wait-for/spinner.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/colors.scss';
2 |
3 | .spinner {
4 | color: $slate;
5 | font-size: 25px;
6 |
7 | &--dark {
8 | color: white;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/v2/components/wait-for/wait-for.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import {ThemeDiv} from '../theme-div/theme-div';
3 | import './loading-bar.scss';
4 | import './spinner.scss';
5 |
6 | export const Spinner = () => (
7 | {props.children}
41 |