@asantemedia-org/edwardsvacuum-design-system 1.3.8 → 1.3.9

package/README.md

@@ -11,7 +11,7 @@ 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.
-- **TailwindCSS** for utility-first CSS framework.
+
 
 ## Prerequisites
 
@@ -52,82 +52,64 @@ Replace `your_token_here` with the actual token.
 
 The following scripts are available in the project:
 
-- **Development**:
-  ```bash
-  yarn dev
-  ```
-  Starts the Next.js development server.
-
-- **Build**:
-  ```bash
-  yarn build
-  ```
-  Builds the project for production.
-
-- **Start**:
-  ```bash
-  yarn start
-  ```
-  Starts the Next.js production server.
-
 - **Lint**:
   ```bash
-  yarn lint
+  npm run lint
   ```
   Runs ESLint to analyze the code for potential errors.
 
 - **Storybook**:
   ```bash
-  yarn storybook
+  npm run storybook
   ```
   Starts the Storybook development server.
 
 - **Build Storybook**:
   ```bash
-  yarn build-storybook
+  npm run build-storybook
   ```
   Builds the Storybook static files.
 
 - **AEM Integration**:
   - **Build AEM Dialogs**:
     ```bash
-    yarn build-aem-dialogs
+    npm run build-aem-dialogs
     ```
     Generates AEM component dialogs.
 
   - **Copy Static AEM Files**:
     ```bash
-    yarn copy-static-aem-files
+    npm run copy-static-aem-files
     ```
     Copies the necessary static files for AEM integration.
 
   - **Clean AEM**:
     ```bash
-    yarn aem-clean
+    npm run aem-clean
     ```
     Cleans the target location for AEM deployment.
 
   - **Install AEM**:
     ```bash
-    yarn aem-install
+    npm run aem-install
     ```
     Builds and copies AEM dialogs and static files.
 
   - **Clean & Install AEM**:
     ```bash
-    yarn aem-clean-install
+    npm run aem-clean-install
     ```
     Cleans and installs AEM files in one command.
 
 - **Chromatic**:
   ```bash
-  yarn chromatic
+  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.
+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
 

package/dist/index.css

@@ -460,4 +460,62 @@
   100% {
     transform: rotateY(0);
   }
+}
+.Button-module__cmp-button___SMjDF {
+  font-family: "Calibri", "Calibri W05 Light", sans-serif;
+  text-transform: uppercase;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  min-width: calc(200px - 2rem);
+  min-height: 50px;
+  padding: 0 3rem 0 1rem;
+  transition: all 0.3s ease-in-out;
+  border: 2px solid transparent;
+}
+.Button-module__cmp-button--style-primary___hfLAd {
+  background: linear-gradient(45deg, rgb(196, 38, 46), rgb(135, 10, 32));
+  color: rgb(255, 255, 255);
+  border: none;
+}
+.Button-module__cmp-button--style-primary___hfLAd:hover {
+  background: rgb(255, 255, 255);
+  color: #2d363a;
+}
+.Button-module__cmp-button--style-secondary___3Dqvg {
+  background: #2d363a;
+  color: rgb(255, 255, 255);
+}
+.Button-module__cmp-button--style-secondary___3Dqvg:hover {
+  background: linear-gradient(45deg, rgb(172, 174, 176), rgb(130, 134, 136));
+  color: rgb(255, 255, 255);
+}
+.Button-module__cmp-button--style-tertiary___Akcep {
+  background: rgb(255, 255, 255);
+  color: #2d363a;
+  border: none;
+}
+.Button-module__cmp-button--style-tertiary___Akcep:hover {
+  background: #2d363a;
+  color: rgb(255, 255, 255);
+}
+.Button-module__cmp-button--style-outlineWhite___v69nN {
+  background: transparent;
+  color: rgb(255, 255, 255);
+  border: 2px solid rgb(255, 255, 255);
+}
+.Button-module__cmp-button--style-outlineWhite___v69nN:hover {
+  background: rgb(255, 255, 255);
+  color: #2d363a;
+  border-color: rgb(255, 255, 255);
+}
+.Button-module__cmp-button--style-outlineGrey___sG5nd {
+  background: transparent;
+  color: #2d363a;
+  border: 2px solid #2d363a;
+}
+.Button-module__cmp-button--style-outlineGrey___sG5nd:hover {
+  background: #2d363a;
+  color: rgb(255, 255, 255);
+  border-color: #2d363a;
 }

package/dist/index.esm.css

@@ -460,4 +460,62 @@
   100% {
     transform: rotateY(0);
   }
+}
+.Button-module__cmp-button___SMjDF {
+  font-family: "Calibri", "Calibri W05 Light", sans-serif;
+  text-transform: uppercase;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  min-width: calc(200px - 2rem);
+  min-height: 50px;
+  padding: 0 3rem 0 1rem;
+  transition: all 0.3s ease-in-out;
+  border: 2px solid transparent;
+}
+.Button-module__cmp-button--style-primary___hfLAd {
+  background: linear-gradient(45deg, rgb(196, 38, 46), rgb(135, 10, 32));
+  color: rgb(255, 255, 255);
+  border: none;
+}
+.Button-module__cmp-button--style-primary___hfLAd:hover {
+  background: rgb(255, 255, 255);
+  color: #2d363a;
+}
+.Button-module__cmp-button--style-secondary___3Dqvg {
+  background: #2d363a;
+  color: rgb(255, 255, 255);
+}
+.Button-module__cmp-button--style-secondary___3Dqvg:hover {
+  background: linear-gradient(45deg, rgb(172, 174, 176), rgb(130, 134, 136));
+  color: rgb(255, 255, 255);
+}
+.Button-module__cmp-button--style-tertiary___Akcep {
+  background: rgb(255, 255, 255);
+  color: #2d363a;
+  border: none;
+}
+.Button-module__cmp-button--style-tertiary___Akcep:hover {
+  background: #2d363a;
+  color: rgb(255, 255, 255);
+}
+.Button-module__cmp-button--style-outlineWhite___v69nN {
+  background: transparent;
+  color: rgb(255, 255, 255);
+  border: 2px solid rgb(255, 255, 255);
+}
+.Button-module__cmp-button--style-outlineWhite___v69nN:hover {
+  background: rgb(255, 255, 255);
+  color: #2d363a;
+  border-color: rgb(255, 255, 255);
+}
+.Button-module__cmp-button--style-outlineGrey___sG5nd {
+  background: transparent;
+  color: #2d363a;
+  border: 2px solid #2d363a;
+}
+.Button-module__cmp-button--style-outlineGrey___sG5nd:hover {
+  background: #2d363a;
+  color: rgb(255, 255, 255);
+  border-color: #2d363a;
 }

package/dist/index.esm.js

@@ -1,7 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import './algolia-dynamic-search.scss';
-import './card.scss';
-import './button.scss';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -971,7 +968,7 @@ function defineIcons(prefix, icons) {
 }
 
 const {
-  styles,
+  styles: styles$1,
   shims
 } = namespace;
 const FAMILY_NAMES = Object.keys(PREFIX_TO_LONG_STYLE);
@@ -1000,7 +997,7 @@ function getIconName(cssPrefix, cls) {
 }
 const build = () => {
   const lookup = reducer => {
-    return reduce(styles, (o$$1, style, prefix) => {
+    return reduce(styles$1, (o$$1, style, prefix) => {
       o$$1[prefix] = reduce(style, reducer, {});
       return o$$1;
     }, {});
@@ -1042,7 +1039,7 @@ const build = () => {
 
   // If we have a Kit, we can't determine if regular is available since we
   // could be auto-fetching it. We'll have to assume that it is available.
-  const hasRegular = 'far' in styles || config.autoFetchSvg;
+  const hasRegular = 'far' in styles$1 || config.autoFetchSvg;
   const shimLookups = reduce(shims, (acc, shim) => {
     const maybeNameMaybeUnicode = shim[0];
     let prefix = shim[1];
@@ -1188,7 +1185,7 @@ function getCanonicalIcon(values) {
   return _objectSpread2$1(_objectSpread2$1(_objectSpread2$1({}, canonical), getDefaultCanonicalPrefix({
     values,
     family,
-    styles,
+    styles: styles$1,
     config,
     canonical,
     givenPrefix
@@ -1209,7 +1206,7 @@ function applyShimAndAlias(skipLookups, givenPrefix, canonical) {
   const aliasIconName = byAlias(prefix, iconName);
   iconName = shim.iconName || aliasIconName || iconName;
   prefix = shim.prefix || prefix;
-  if (prefix === 'far' && !styles['far'] && styles['fas'] && !config.autoFetchSvg) {
+  if (prefix === 'far' && !styles$1['far'] && styles$1['fas'] && !config.autoFetchSvg) {
     // Allow a fallback from the regular style to solid if regular is not available
     // but only if we aren't auto-fetching SVGs
     prefix = 'fas';
@@ -1711,7 +1708,7 @@ function makeLayersCounterAbstract(params) {
 }
 
 const {
-  styles: styles$1
+  styles: styles$1$1
 } = namespace;
 function asFoundIcon(icon) {
   const width = icon[0];
@@ -1777,8 +1774,8 @@ function findIcon(iconName, prefix) {
       iconName = shim.iconName || iconName;
       prefix = shim.prefix || prefix;
     }
-    if (iconName && prefix && styles$1[prefix] && styles$1[prefix][iconName]) {
-      const icon = styles$1[prefix][iconName];
+    if (iconName && prefix && styles$1$1[prefix] && styles$1$1[prefix][iconName]) {
+      const icon = styles$1$1[prefix][iconName];
       return resolve(asFoundIcon(icon));
     }
     maybeNotifyMissing(iconName, prefix);
@@ -4574,7 +4571,7 @@ const faChevronRight = {
 };
 
 // Utility function to retrieve correct SCSS module class names
-var getStyle = function (className) {
+var getStyle$1 = function (className) {
   if (styles$3[className]) return styles$3[className];
   var nestedMatch = Object.keys(styles$3).find(function (key) {
     return key.includes(className);
@@ -4627,43 +4624,44 @@ var Card = function (_a) {
     country = _a.country,
     placeholder = _a.placeholder,
     onClick = _a.onClick;
-  var mode = getStyle("cmp-card--".concat(cardStyle));
+  var mode = getStyle$1("cmp-card--".concat(cardStyle));
   var width = cardSizeMapping(size);
-  var categoryColour = colour ? "cmp-card__content-category-wrapper__colour-".concat(colour) : '';
+  var categoryColour = colour ? getStyle$1("cmp-card__content-category-wrapper__colour-".concat(colour)) : '';
+  var cardFooterColour = colour ? getStyle$1("cmp-card__footer--color-".concat(colour)) : '';
   var contentImage = getImageUrl(imageUrl);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(getStyle('cmp-card'), mode, width, className && getStyle(className))
+    className: classnames(getStyle$1('cmp-card'), mode, width, className && getStyle$1(className))
   }, /*#__PURE__*/React.createElement("a", {
-    className: getStyle('cmp-card__link'),
+    className: getStyle$1('cmp-card__link'),
     href: cardLink,
     onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
-    className: getStyle('cmp-card__content-wrapper')
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(getStyle('cmp-card__image-wrapper'), " ").concat(!imageUrl || placeholder ? getStyle('placeholderImage') : '')
+    className: getStyle$1('cmp-card__content-wrapper')
+  }, cardStyle !== 'type-card-panel' && cardStyle !== 'type-card-no-image' && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(getStyle$1('cmp-card__image-wrapper'), " ").concat(!imageUrl || placeholder ? getStyle$1('placeholderImage') : '')
   }, /*#__PURE__*/React.createElement("picture", null, /*#__PURE__*/React.createElement("img", {
     src: contentImage,
     alt: imageAlt
   }))), cardStyle === 'type-card-label' && /*#__PURE__*/React.createElement("div", {
-    className: classnames(getStyle('cmp-card__content-category-wrapper'), categoryColour)
+    className: classnames(getStyle$1('cmp-card__content-category-wrapper'), categoryColour)
   }, contentCategoryLabel && /*#__PURE__*/React.createElement("p", null, contentCategoryLabel)), /*#__PURE__*/React.createElement("div", {
-    className: getStyle('cmp-card__title-wrapper')
+    className: getStyle$1('cmp-card__title-wrapper')
   }, date && /*#__PURE__*/React.createElement("div", {
-    className: getStyle('cmp-card__date')
+    className: getStyle$1('cmp-card__date')
   }, date), title && /*#__PURE__*/React.createElement("h4", {
-    className: getStyle('cmp-card__title')
+    className: getStyle$1('cmp-card__title')
   }, title), (city || country) && /*#__PURE__*/React.createElement("p", {
-    className: getStyle('cmp-card__city-country')
+    className: getStyle$1('cmp-card__city-country')
   }, city, " ", city && country ? ', ' : '', " ", country), cardStyle === 'type-card-panel' ? /*#__PURE__*/React.createElement("span", {
-    className: classnames(getStyle('cmp-card__footer'), categoryColour)
+    className: classnames(getStyle$1('cmp-card__footer'), cardFooterColour)
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faChevronRight
   })) : cardStyle === 'label' ? /*#__PURE__*/React.createElement("span", {
-    className: getStyle('cmp-card__footer')
+    className: getStyle$1('cmp-card__footer')
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRight
   })) : /*#__PURE__*/React.createElement("span", {
-    className: getStyle('cmp-card__footer')
+    className: getStyle$1('cmp-card__footer')
   }, /*#__PURE__*/React.createElement("span", null, cta))))));
 };
 var ProductCard = function (_a) {
@@ -4680,30 +4678,30 @@ var ProductCard = function (_a) {
     placeholder = _a.placeholder,
     onClick = _a.onClick;
   var width = cardSizeMapping(size);
-  var mode = getStyle("cmp-card--".concat(cardStyle));
+  var mode = getStyle$1("cmp-card--".concat(cardStyle));
   var productImage = getImageUrl(imageUrl);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames(getStyle('cmp-card'), mode, width, className)
+    className: classnames(getStyle$1('cmp-card'), mode, width, className)
   }, /*#__PURE__*/React.createElement("a", {
     href: cardLink,
-    className: getStyle('cmp-card__link'),
+    className: getStyle$1('cmp-card__link'),
     onClick: onClick
   }, /*#__PURE__*/React.createElement("div", {
-    className: getStyle('cmp-card--type-card-product__wrapper')
+    className: getStyle$1('cmp-card--type-card-product__wrapper')
   }, /*#__PURE__*/React.createElement("div", {
-    className: getStyle('cmp-card--type-card-product__image')
+    className: getStyle$1('cmp-card--type-card-product__image')
   }, /*#__PURE__*/React.createElement("figure", null, /*#__PURE__*/React.createElement("img", {
     src: productImage,
     alt: imageAlt,
     className: !imageUrl || placeholder ? 'placeholderImage' : undefined
   }))), /*#__PURE__*/React.createElement("div", {
-    className: getStyle('cmp-card--type-card-product__meta')
+    className: getStyle$1('cmp-card--type-card-product__meta')
   }, /*#__PURE__*/React.createElement("p", {
-    className: getStyle('cmp-card--type-card-product__title')
+    className: getStyle$1('cmp-card--type-card-product__title')
   }, title), productPrice && showProductPrice !== false ? /*#__PURE__*/React.createElement("p", {
-    className: getStyle('cmp-card--type-card-product__prices')
+    className: getStyle$1('cmp-card--type-card-product__prices')
   }, productPrice) : '', /*#__PURE__*/React.createElement("p", {
-    className: getStyle('cmp-card--type-card-product__cta')
+    className: getStyle$1('cmp-card--type-card-product__cta')
   }, cta ? cta : /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRight
   }))))));
@@ -4719,6 +4717,16 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
+var styles = {"cmp-button":"Button-module__cmp-button___SMjDF","cmp-button--style-primary":"Button-module__cmp-button--style-primary___hfLAd","cmp-button--style-secondary":"Button-module__cmp-button--style-secondary___3Dqvg","cmp-button--style-tertiary":"Button-module__cmp-button--style-tertiary___Akcep","cmp-button--style-outlineWhite":"Button-module__cmp-button--style-outlineWhite___v69nN","cmp-button--style-outlineGrey":"Button-module__cmp-button--style-outlineGrey___sG5nd"};
+
+// Utility function to retrieve correct SCSS module class names
+var getStyle = function (className) {
+  if (styles[className]) return styles[className];
+  var nestedMatch = Object.keys(styles).find(function (key) {
+    return key.includes(className);
+  });
+  return nestedMatch ? styles[nestedMatch] : '';
+};
 /**
  * Primary UI component for user interaction
  */
@@ -4726,9 +4734,9 @@ var Button = function (_a) {
   var style = _a.style,
     label = _a.label,
     props = __rest(_a, ["style", "label"]);
-  var mode = style ? "cmp-button--style-".concat(style) : '';
+  var mode = style ? getStyle("cmp-button--style-".concat(style)) : '';
   return /*#__PURE__*/React.createElement("button", _extends({
-    className: ['cmp-button', mode].join(' ')
+    className: [getStyle('cmp-button'), mode].join(' ')
   }, props), label);
 };