Skip to content

Commit 241596c

Browse files
rbreezerbreeze
authored
feat: New components from Argo Rollouts UI in src/v2 directory (argoproj#100)
* feat: New components from Argo Rollotus UI in src/v2 directory Signed-off-by: Remington Breeze <[email protected]>
1 parent 99bf860 commit 241596c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+14680
-4
lines changed

‎.github/workflows/build-docs.yml

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
name: Build Storybook Docs
2+
3+
on:
4+
push:
5+
6+
jobs:
7+
build-docs:
8+
runs-on: ubuntu-latest
9+
steps:
10+
- uses: actions/checkout@v2
11+
- uses: actions/setup-node@v1
12+
with:
13+
node-version: 12
14+
- run: yarn --cwd v2 install
15+
- run: yarn --cwd v2 build-storybook-docs

‎.github/workflows/npm-publish.yml

+2-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ jobs:
1717
- uses: actions/setup-node@v1
1818
with:
1919
node-version: 12
20-
registry-url: https://npm.pkg.github.com/
21-
- run: npm publish
20+
- run: cd v2 && npm publish
2221
env:
23-
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
22+
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

‎.gitignore

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,7 @@ node_modules
22
dist
33
bundle
44
.vscode
5-
coverage/
5+
coverage/
6+
.DS_STORE
7+
docs/
8+
v2/storybook-static/

‎.npmignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
v2
2+
node_modules

‎v2/.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"plugins": [["@babel/plugin-proposal-private-property-in-object", {"loose": true}]]
3+
}

‎v2/.prettierrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"bracketSpacing": false,
3+
"jsxSingleQuote": true,
4+
"printWidth": 180,
5+
"singleQuote": true,
6+
"tabWidth": 4,
7+
"jsxBracketSameLine": true,
8+
"quoteProps": "consistent"
9+
}

‎v2/.storybook/Argo.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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+
});

‎v2/.storybook/images/argo-favicon.png

2.63 KB
Loading

‎v2/.storybook/images/argo-icon-color-square.png

99.9 KB
Loading

‎v2/.storybook/main.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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+
<link rel="icon" href="/argo-favicon.png" />
17+
`,
18+
};

‎v2/.storybook/manager.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {addons} from '@storybook/addons';
2+
import argo from './Argo';
3+
4+
addons.setConfig({
5+
theme: argo,
6+
});

‎v2/.storybook/preview.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
};

‎v2/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Argo UI v2 Components
2+
3+
Version 2 components are all based on React Hooks, and contain inline documentation.

‎v2/components/action-button/action-button.scss

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
@import '../../styles/colors.scss';
2+
3+
.action-button {
4+
font-family: 'Heebo', sans-serif;
5+
padding: 10px 14px;
6+
color: white;
7+
flex-shrink: 0;
8+
flex-wrap: nowrap;
9+
cursor: pointer;
10+
margin-right: 7px;
11+
display: flex;
12+
box-sizing: border-box;
13+
align-items: center;
14+
font-weight: 500;
15+
justify-content: center;
16+
17+
&--dark {
18+
color: $shine;
19+
&:hover {
20+
color: white;
21+
}
22+
}
23+
24+
@mixin dark-background {
25+
border: 1px solid $silver-lining;
26+
background-color: $fog;
27+
color: $silver-lining;
28+
}
29+
30+
&--transparent {
31+
padding: 10px 5px;
32+
color: $argo-color-gray-8;
33+
34+
&:hover {
35+
color: $sherbert;
36+
}
37+
}
38+
39+
&--transparent > &__background {
40+
background: none !important;
41+
border: none !important;
42+
}
43+
44+
&--dark > &__background {
45+
@include dark-background;
46+
}
47+
48+
&__background {
49+
border-radius: 20px;
50+
border: 1px solid $argo-color-gray-6;
51+
background-color: $argo-color-gray-6;
52+
color: $argo-color-gray-6;
53+
54+
&--dark {
55+
@include dark-background;
56+
}
57+
}
58+
59+
&:hover > &__background,
60+
&--selected > &__background {
61+
background-color: $sherbert;
62+
border-color: $sherbert;
63+
color: $sherbert;
64+
transform: scale(1.02);
65+
}
66+
67+
&--dark:hover > &__background,
68+
&--selected#{&}--dark > &__background {
69+
color: $sherbert;
70+
background-color: $spray-tan;
71+
border-color: $sherbert;
72+
}
73+
74+
&--disabled {
75+
color: $argo-color-gray-4;
76+
cursor: not-allowed;
77+
}
78+
79+
&--disabled:hover > &__background {
80+
background-color: $argo-color-gray-6;
81+
border-color: $argo-color-gray-6;
82+
}
83+
84+
&--disabled#{&}--dark {
85+
color: $dull-shine;
86+
&:hover {
87+
color: $dull-shine;
88+
}
89+
}
90+
91+
&--disabled#{&}--dark:hover > &__background {
92+
border-color: $silver-lining;
93+
background-color: $fog;
94+
}
95+
}

‎v2/components/action-button/action-button.stories.tsx

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import {faExclamationCircle, faHandPointUp} from '@fortawesome/free-solid-svg-icons';
2+
import * as React from 'react';
3+
import Text from '../text/text';
4+
5+
import {ActionButton} from './action-button';
6+
7+
const IconOptions = {faHandPointUp, faExclamationCircle};
8+
9+
export default {
10+
title: 'Components/ActionButton',
11+
component: ActionButton,
12+
argTypes: {
13+
sampleAction: {
14+
name: 'Sample Action',
15+
description: 'A set of sample actions to demo the Action Button. Not available for real component',
16+
control: {
17+
type: 'radio',
18+
options: ['Say hello', 'Surprise'],
19+
},
20+
},
21+
action: {control: {disable: true}, description: 'Function that is called when button is clicked', action: 'clicked'},
22+
style: {control: {disable: true}},
23+
icon: {
24+
name: 'Sample Icon',
25+
description: 'A set of sample icons to choose from. For real component, use any FontAwesome icon',
26+
options: Object.keys(IconOptions),
27+
mapping: IconOptions,
28+
control: {
29+
type: 'select',
30+
labels: {
31+
faHandPointUp: 'Pointer',
32+
faExclamationCircle: 'Error',
33+
},
34+
},
35+
},
36+
theme: {description: 'Takes precidence over dark boolean switch'},
37+
dark: {description: 'Convenience flag to make button appear dark without special Theme logic'},
38+
tooltip: {control: {type: 'text'}},
39+
short: {description: 'Displays only the icon (hides the label). Does nothing if icon is not specified'},
40+
indicateLoading: {description: 'Displays a spinner for a brief period on click, but only if the icon prop is set'},
41+
indicateSuccess: {description: 'Displays a checkmark after the specified action is complete, but only if the icon prop is set'},
42+
},
43+
};
44+
45+
const Template = (args: any) => {
46+
const [message, setMessage] = React.useState('');
47+
const clickAction = args.action;
48+
49+
const tempSetMessage = (text: string) => {
50+
clickAction();
51+
setMessage(text);
52+
setTimeout(() => {
53+
setMessage('');
54+
}, 1000);
55+
};
56+
57+
const SampleActions: {[key: string]: () => void} = {
58+
'Say hello': () => tempSetMessage('Hello!'),
59+
'Surprise': () => tempSetMessage('Boo!'),
60+
};
61+
args.action = SampleActions[args.sampleAction];
62+
if (args.tooltip && args.tooltip !== '') {
63+
args.tooltip = <Text>{args.tooltip}</Text>;
64+
}
65+
66+
return (
67+
<React.Fragment>
68+
<div style={{display: 'flex'}}>
69+
<ActionButton {...args} />
70+
</div>
71+
{message !== '' && (
72+
<div style={{marginTop: '1em'}}>
73+
<Text dark={args.dark}>{message}</Text>
74+
</div>
75+
)}
76+
</React.Fragment>
77+
);
78+
};
79+
80+
export const Primary = Template.bind({});
81+
82+
Primary.args = {
83+
label: 'Click me!',
84+
sampleAction: 'Say hello',
85+
};

0 commit comments

Comments
 (0)