opus-toolkit-components 0.3.0 → 0.3.2

package/lib/{main.13234ba8805408d911a7.js → main.923c53023bac4e887eda.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, ``, "",{"version":3,"sources":[],"names":[],"mappings":"","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
 
@@ -658,19 +658,71 @@ function Button(_ref) {
   let {
     type = 'button',
     rank = 'primary',
+    state = 'default',
     text = 'Example Button',
     size = 'md',
     isFullWidth = false,
-    // The boolean to toggle 'w-full'
+    icon: Icon,
+    // Icon as a React component
+    iconPosition = 'right',
+    // Icon position: 'left' or 'right'
+    isIconAnimated = false,
+    // Optional animation for icon hover
+    className = '',
+    // Accepts additional custom class
     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 styles for button ranks
+  const rankStyles = {
+    primary: 'bg-brandPink600 hover:bg-brandPink700 text-greyBaseLight',
+    secondary: 'bg-greyBaseDark900 hover:bg-brandPink700 text-greyBaseLight',
+    outline: 'bg-greyLight50 border-solid border-2 border-greyLight100 hover:border-greyLight700 hover:greyLight100 text-greyLight700',
+    neutral: 'bg-greyLight50 hover:bg-greyLight100 text-greyLight700',
+    destructive: 'bg-utilRed1000 hover:bg-utilRed800 text-greyBaseLight'
+  };
+
+  // Disabled styles for button
+  const disabledStyles = 'bg-greyLight100 text-greyLight500 cursor-not-allowed';
+
+  // Icon animation style (if applicable)
+  const iconClassNames = `
+    inline-block 
+    transition-transform 
+    ease-in-out 
+    duration-200
+    h-5 w-5
+    ${iconPosition === 'right' ? 'ml-2' : 'mr-2'}
+    ${isIconAnimated ? 'group-hover:translate-x-1' : ''}
+  `;
+
+  // Main button class names
+  const classNames = `
+    ${state === 'disabled' ? disabledStyles : rankStyles[rank] || rankStyles.primary}
+    group
+    transition 
+    ease-in-out 
+    duration-700 
+    rounded-lg 
+    px-6 
+    py-2 
+    text-${size} 
+    flex 
+    items-center
+    justify-center
+    whitespace-nowrap // Prevents text wrapping
+    ${isFullWidth ? 'w-full' : ''}
+    ${className}
+  `;
   return /*#__PURE__*/external_react_default().createElement("button", {
     type: type,
     className: classNames,
-    onClick: onClick
-  }, text);
+    onClick: state === 'disabled' ? null : onClick,
+    disabled: state === 'disabled'
+  }, iconPosition === 'left' && Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
+    className: iconClassNames
+  }), text, iconPosition === 'right' && Icon && /*#__PURE__*/external_react_default().createElement(Icon, {
+    className: iconClassNames
+  }));
 }
 // EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Cards/card.scss
 var card = __webpack_require__(865);
@@ -707,16 +759,17 @@ var card_update = injectStylesIntoStyleTag_default()(card/* default */.A, card_o
 function Card(_ref) {
   let {
     mode = 'light',
+    className = '',
     children
   } = _ref;
-  const cardClasses = `p-5 ${mode}-card rounded-lg shadow-lg`;
+  const cardClasses = `p-5 ${mode}-card rounded-lg shadow-lg border-solid border-2 border-greyLight100 ${className}`;
   return /*#__PURE__*/external_react_default().createElement("div", {
     className: cardClasses
   }, children);
 }
 ;// ./src/components/Forms/Inputs/Input.js
 
-function Input(_ref) {
+const Input = /*#__PURE__*/(0,external_react_.forwardRef)((_ref, ref) => {
   let {
     label,
     placeholder,
@@ -725,12 +778,16 @@ function Input(_ref) {
     isValid = true,
     errorMessage = `${label} is required`,
     onChange,
+    className = '',
     value
   } = _ref;
-  const inputClasses = `rounded-md bg-white border px-4 py-3 text-md font-normal text-gray-900 ${isValid ? 'border-slate-500' : 'border-rose-500'}`;
+  const inputClasses = `${className} rounded-md bg-white border border-greyLight500 px-4 py-3 text-md font-normal text-gray-900 ${isValid ? 'border-greyLight500' : 'border-utilRed1000'}`;
   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", {
+  }, /*#__PURE__*/external_react_default().createElement("label", {
+    className: "text-greyLight1000"
+  }, label), /*#__PURE__*/external_react_default().createElement("input", {
+    ref: ref,
     className: inputClasses,
     type: type,
     name: name,
@@ -738,9 +795,10 @@ function Input(_ref) {
     onChange: onChange,
     value: value
   }), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
-    className: "text-rose-500 text-sm"
+    className: "text-utilRed1000 text-sm"
   }, errorMessage));
-}
+});
+/* harmony default export */ const Inputs_Input = (Input);
 ;// ./src/components/Forms/Datepickers/DatePicker.js
 
 function DatePicker(_ref) {
@@ -9085,4 +9143,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.13234ba8805408d911a7.js.map
+//# sourceMappingURL=main.923c53023bac4e887eda.js.map