feat(CardEmptyCover): add heigth prop

leemonade · Feb 5, 2024 · 31323fc · 31323fc
1 parent 63a20a1
commit 31323fc
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 53 deletions.
diff --git a/packages/components/src/form/RadioGroup/RadioGroup.styles.js b/packages/components/src/form/RadioGroup/RadioGroup.styles.js
@@ -9,8 +9,6 @@ const RadioGroupStyles = createStyles(
     const isBoxed = variant === 'boxed';
     const isImage = variant === 'image';
 
-    console.log('theme:', theme.other);
-
     return {
       root: {
         padding: 0,

diff --git a/packages/components/src/misc/CardEmptyCover/CardEmptyCover.constants.js b/packages/components/src/misc/CardEmptyCover/CardEmptyCover.constants.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FileIcon } from '@bubbles-ui/icons/outline';
+import { pxToRem } from '../../theme.mixins';
 
 export const CARD_EMPTY_COVER_DEFAULT_PROPS = {
   icon: <FileIcon color={'#878D96'} />,
   fileType: '',
+  height: pxToRem(144),
 };
 export const CARD_EMPTY_COVER_PROP_TYPES = {
   icon: PropTypes.node,
   fileType: PropTypes.oneOf(['audio', 'video', 'image', 'bookmark', 'noicon']),
+  height: PropTypes.number,
 };
diff --git a/packages/components/src/misc/CardEmptyCover/CardEmptyCover.js b/packages/components/src/misc/CardEmptyCover/CardEmptyCover.js
@@ -19,7 +19,7 @@ import { AssetScormIcon } from '../FileIcon/AssetScormIcon';
 import { AssetTestIcon } from '../FileIcon/AssetTestIcon';
 import { Box } from '../../layout/Box';
 
-const CardEmptyCover = memo(({ icon, fileType }) => {
+const CardEmptyCover = memo(({ icon, fileType, height }) => {
   const pairColumnRef = useRef(null);
   const { canvasImage } = useHTMLToCanvas(pairColumnRef, fileType);
   const FileTypeIcon = [
@@ -56,8 +56,7 @@ const CardEmptyCover = memo(({ icon, fileType }) => {
 
   const fileIcon = FileTypeIcon.find(({ key }) => key === fileType);
   const iconToShow = fileIcon?.value ?? styledIcon;
-
-  const { classes } = CardEmptyCoverStyles();
+  const { classes } = CardEmptyCoverStyles({ height });
 
   const pairCol = (
     <Box style={{ opacity: 0 }}>

diff --git a/packages/components/src/misc/CardEmptyCover/CardEmptyCover.stories.js b/packages/components/src/misc/CardEmptyCover/CardEmptyCover.stories.js
@@ -5,7 +5,7 @@ import { CardEmptyCover } from './CardEmptyCover';
 import { CARD_EMPTY_COVER_DEFAULT_PROPS } from './CardEmptyCover.constants';
 
 export default {
-  title: 'leemons/Library/LibraryCardEmptyCover',
+  title: 'leemons/Library/CardEmptyCover',
   parameters: {
     component: CardEmptyCover,
     design: {
@@ -14,7 +14,10 @@ export default {
     },
   },
   argTypes: {
-    fileType: { options: ['audio', 'video', 'image', 'bookmark','file', 'noicon'], control: 'select' },
+    fileType: {
+      options: ['audio', 'video', 'image', 'bookmark', 'file', 'noicon'],
+      control: 'select',
+    },
   },
 };
 

diff --git a/packages/components/src/misc/CardEmptyCover/CardEmptyCover.styles.js b/packages/components/src/misc/CardEmptyCover/CardEmptyCover.styles.js
@@ -1,9 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import { createStyles, pxToRem } from '@bubbles-ui/components';
 
-export const CardEmptyCoverStyles = createStyles(() => ({
+export const CardEmptyCoverStyles = createStyles((theme, { height }) => ({
   emptyStateRoot: {
-    height: pxToRem(144),
+    height: height ? pxToRem(height) : pxToRem(144),
     width: 'auto',
     display: 'flex',
     overflow: 'hidden',
@@ -35,6 +35,6 @@ export const CardEmptyCoverStyles = createStyles(() => ({
     height: '100%',
     width: '100%',
     backgroundSize: '17%',
-    backgroundAttachment: 'local'
+    backgroundAttachment: 'local',
   },
 }));
diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
@@ -1161,7 +1161,7 @@ export default {
           "y": 0,
           "blur": 4,
           "spread": 0,
-          "color": "#ffffff",
+          "color": "#ffffff26",
           "type": "dropShadow"
         },
         "type": "boxShadow"
@@ -1242,17 +1242,8 @@ export default {
             "type": "color"
           },
           "hover--reverse-transparent": {
-            "value": "#ffffff",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.15",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#ffffff26",
+            "type": "color"
           },
           "down": {
             "value": "#F1FFBD",
@@ -4947,30 +4938,12 @@ export default {
       "color": {
         "primary": {
           "default": {
-            "value": "#4D5358",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.4",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#4d535866",
+            "type": "color"
           },
           "hover": {
-            "value": "#4D5358",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.7",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#4d5358b3",
+            "type": "color"
           },
           "down": {
             "value": "#4D5358",

diff --git a/packages/icons/src/outline/plugin-scores-basic.svg b/packages/icons/src/outline/plugin-scores-basic.svg
diff --git a/packages/icons/src/solid/plugin-scores-basic.svg b/packages/icons/src/solid/plugin-scores-basic.svg