feat: New components from Argo Rollouts UI in src/v2 directory (argop…

…roj#100)

* feat: New components from Argo Rollotus UI in src/v2 directory

Signed-off-by: Remington Breeze <[email protected]>

.github/workflows/build-docs.yml

@@ -0,0 +1,15 @@
+name: Build Storybook Docs
+
+on:
+  push:
+
+jobs:
+  build-docs:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: yarn --cwd v2 install
+      - run: yarn --cwd v2 build-storybook-docs

.github/workflows/npm-publish.yml

@@ -17,7 +17,6 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: 12
-          registry-url: https://npm.pkg.github.com/
-      - run: npm publish
+      - run: cd v2 && npm publish
         env:
-          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -2,4 +2,7 @@ node_modules
 dist
 bundle
 .vscode
-coverage/
+coverage/
+.DS_STORE
+docs/
+v2/storybook-static/

.npmignore

@@ -0,0 +1,2 @@
+v2
+node_modules

v2/.babelrc

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

v2/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "bracketSpacing": false,
+  "jsxSingleQuote": true,
+  "printWidth": 180,
+  "singleQuote": true,
+  "tabWidth": 4,
+  "jsxBracketSameLine": true,
+  "quoteProps": "consistent"
+}

v2/.storybook/Argo.js

@@ -0,0 +1,9 @@
+import {create} from '@storybook/theming';
+
+export default create({
+    base: 'light',
+    brandTitle: 'Argo UX',
+    fontBase: '"Heebo", sans-serif',
+    brandUrl: 'https://github.com/argoproj/argo-ui',
+    brandImage: 'https://raw.githubusercontent.com/cncf/artwork/master/projects/argo/horizontal/color/argo-horizontal-color.png',
+});

v2/.storybook/main.js

@@ -0,0 +1,18 @@
+const path = require('path');
+
+module.exports = {
+    stories: ['../components/**/*.stories.tsx'],
+    addons: ['@storybook/addon-essentials'],
+    webpackFinal: async (config, {configType}) => {
+        config.module.rules.push({
+            test: /\.scss$/,
+            use: ['style-loader', 'css-loader', 'sass-loader'],
+            include: path.resolve(__dirname, '../'),
+        });
+        return config;
+    },
+    managerHead: (head) => `
+        ${head}
+        <link rel="icon" href="/argo-favicon.png" />
+    `,
+};

v2/.storybook/manager.js

@@ -0,0 +1,6 @@
+import {addons} from '@storybook/addons';
+import argo from './Argo';
+
+addons.setConfig({
+    theme: argo,
+});

v2/.storybook/preview.js

@@ -0,0 +1,20 @@
+import argo from './Argo';
+
+export const parameters = {
+    backgrounds: {
+        default: 'light',
+        values: [
+            {
+                name: 'light',
+                value: '#dee6eb',
+            },
+            {
+                name: 'dark',
+                value: '#0e0e14',
+            },
+        ],
+    },
+    docs: {
+        theme: argo,
+    },
+};

v2/README.md

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

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

@@ -0,0 +1,95 @@
+@import '../../styles/colors.scss';
+
+.action-button {
+    font-family: 'Heebo', sans-serif;
+    padding: 10px 14px;
+    color: white;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+    cursor: pointer;
+    margin-right: 7px;
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    font-weight: 500;
+    justify-content: center;
+
+    &--dark {
+        color: $shine;
+        &:hover {
+            color: white;
+        }
+    }
+
+    @mixin dark-background {
+        border: 1px solid $silver-lining;
+        background-color: $fog;
+        color: $silver-lining;
+    }
+
+    &--transparent {
+        padding: 10px 5px;
+        color: $argo-color-gray-8;
+
+        &:hover {
+            color: $sherbert;
+        }
+    }
+
+    &--transparent > &__background {
+        background: none !important;
+        border: none !important;
+    }
+
+    &--dark > &__background {
+        @include dark-background;
+    }
+
+    &__background {
+        border-radius: 20px;
+        border: 1px solid $argo-color-gray-6;
+        background-color: $argo-color-gray-6;
+        color: $argo-color-gray-6;
+
+        &--dark {
+            @include dark-background;
+        }
+    }
+
+    &:hover > &__background,
+    &--selected > &__background {
+        background-color: $sherbert;
+        border-color: $sherbert;
+        color: $sherbert;
+        transform: scale(1.02);
+    }
+
+    &--dark:hover > &__background,
+    &--selected#{&}--dark > &__background {
+        color: $sherbert;
+        background-color: $spray-tan;
+        border-color: $sherbert;
+    }
+
+    &--disabled {
+        color: $argo-color-gray-4;
+        cursor: not-allowed;
+    }
+
+    &--disabled:hover > &__background {
+        background-color: $argo-color-gray-6;
+        border-color: $argo-color-gray-6;
+    }
+
+    &--disabled#{&}--dark {
+        color: $dull-shine;
+        &:hover {
+            color: $dull-shine;
+        }
+    }
+
+    &--disabled#{&}--dark:hover > &__background {
+        border-color: $silver-lining;
+        background-color: $fog;
+    }
+}

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

@@ -0,0 +1,85 @@
+import {faExclamationCircle, faHandPointUp} from '@fortawesome/free-solid-svg-icons';
+import * as React from 'react';
+import Text from '../text/text';
+
+import {ActionButton} from './action-button';
+
+const IconOptions = {faHandPointUp, faExclamationCircle};
+
+export default {
+    title: 'Components/ActionButton',
+    component: ActionButton,
+    argTypes: {
+        sampleAction: {
+            name: 'Sample Action',
+            description: 'A set of sample actions to demo the Action Button. Not available for real component',
+            control: {
+                type: 'radio',
+                options: ['Say hello', 'Surprise'],
+            },
+        },
+        action: {control: {disable: true}, description: 'Function that is called when button is clicked', action: 'clicked'},
+        style: {control: {disable: true}},
+        icon: {
+            name: 'Sample Icon',
+            description: 'A set of sample icons to choose from. For real component, use any FontAwesome icon',
+            options: Object.keys(IconOptions),
+            mapping: IconOptions,
+            control: {
+                type: 'select',
+                labels: {
+                    faHandPointUp: 'Pointer',
+                    faExclamationCircle: 'Error',
+                },
+            },
+        },
+        theme: {description: 'Takes precidence over dark boolean switch'},
+        dark: {description: 'Convenience flag to make button appear dark without special Theme logic'},
+        tooltip: {control: {type: 'text'}},
+        short: {description: 'Displays only the icon (hides the label). Does nothing if icon is not specified'},
+        indicateLoading: {description: 'Displays a spinner for a brief period on click, but only if the icon prop is set'},
+        indicateSuccess: {description: 'Displays a checkmark after the specified action is complete, but only if the icon prop is set'},
+    },
+};
+
+const Template = (args: any) => {
+    const [message, setMessage] = React.useState('');
+    const clickAction = args.action;
+
+    const tempSetMessage = (text: string) => {
+        clickAction();
+        setMessage(text);
+        setTimeout(() => {
+            setMessage('');
+        }, 1000);
+    };
+
+    const SampleActions: {[key: string]: () => void} = {
+        'Say hello': () => tempSetMessage('Hello!'),
+        'Surprise': () => tempSetMessage('Boo!'),
+    };
+    args.action = SampleActions[args.sampleAction];
+    if (args.tooltip && args.tooltip !== '') {
+        args.tooltip = <Text>{args.tooltip}</Text>;
+    }
+
+    return (
+        <React.Fragment>
+            <div style={{display: 'flex'}}>
+                <ActionButton {...args} />
+            </div>
+            {message !== '' && (
+                <div style={{marginTop: '1em'}}>
+                    <Text dark={args.dark}>{message}</Text>
+                </div>
+            )}
+        </React.Fragment>
+    );
+};
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+    label: 'Click me!',
+    sampleAction: 'Say hello',
+};