opus-toolkit-components 0.2.9 → 0.3.1

package/lib/{main.cbe51cd922acdf7e3218.js → main.cf31769a0398dce70335.js}

@@ -12,7 +12,7 @@ return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 250:
+/***/ 289:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
@@ -27,7 +27,7 @@ return /******/ (() => { // webpackBootstrap
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.primary-btn{background:#e23193;color:#fff}.primary-btn:hover{background:#005de5}.secondary-btn{background:#005de5;color:#fff}.secondary-btn:hover{background:#e23193}.outline-btn{background:none;border:2px solid #fff;color:#fff}.outline-btn:hover{background:#e23193;border-color:#e23193}`, "",{"version":3,"sources":["webpack://./src/components/Buttons/_button.scss","webpack://./node_modules/opus-toolkit-styles/fragments/_colours.scss"],"names":[],"mappings":"AAoBA,aACI,kBCEO,CDDP,UAhBS,CAKX,mBACE,kBCSO,CDMX,eACI,kBCPO,CDQP,UAvBS,CAKX,qBACE,kBCWO,CDWX,aACI,eAAA,CACA,qBAAA,CACA,UA/BS,CAKX,mBACE,kBCWO,CDTL,oBCSK","sourcesContent":["@import 'opus-toolkit-styles/fragments/colours';\r\n// Define color variables\r\n$primary-color: $c247Pink;\r\n$primary-hover-color: $c247Blue;\r\n$secondary-color: $c247Blue;\r\n$hover-color: $c247Pink;\r\n$text-color: white;\r\n$outline-border-color: white;\r\n\r\n// Create a mixin for hover effects to avoid repetition\r\n@mixin hover-effect($hover-bg, $hover-border: null) {\r\n  &:hover {\r\n    background: $hover-bg;\r\n    @if $hover-border {\r\n      border-color: $hover-border;\r\n    }\r\n  }\r\n}\r\n\r\n// Primary button styles\r\n.primary-btn {\r\n    background: $primary-color;\r\n    color: $text-color;\r\n    @include hover-effect($primary-hover-color);\r\n}\r\n\r\n// Secondary button styles\r\n.secondary-btn {\r\n    background: $secondary-color;\r\n    color: $text-color;\r\n    @include hover-effect($hover-color);\r\n}\r\n\r\n// Outline button styles\r\n.outline-btn {\r\n    background: none;\r\n    border: 2px solid $outline-border-color;\r\n    color: $text-color;\r\n    @include hover-effect($hover-color, $hover-color);\r\n}","// Foundation Brand colors\r\n$opusDeepBlue: #0c022f;\r\n$opusNavy: #24135f;\r\n$opusRichBlue: #003494;\r\n\r\n// Grey/Blue Scale\r\n$opusDarkest: #07011c;\r\n$opusGrey800: #1b1f51;\r\n$opusGrey700: #444877;\r\n$opusGrey600: #8b8fac;\r\n$opusGrey400: #e3e4eb;\r\n$opusGrey200: #f8f8fb;\r\n$opusWhite: #ffffff;\r\n\r\n// Brand Colours\r\n$opusLightBlue: #005de5;\r\n$opusBrandBlue: #0176d9;\r\n$opusPurple: #451f88;\r\n$opusPink: #e05db4;\r\n\r\n// C247 Colours\r\n$c247Blue: #005de5;\r\n$c247Purple: #ad43c4;\r\n$c247Pink: #e23193;\r\n\r\n// Utility Colours\r\n$danger: #bb0808;\r\n$success: #27be36;"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, `.primary-btn{color:#fff;box-shadow:0px 2px 4px -2px rgba(0,0,0,.08),0px 4px 8px -2px rgba(0,0,0,.04)}.primary-btn:hover{background-color:#b52776}`, "",{"version":3,"sources":["webpack://./src/components/Buttons/button.scss"],"names":[],"mappings":"AAoBA,aAII,UAlBS,CAmBT,4EAAA,CAJF,mBACE,wBAAA","sourcesContent":["@import 'opus-toolkit-styles/fragments/colours';\r\n// Define color variables\r\n// $primary-color: $c247Pink;\r\n// $primary-hover-color: $c247Blue;\r\n// $secondary-color: $c247Blue;\r\n// $hover-color: $c247Pink;\r\n$text-color: white;\r\n// $outline-border-color: white;\r\n\r\n// Create a mixin for hover effects to avoid repetition\r\n// @mixin hover-effect($hover-bg, $hover-border: null) {\r\n//   &:hover {\r\n//     background: $hover-bg;\r\n//     @if $hover-border {\r\n//       border-color: $hover-border;\r\n//     }\r\n//   }\r\n// }\r\n\r\n// // Primary button styles\r\n.primary-btn {\r\n  &:hover {\r\n    background-color: #B52776;\r\n  }\r\n    color: $text-color;\r\n    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.08), 0px 4px 8px -2px rgba(0, 0, 0, 0.04);\r\n}\r\n\r\n// // Secondary button styles\r\n// .secondary-btn {\r\n//     background: $secondary-color;\r\n//     color: $text-color;\r\n// }"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -546,7 +546,7 @@ __webpack_require__.d(__webpack_exports__, {
   Card: () => (/* reexport */ Card),
   DatePicker: () => (/* reexport */ DatePicker),
   Dropdown: () => (/* reexport */ Dropdown),
-  Input: () => (/* reexport */ Input),
+  Input: () => (/* reexport */ Inputs_Input),
   RadioButton: () => (/* reexport */ RadioButton),
   Table: () => (/* reexport */ Table)
 });
@@ -622,9 +622,9 @@ var insertStyleElement_default = /*#__PURE__*/__webpack_require__.n(insertStyleE
 // EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/styleTagTransform.js
 var styleTagTransform = __webpack_require__(113);
 var styleTagTransform_default = /*#__PURE__*/__webpack_require__.n(styleTagTransform);
-// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Buttons/_button.scss
-var _button = __webpack_require__(250);
-;// ./src/components/Buttons/_button.scss
+// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Buttons/button.scss
+var Buttons_button = __webpack_require__(289);
+;// ./src/components/Buttons/button.scss
 
       
       
@@ -644,12 +644,12 @@ options.insert = insertBySelector_default().bind(null, "head");
 options.domAPI = (styleDomAPI_default());
 options.insertStyleElement = (insertStyleElement_default());
 
-var update = injectStylesIntoStyleTag_default()(_button/* default */.A, options);
+var update = injectStylesIntoStyleTag_default()(Buttons_button/* default */.A, options);
 
 
 
 
-       /* harmony default export */ const Buttons_button = (_button/* default */.A && _button/* default */.A.locals ? _button/* default */.A.locals : undefined);
+       /* harmony default export */ const components_Buttons_button = (Buttons_button/* default */.A && Buttons_button/* default */.A.locals ? Buttons_button/* default */.A.locals : undefined);
 
 ;// ./src/components/Buttons/Button.js
 
@@ -657,15 +657,35 @@ var update = injectStylesIntoStyleTag_default()(_button/* default */.A, options)
 function Button(_ref) {
   let {
     type = 'button',
+    cat = 'c247',
+    // c247, neutral, destructive, inverse 
     rank = 'primary',
+    // Primary, secondary, tertiary
+    state = 'default',
+    // default, hover, disabled
     text = 'Example Button',
     size = 'md',
     isFullWidth = false,
-    // The boolean to toggle 'w-full'
     onClick
   } = _ref;
-  // Conditional class based on isFullWidth
-  const classNames = `transition ease-in-out duration-700 rounded px-6 py-2 text-${size} ${rank}-btn ${isFullWidth ? 'w-full' : ''}`;
+  // Define style classes based on button rank
+  const rankStyles = {
+    primary: 'bg-c247-pinkDefault hover:bg-c247-pinkHover',
+    neutral: 'bg-c247-neutralDefault hover:bg-c247-neutralHover',
+    destructive: 'bg-c247-destructiveDefault hover:bg-c247-destructiveHover'
+  };
+  const classNames = `
+    ${rankStyles[rank] || rankStyles.primary}
+    text-white 
+    transition 
+    ease-in-out 
+    duration-700 
+    rounded-lg 
+    px-6 
+    py-2 
+    text-${size} 
+    ${isFullWidth ? 'w-full' : ''}
+  `;
   return /*#__PURE__*/external_react_default().createElement("button", {
     type: type,
     className: classNames,
@@ -716,7 +736,7 @@ function Card(_ref) {
 }
 ;// ./src/components/Forms/Inputs/Input.js
 
-function Input(_ref) {
+const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
   let {
     label,
     placeholder,
@@ -731,6 +751,7 @@ function Input(_ref) {
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-col mb-4"
   }, /*#__PURE__*/external_react_default().createElement("label", null, label), /*#__PURE__*/external_react_default().createElement("input", {
+    ref: ref,
     className: inputClasses,
     type: type,
     name: name,
@@ -740,7 +761,8 @@ function Input(_ref) {
   }), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-rose-500 text-sm"
   }, errorMessage));
-}
+});
+/* harmony default export */ const Inputs_Input = (Input);
 ;// ./src/components/Forms/Datepickers/DatePicker.js
 
 function DatePicker(_ref) {
@@ -9020,33 +9042,41 @@ function Dropdown(_ref) {
     onChange,
     value
   } = _ref;
-  const [selectedItem, setSelectedItem] = (0,external_react_.useState)(value); // Initialize to null
-
+  const initialSelectedItem = items.find(item => item.value === value) || null;
+  const [selectedItem, setSelectedItem] = (0,external_react_.useState)(initialSelectedItem);
+  (0,external_react_.useEffect)(() => {
+    const newSelectedItem = items.find(item => item.value === value) || null;
+    setSelectedItem(newSelectedItem);
+  }, [value, items]);
   const inputClasses = `inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white border px-4 py-3 text-md font-normal text-gray-900 ${isValid ? 'border-slate-500' : 'border-rose-500'}`;
   const handleSelect = item => {
-    setSelectedItem(item); // Store the whole item
-
-    // Create a synthetic event
+    setSelectedItem(item);
     const event = {
       target: {
         name: name,
-        value: item.value // Use the value of the selected item
+        value: item.value
       }
     };
-    onChange(event); // Pass the synthetic event object
+    onChange(event);
   };
   return /*#__PURE__*/external_react_default().createElement(rn, {
     as: "div",
     className: "relative inline-block text-left",
     name: name
   }, /*#__PURE__*/external_react_default().createElement("label", null, label), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement(It, {
-    className: inputClasses
-  }, selectedItem ? selectedItem.label : placeholder, " ", /*#__PURE__*/external_react_default().createElement(esm_ChevronDownIcon, {
+    className: inputClasses,
+    style: {
+      backgroundColor: 'white'
+    }
+  }, selectedItem ? selectedItem.label : placeholder, /*#__PURE__*/external_react_default().createElement(esm_ChevronDownIcon, {
     "aria-hidden": "true",
     className: "-mr-1 h-5 w-5 text-gray-400"
   }))), /*#__PURE__*/external_react_default().createElement(gt, {
     transition: true,
-    className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition focus:outline-none"
+    className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition focus:outline-none",
+    style: {
+      backgroundColor: 'white'
+    }
   }, /*#__PURE__*/external_react_default().createElement("div", {
     className: "py-1"
   }, items.map((item, index) => /*#__PURE__*/external_react_default().createElement(Et, {
@@ -9056,15 +9086,13 @@ function Dropdown(_ref) {
       active
     } = _ref2;
     return /*#__PURE__*/external_react_default().createElement("button", {
-      type: "button" // Prevent form submission
-      ,
-      onClick: () => handleSelect(item) // Pass the whole item to handleSelect
-      ,
+      type: "button",
+      onClick: () => handleSelect(item),
       className: `block w-full px-4 py-2 text-left text-sm text-gray-700 ${active ? 'bg-gray-100 text-gray-900' : ''}`
     }, item.label);
   })))), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-rose-500 text-sm"
-  }));
+  }, "Please select a valid option"));
 }
 ;// ./src/index.js
 
@@ -9079,4 +9107,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.cbe51cd922acdf7e3218.js.map
+//# sourceMappingURL=main.cf31769a0398dce70335.js.map