Add guide for new releases of Redback UI; add general info/links abou…

…t usage (#178)

docs/web-mobile-app-dev/frontend/redback-ui.mdx

@@ -0,0 +1,83 @@
+---
+sidebar_position: 4
+sidebar_title: Redback UI
+---
+
+
+import { ProcessWizard, ProcessWizardStep } from "../../../src/components/ProcessWizard";
+
+# Redback UI
+
+> **Document Creation:** 7 May, 2024. **Last Edited:** 29 September, 2024. **Authors:** Leesa Ward.
+
+## Using Redback UI
+
+:::info
+
+You can find the lastest version of Redback UI on [NPM](https://www.npmjs.com/package/@redbackops/redback-ui).
+
+:::
+
+Installation instructions (for projects not already using it) and overall guidance on how to get started can be found in the [repository README](https://github.com/Redback-Operations/redback-ui/blob/main/README.md). (Note: This is the same as what is shown on the NPM page - NPM automatically uses the README file from the latest release.)
+
+Please visit the [Redback UI Storybook](https://redback-operations.github.io/redback-ui/) for documentation of the individual components.
+
+## Creating a new release
+
+When a new feature, bug fix, enhancement, etc. is merged into the `main` branch, or a collection of them are merged and ready to be released at the same time, a new release must be created and published for the changes to be available to other projects.
+
+:::warning
+
+This process must be performed by someone with write access to the GitHub repository.
+
+:::
+
+<ProcessWizard>
+    <ProcessWizardStep title="Increment version">
+        Create a branch and update the version number in the `package.json` file.
+        ![Version in package.json](./img/release/step-1-increment-version.png)
+
+        Raise a PR to merge the changes into the `main` branch, and when it is approved and merged, you can proceed to the next step.
+    </ProcessWizardStep>
+    <ProcessWizardStep title="Begin in GitHub">
+        From the main page of the GitHub repo, click on **Tags**.
+        ![Tags link](./img/release/step-2-go-to-tags.png)
+
+        Click on the **Releases** tab (top left) and then the **Draft a new release** button (top right).
+        ![Releases tab](./img/release/step-3a-go-to-releases.png)
+        ![New release button](./img/release/step-3b-draft-new-release.png)
+    </ProcessWizardStep>
+    <ProcessWizardStep title="Tag and title">
+        1. Click the **tag** dropdown (top left, under the Releases tab)
+        2. Enter your version number from step 1 as the new tag
+        3. Click **Create new tag: vX.X.X on publish**.
+        4. Enter a title for the release (usually the version number, the same as the tag).
+        ![Create tag](./img/release/step-4-create-tag.png)
+    </ProcessWizardStep>
+    <ProcessWizardStep title="Add release notes">
+        Click the **Generate Release Notes** button (top right) to automatically create release notes based on the commits since the last release.
+        ![Generate release notes](./img/release/step-5a-generate-release-notes.png)
+
+        Switch from the Write tab to the **Review** tab to view the release notes to make sure they are accurate and complete.
+        ![Preview release notes](./img/release/step-5b-preview-release-notes.png)
+    </ProcessWizardStep>
+    <ProcessWizardStep title="Publish release">
+        At the bottom of the page, click the **Publish release** button.
+        ![Publish release](./img/release/step-6-publish-release.png)
+    </ProcessWizardStep>
+    <ProcessWizardStep title="Monitor release action">
+        Go to the **Actions** tab to monitor the automatic release action. The action you are looking for is called **Publish component library to NPM**.
+        ![Check release action](./img/release/step-7a-check-release-action.png)
+
+        If anything goes wrong with the release action, you can click on the failed job to see the details to help you troubleshoot.
+        ![Check release action](./img/release/step-7b-release-action-details.png)
+    </ProcessWizardStep>
+    <ProcessWizardStep title="Check NPM">
+        After the release action in GitHub has completed successfully, check the <a href="https://www.npmjs.com/package/@redbackops/redback-ui">Redback UI NPM page</a> to make sure the new version published as expected.
+        In particular, check that the **Version** and **Last publish** fields are as you expect.
+        ![Check NPM page](./img/release/step-8-check-npm.png)
+    </ProcessWizardStep>
+</ProcessWizard>
+
+
+

src/components/ProcessWizard/ProcessWizard.module.css

@@ -0,0 +1,125 @@
+.processWizard {
+    margin: 2rem 0;
+}
+
+.processWizardContent {
+    box-shadow: 0 0 0.25rem 0 var(--ifm-color-gray-400);
+    padding: 2rem;
+}
+
+.processWizardNavButtons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 2rem;
+}
+
+.processWizardNavButtons button {
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    font-size: 0.9rem;
+    color: white;
+    background-color: var(--ifm-color-primary);
+    border: none;
+    cursor: pointer;
+    font-family: var(--ifm-font-family-base);
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+}
+
+.processWizardNavButtons button span {
+    font-size: 1.4em;
+    font-weight: bold;
+    display: inline-block;
+    line-height: 1;
+    transform: translateY(-0.1em);
+}
+
+.processWizardNavButtons button:hover,
+.processWizardNavButtons button:focus,
+.processWizardNavButtons button:active {
+    background-color: var(--ifm-color-primary-dark);
+    text-decoration-color: currentColor;
+}
+
+.processWizardNavButtons button:only-child {
+    margin-left: auto;
+}
+
+.wizardStep {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+}
+
+.progressBar {
+    height: 0.25rem;
+    background-color: var(--ifm-color-primary);
+    transform: translateY(0.825rem);
+    margin-left: 7.14%;
+}
+
+.progressBarItems {
+    counter-reset: progress-items-counter;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    position: relative;
+    z-index: 10;
+    padding-left: 0;
+}
+
+.progressBarItem {
+    list-style: none;
+    counter-increment: progress-items-counter;
+    color: var(--ifm-color-gray-600);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: center;
+    font-size: 0.8em;
+    line-height: 1.2;
+    font-weight: 600;
+    margin-top: 0 !important;
+}
+
+.progressBarItem::before {
+    content: counter(progress-items-counter);
+    background-color: var(--ifm-color-gray-600);
+    margin-bottom: 0.25rem;
+    color: white;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.progressBarItem[data-current="true"],
+.progressBarItem[data-passed="true"] {
+    color: var(--ifm-color-primary);
+}
+
+.progressBarItem[data-current="true"]::before,
+.progressBarItem[data-passed="true"]::before {
+    background: var(--ifm-color-primary);
+}
+
+.processWizardStep {
+}
+
+.processWizardStep img {
+    max-height: 400px;
+    max-width: 540px;
+    width: auto;
+    display: block;
+    margin: 1rem auto;
+    border: 1px solid var(--ifm-color-gray-400);
+}

src/components/ProcessWizard/index.js

@@ -0,0 +1,58 @@
+import React, { useState, useMemo } from 'react';
+import styles from './ProcessWizard.module.css';
+import MDXContent from '@theme/MDXContent';
+
+export function ProcessWizard({ children }) {
+    const [currentStep, setCurrentStep] = useState(0);
+    const steps = useMemo(() => {
+        return children.map(child => child.props.title);
+    }, [children]);
+
+    return (
+        <div className={styles.processWizard}>
+            <ProcessWizardProgressBar steps={steps} currentStep={currentStep} />
+            <div className={styles.processWizardContent}>
+                {React.cloneElement(children[currentStep], { stepNo: currentStep + 1 })}
+                <div className={styles.processWizardNavButtons}>
+                    {currentStep > 0 &&
+                        <button onClick={() => setCurrentStep(currentStep - 1)}>
+                            <span>&larr; </span>
+                            Previous step
+                        </button>
+                    }
+                    {currentStep < children.length - 1 &&
+                        <button onClick={() => setCurrentStep(currentStep + 1)}>
+                            Next step
+                            <span>&rarr;</span>
+                        </button>
+                    }
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export function ProcessWizardStep({ title, stepNo, children }) {
+
+    return (
+        <div className={styles.processWizardStep}>
+            <h3>Step {stepNo}. {title}</h3>
+            {children}
+        </div>
+    );
+}
+
+function ProcessWizardProgressBar({ steps, currentStep }) {
+    return (
+        <nav>
+            <div className={styles.progressBar} style={{ width: `${(currentStep / steps.length) * 100}%` }} />
+            <ol className={styles.progressBarItems}>
+                {steps.map((step, index) => (
+                    <li key={index} className={styles.progressBarItem} data-current={index === currentStep} data-passed={index < currentStep}>
+                        {step}
+                    </li>
+                ))}
+            </ol>
+        </nav>
+    );
+}