disable youtube and screenshots based on props

dulajkavinda · Jul 17, 2023 · df3db8d · df3db8d
1 parent 0eed943
commit df3db8d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "folio-ui",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "description": "",
   "repository": {
     "type": "git",

diff --git a/src/components/project/project.scss b/src/components/project/project.scss
@@ -141,6 +141,23 @@
     background-color: #233242;
     border: none;
 
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    background-color: #233242;
+    border: none;
+
+    &:active:not(.folio-project-media--button--disabled) {
+      @include transition-press;
+      border: 1px dashed $tertiary-white;
+    }
+
+    &:hover:not(.folio-project-media--button--disabled) {
+      @include transition-opacity;
+    }
+
     &:active {
       @include transition-press;
       border: 1px dashed $tertiary-white;
@@ -213,15 +230,20 @@
       @include br2;
       @include clickable;
 
+      &--disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
       background-color: #233242;
       border: none;
 
-      &:active {
+      &:active:not(.folio-project-media--button--main--disabled) {
         @include transition-press;
         border: 1px dashed $tertiary-white;
       }
 
-      &:hover {
+      &:hover:not(.folio-project-media--button--main--disabled) {
         @include transition-opacity;
       }
 

diff --git a/src/components/project/project.stories.tsx b/src/components/project/project.stories.tsx
@@ -52,6 +52,8 @@ Primary.args = {
   description:
     " Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s industry",
   users: "200",
+  isYoutube: true,
+  isScreenshots: false,
 };
 
 Small.args = {

diff --git a/src/components/project/project.tsx b/src/components/project/project.tsx
@@ -31,6 +31,8 @@ export type ProjectProps = {
   users?: string;
   classname?: string;
   customStyles?: {};
+  isYoutube?: boolean;
+  isScreenshots?: boolean;
 };
 
 type Image = {
@@ -66,6 +68,8 @@ const Project: React.FC<ProjectProps> = (props) => {
     users,
     classname,
     customStyles,
+    isYoutube,
+    isScreenshots,
   } = props;
 
   const imgElm = useRef<HTMLImageElement>(null);
@@ -159,7 +163,10 @@ const Project: React.FC<ProjectProps> = (props) => {
               <button
                 onClick={onClickYoutube}
                 type="button"
-                className="folio-project-media--button--main"
+                className={classNames.default(
+                  "folio-project-media--button--main",
+                  isYoutube && "folio-project-media--button--main--disabled",
+                )}
               >
                 <span className="folio-project-media--button--text">
                   <Icon size="6" symbol="youtube" />
@@ -168,7 +175,10 @@ const Project: React.FC<ProjectProps> = (props) => {
               <button
                 onClick={onClickImages}
                 type="button"
-                className="folio-project-media--button"
+                className={classNames.default(
+                  "folio-project-media--button",
+                  isScreenshots && "folio-project-media--button--disabled",
+                )}
               >
                 <span className="folio-project-media--button--text">
                   <Icon size="5" symbol="screenshots" />
@@ -260,6 +270,8 @@ Project.defaultProps = {
   users: "",
   customStyles: {},
   classname: "",
+  isYoutube: false,
+  isScreenshots: false,
 };
 
 export default Project;