@asantemedia-org/edwardsvacuum-design-system 1.6.28 → 1.6.30

package/README.md

@@ -1,124 +1,124 @@
-# EdwardsVacuum Design System
-
-## Overview
-
-The **EdwardsVacuum Design System** is a comprehensive design system built to streamline the development of consistent and reusable UI components for the EdwardsVacuum project. This project is built using Next.js, Storybook, and various supporting libraries and tools.
-
-## Project Structure
-
-The project is organized with the following key scripts and dependencies:
-
-- **Next.js** for server-side rendering and building the design system.
-- **Storybook** for developing and showcasing UI components in isolation.
-- **FontAwesome** for incorporating scalable vector icons and social logos.
-
-
-## Prerequisites
-
-Before running this project, ensure you have the following:
-
-1. **Node.js** installed.
-2. **Yarn** or **npm** as your package manager.
-
-## Installation
-
-To get started, clone the repository and install the required dependencies:
-
-```bash
-git clone <repository_url>
-cd edwardsvacuum-design-system
-yarn install
-```
-
-## Environment Setup
-
-This project requires an environment variable for FontAwesome to function correctly. The `FONTAWESOME_PACKAGE_TOKEN` is required for accessing FontAwesome Pro icons.
-
-### Setting Up the Token
-
-You can obtain the `FONTAWESOME_PACKAGE_TOKEN` by contacting [bernard@asantemedia.co.uk](mailto:bernard@asantemedia.co.uk).
-
-Once you have the token, set it in your environment:
-
-1. **Locally**:  
-   Add it to your terminal session:
-   ```bash
-   export FONTAWESOME_PACKAGE_TOKEN=your_token_here
-   ```
-
-Replace `your_token_here` with the actual token.
-
-## Scripts
-
-The following scripts are available in the project:
-
-- **Lint**:
-  ```bash
-  npm run lint
-  ```
-  Runs ESLint to analyze the code for potential errors.
-
-- **Storybook**:
-  ```bash
-  npm run storybook
-  ```
-  Starts the Storybook development server.
-
-- **Build Storybook**:
-  ```bash
-  npm run build-storybook
-  ```
-  Builds the Storybook static files.
-
-- **AEM Integration**:
-  - **Build AEM Dialogs**:
-    ```bash
-    npm run build-aem-dialogs
-    ```
-    Generates AEM component dialogs.
-
-  - **Copy Static AEM Files**:
-    ```bash
-    npm run copy-static-aem-files
-    ```
-    Copies the necessary static files for AEM integration.
-
-  - **Clean AEM**:
-    ```bash
-    npm run aem-clean
-    ```
-    Cleans the target location for AEM deployment.
-
-  - **Install AEM**:
-    ```bash
-    npm run aem-install
-    ```
-    Builds and copies AEM dialogs and static files.
-
-  - **Clean & Install AEM**:
-    ```bash
-    npm run aem-clean-install
-    ```
-    Cleans and installs AEM files in one command.
-
-- **Chromatic**:
-  ```bash
-  npm run chromatic
-  ```
-  Publishes Storybook to Chromatic for visual regression testing.
-
-## CI/CD Implementation
-
-The project is set up with a CI/CD pipeline that triggers deployments only on merges to the `development` branch. This ensures that changes are properly reviewed and tested before being deployed to production. If new dependencies are added, the project will require a manual deployment to update the dependencies in the develoment environment.
-
-## License
-
-This project is currently **UNLICENSED** and is intended for internal use only. Redistribution or use outside the intended context is prohibited.
-
-## Contribution
-
-Please follow the project's contribution guidelines when contributing to this repository. Ensure all changes are made in feature branches and are merged into the `development` branch via pull requests.
-
-## Contact
-
+# EdwardsVacuum Design System
+
+## Overview
+
+The **EdwardsVacuum Design System** is a comprehensive design system built to streamline the development of consistent and reusable UI components for the EdwardsVacuum project. This project is built using Next.js, Storybook, and various supporting libraries and tools.
+
+## Project Structure
+
+The project is organized with the following key scripts and dependencies:
+
+- **Next.js** for server-side rendering and building the design system.
+- **Storybook** for developing and showcasing UI components in isolation.
+- **FontAwesome** for incorporating scalable vector icons and social logos.
+
+
+## Prerequisites
+
+Before running this project, ensure you have the following:
+
+1. **Node.js** installed.
+2. **Yarn** or **npm** as your package manager.
+
+## Installation
+
+To get started, clone the repository and install the required dependencies:
+
+```bash
+git clone <repository_url>
+cd edwardsvacuum-design-system
+yarn install
+```
+
+## Environment Setup
+
+This project requires an environment variable for FontAwesome to function correctly. The `FONTAWESOME_PACKAGE_TOKEN` is required for accessing FontAwesome Pro icons.
+
+### Setting Up the Token
+
+You can obtain the `FONTAWESOME_PACKAGE_TOKEN` by contacting [bernard@asantemedia.co.uk](mailto:bernard@asantemedia.co.uk).
+
+Once you have the token, set it in your environment:
+
+1. **Locally**:  
+   Add it to your terminal session:
+   ```bash
+   export FONTAWESOME_PACKAGE_TOKEN=your_token_here
+   ```
+
+Replace `your_token_here` with the actual token.
+
+## Scripts
+
+The following scripts are available in the project:
+
+- **Lint**:
+  ```bash
+  npm run lint
+  ```
+  Runs ESLint to analyze the code for potential errors.
+
+- **Storybook**:
+  ```bash
+  npm run storybook
+  ```
+  Starts the Storybook development server.
+
+- **Build Storybook**:
+  ```bash
+  npm run build-storybook
+  ```
+  Builds the Storybook static files.
+
+- **AEM Integration**:
+  - **Build AEM Dialogs**:
+    ```bash
+    npm run build-aem-dialogs
+    ```
+    Generates AEM component dialogs.
+
+  - **Copy Static AEM Files**:
+    ```bash
+    npm run copy-static-aem-files
+    ```
+    Copies the necessary static files for AEM integration.
+
+  - **Clean AEM**:
+    ```bash
+    npm run aem-clean
+    ```
+    Cleans the target location for AEM deployment.
+
+  - **Install AEM**:
+    ```bash
+    npm run aem-install
+    ```
+    Builds and copies AEM dialogs and static files.
+
+  - **Clean & Install AEM**:
+    ```bash
+    npm run aem-clean-install
+    ```
+    Cleans and installs AEM files in one command.
+
+- **Chromatic**:
+  ```bash
+  npm run chromatic
+  ```
+  Publishes Storybook to Chromatic for visual regression testing.
+
+## CI/CD Implementation
+
+The project is set up with a CI/CD pipeline that triggers deployments only on merges to the `development` branch. This ensures that changes are properly reviewed and tested before being deployed to production. If new dependencies are added, the project will require a manual deployment to update the dependencies in the develoment environment.
+
+## License
+
+This project is currently **UNLICENSED** and is intended for internal use only. Redistribution or use outside the intended context is prohibited.
+
+## Contribution
+
+Please follow the project's contribution guidelines when contributing to this repository. Ensure all changes are made in feature branches and are merged into the `development` branch via pull requests.
+
+## Contact
+
 For any issues or inquiries related to this project, please contact [bernard@asantemedia.co.uk](mailto:bernard@asantemedia.co.uk).

package/dist/index.css

@@ -1394,7 +1394,7 @@
 
 .qr-journey-form-wrapper * {
   font-family: "Calibri", sans-serif;
-  font-size: 16px;
+  font-size: 18px;
 }
 .qr-journey-form-wrapper h1 {
   font-size: 24px;
@@ -1406,12 +1406,12 @@
 }
 .qr-journey-form-wrapper h1:after {
   content: "";
-  position: absolute;
+  display: block;
+  position: relative;
   width: 100%;
   height: 2px;
   background-color: rgb(233, 233, 233);
-  top: 2em;
-  left: 0;
+  top: 0.8em;
 }
 .qr-journey-form-wrapper h2 {
   font-size: 21px;
@@ -1419,6 +1419,7 @@
   font-weight: 700;
   line-height: 1.6em;
   color: #2d363a;
+  margin: 1em 0 0 0px;
 }
 .qr-journey-form-wrapper .qr-form-page {
   display: none;
@@ -1430,36 +1431,44 @@
 .qr-journey-form-wrapper section {
   position: relative;
 }
-.qr-journey-form-wrapper section .progress-indicator {
+.qr-journey-form-wrapper section .header-wrapper {
+  margin-bottom: 2em;
+  position: relative;
+}
+.qr-journey-form-wrapper section .header-wrapper h2 {
+  position: relative;
+  padding-right: 65px;
+}
+.qr-journey-form-wrapper section .header-wrapper .progress-indicator {
   position: absolute;
-  width: 51px;
-  height: 51px;
+  width: 59px;
+  height: 59px;
   background-color: rgba(196, 38, 46, 0.3);
   right: 0;
-  top: -18px;
+  top: -12px;
   border-radius: 50%;
 }
-.qr-journey-form-wrapper section .progress-indicator:after {
+.qr-journey-form-wrapper section .header-wrapper .progress-indicator:after {
   content: "";
   position: absolute;
-  top: 4px;
-  left: 4px;
-  width: 43px;
-  height: 43px;
+  top: 5px;
+  left: 5px;
+  width: 49px;
+  height: 49px;
   background-color: #FFFFFF;
   border-radius: 50%;
 }
-.qr-journey-form-wrapper section .progress-indicator .progress-visual {
+.qr-journey-form-wrapper section .header-wrapper .progress-indicator .progress-visual {
   --percent: 30%;
   position: absolute;
   background: conic-gradient(rgb(196, 38, 46) var(--percent), transparent 0);
-  width: 51px;
-  height: 51px;
+  width: 59px;
+  height: 59px;
   right: 0;
   top: 0;
   border-radius: 50%;
 }
-.qr-journey-form-wrapper section .progress-indicator .progress-text {
+.qr-journey-form-wrapper section .header-wrapper .progress-indicator .progress-text {
   position: absolute;
   z-index: 1;
   top: 0;
@@ -1468,10 +1477,11 @@
   bottom: 0;
   margin: auto;
   width: 100%;
-  height: 1.4em;
   text-align: center;
-  font-size: 16px;
+  font-size: 12px;
   font-weight: 900;
+  height: 1em;
+  line-height: 1em;
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper {
   display: flex;
@@ -1483,10 +1493,13 @@
   top: 0;
   color: rgb(87, 94, 97);
   font-weight: 700;
-  font-size: 16px;
+  font-size: 18px;
   line-height: 100%;
   letter-spacing: -1.7%;
 }
+.qr-journey-form-wrapper .qr-form-filed-wrapper.disabled .label {
+  display: block;
+}
 .qr-journey-form-wrapper .qr-form-filed-wrapper.checkbox, .qr-journey-form-wrapper .qr-form-filed-wrapper.info {
   padding-bottom: 1em;
 }
@@ -1497,7 +1510,7 @@
   display: block;
   padding-left: 25px;
   border-radius: 0;
-  font-size: 16px;
+  font-size: 18px;
   top: 0;
   line-height: 1.5em;
   color: rgb(87, 94, 97);
@@ -1543,7 +1556,7 @@
   position: relative;
 }
 .qr-journey-form-wrapper .qr-form-filed-wrapper label select + .select-custom-arrow {
-  height: calc(100% - 1em - 4px);
+  height: calc(100% - 1em - 6px);
   top: 2px;
   position: absolute;
   width: 17px;
@@ -1624,12 +1637,142 @@
 .qr-journey-form-wrapper .qr-form-navigation button, .qr-journey-form-wrapper .qr-form-navigation input[type=submit] {
   border: 0;
   width: calc(50% - 5px);
-  padding: 18px 0;
+  padding: 18px;
   text-transform: uppercase;
   color: #FFFFFF;
-  background-color: rgb(196, 38, 46);
+  background: linear-gradient(45deg, rgb(196, 38, 46), rgb(135, 10, 32));
   cursor: pointer;
 }
 .qr-journey-form-wrapper .qr-form-navigation button:first-child, .qr-journey-form-wrapper .qr-form-navigation input[type=submit]:first-child {
+  background: #2d363a;
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page {
+  position: relative;
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page p {
+  line-height: 1.2em;
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked {
+  background-color: white;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: 6px solid rgb(196, 38, 46);
+  position: absolute;
+  top: -20px;
+  right: 0;
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:after, .qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:before {
+  position: absolute;
+  content: "";
+  width: 25px;
+  background-color: rgb(196, 38, 46);
+  height: 5px;
+  top: 14px;
+  bottom: 0;
+  left: -4px;
+  right: 0;
+  margin: auto;
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:after {
+  transform: rotateZ(-45deg) translateX(10px);
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page .submitted-checked:before {
+  width: 15px;
+  transform: rotateZ(45deg) translateX(-7px);
+}
+.qr-journey-form-wrapper .qr-form-thank-you-page a {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+.qr-journey-form-wrapper input:-webkit-autofill,
+.qr-journey-form-wrapper textarea:-webkit-autofill,
+.qr-journey-form-wrapper select:-webkit-autofill {
+  background-color: transparent !important;
+  -webkit-box-shadow: 0 0 0 1000px white inset !important;
+  -webkit-text-fill-color: #000 !important;
+  -webkit-transition: background-color 5000s ease-in-out 0s;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+.qr-journey-form-wrapper.desktop-true {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1em;
+  max-width: 1200px;
+}
+.qr-journey-form-wrapper.desktop-true .form-progress {
+  max-width: 400px;
+}
+.qr-journey-form-wrapper.desktop-true form {
+  flex: 1;
+  max-width: 600px;
+}
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop {
+  padding: 0;
+}
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li {
+  list-style: none;
+  display: flex;
+  gap: 1em;
+  justify-content: space-between;
+  margin: 0;
+}
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li .bullet-point {
+  border: 1px solid rgb(196, 38, 46);
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  color: rgb(130, 134, 136);
+  font-weight: 700;
+  margin-bottom: 50px;
+  position: relative;
+}
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li .bullet-point:after {
+  content: "";
+  width: 2px;
+  height: 25px;
   background-color: rgb(130, 134, 136);
+  position: absolute;
+  top: calc(100% + 12px);
+  right: 0;
+  left: 0;
+  margin: auto;
+}
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li:last-child .bullet-point:after {
+  display: none;
+}
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li h3 {
+  margin: 0 10px;
+  line-height: 30px;
+  text-align: left;
+  flex: 2;
+  color: rgb(130, 134, 136);
+}
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li span {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  height: 1em;
+  width: 1em;
+  text-align: center;
+  line-height: 1em;
+  margin: auto;
+}
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked .bullet-point {
+  background-color: rgb(196, 38, 46);
+  color: #FFFFFF;
+}
+.qr-journey-form-wrapper.desktop-true .progress-indicator-desktop li.checked h3 {
+  color: black;
+}
+.qr-journey-form-wrapper.desktop-true .qr-form-thank-you-page {
+  max-width: 400px;
+}
+.qr-journey-form-wrapper.desktop-true .qr-form-thank-you-page .submitted-checked {
+  position: relative;
+  top: 0;
 }