sag_components 1.0.12 → 1.0.13

package/dist/stories/components/OneColumnContainer.js

@@ -13,14 +13,16 @@ var _OneColumnContainer = require("../OneColumnContainer.style");
 var _InfoIcon = require("./InfoIcon");
 var _core = require("@dnd-kit/core");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _DroppableModule = _interopRequireDefault(require("./Droppable.module.css"));
-var _excluded = ["children", "itemClass", "refId", "width", "height", "infoText"];
+var _excluded = ["children", "itemClass", "overStyle", "draggingStyle", "droppedStyle", "refId", "width", "height", "infoText"];
 /**
  * Primary UI component for user interaction
  */
 var OneColumnContainer = function OneColumnContainer(_ref) {
   var children = _ref.children,
     itemClass = _ref.itemClass,
+    overStyle = _ref.overStyle,
+    draggingStyle = _ref.draggingStyle,
+    droppedStyle = _ref.droppedStyle,
     refId = _ref.refId,
     width = _ref.width,
     height = _ref.height,
@@ -39,7 +41,7 @@ var OneColumnContainer = function OneColumnContainer(_ref) {
     setClicked(!clicked);
   };
   return /*#__PURE__*/_react.default.createElement(_OneColumnContainer.StyledContainer, {
-    className: (0, _classnames.default)(itemClass, isOver && _DroppableModule.default.over, dragging && _DroppableModule.default.dragging, children && _DroppableModule.default.dropped),
+    className: (0, _classnames.default)(itemClass, overStyle, draggingStyle, droppedStyle),
     ref: setNodeRef,
     width: width,
     height: height

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/stories/components/OneColumnContainer.jsx

@@ -4,11 +4,10 @@ import { InfoTextLabel,InfoTextContainer,IconContainer, StyledContainer } from '
 import { InfoIcon } from "./InfoIcon";
 import { useDroppable, UniqueIdentifier } from "@dnd-kit/core";
 import classNames from "classnames";
-import styles from "./Droppable.module.css"
 /**
  * Primary UI component for user interaction
  */
-export const OneColumnContainer = ({ children,itemClass,refId,width,height,infoText,...props }) => {
+export const OneColumnContainer = ({ children,itemClass,overStyle,draggingStyle,droppedStyle,refId,width,height,infoText,...props }) => {
   const [clicked, setClicked] = useState(false);
   const { isOver, setNodeRef } = useDroppable({
     refId,
@@ -20,9 +19,9 @@ export const OneColumnContainer = ({ children,itemClass,refId,width,height,infoT
   return (
     <StyledContainer className={classNames(
       itemClass,
-      isOver && styles.over,
-      dragging && styles.dragging,
-      children && styles.dropped
+      overStyle,
+      draggingStyle,
+      droppedStyle
     )} ref={setNodeRef} width={width} height={height}>
       {children}
       <InfoTextContainer clicked={clicked} width={width} height={height}>

package/src/stories/components/Droppable.module.css

@@ -1,106 +0,0 @@
-.Droppable {
-
-    position: relative;
-  
-    padding-top: 80px;
-  
-    text-align: center;
-  
-    border-radius: 10px;
-  
-    width: 340px;
-  
-    height: 340px;
-  
-    box-sizing: border-box;
-  
-    background-color: #fff;
-  
-    box-shadow: inset rgba(201, 211, 219, 0.5) 0 0 0 2px,
-  
-      rgba(255, 255, 255, 0) 0 0 0 1px, rgba(201, 211, 219, 0.25) 20px 14px 24px;
-  
-    transition: box-shadow 250ms ease;
-  
-  
-  
-  
-    > svg {
-  
-      position: absolute;
-  
-      left: 50%;
-  
-      top: 50%;
-  
-      width: 200px;
-  
-      transform: translate3d(-50%, -50%, 0);
-  
-      opacity: 0.8;
-  
-      transition: opacity 300ms ease, transform 200ms ease;
-  
-      user-select: none;
-  
-      pointer-events: none;
-  
-    }
-  
-  
-  
-  
-    &.dragging {
-  
-      > svg {
-  
-        opacity: 0.8;
-  
-      }
-  
-    }
-  
-  
-  
-  
-    &.over {
-  
-      box-shadow: inset #ffffff 0 0 0 3px, rgba(201, 211, 219, 0.5) 20px 14px 24px;
-  
-  
-  
-  
-      > svg {
-  
-        opacity: 1;
-  
-      }
-  
-  
-  
-  
-      &.dropped {
-  
-        box-shadow: inset rgba(4, 49, 85, 0.7) 0 0 0 3px,
-  
-          rgba(201, 211, 219, 0.5) 20px 14px 24px;
-  
-      }
-  
-    }
-  
-  
-  
-  
-    &.dropped {
-  
-      > svg {
-  
-        opacity: 0.2;
-  
-        transform: translate3d(-50%, 100%, 0) scale(0.8);
-  
-      }
-  
-    }
-}