From 31323fcc5dfd20c7b05471332ce7cf4ea601eb25 Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Mon, 5 Feb 2024 07:36:41 +0100 Subject: [PATCH] feat(CardEmptyCover): add heigth prop --- .../src/form/RadioGroup/RadioGroup.styles.js | 2 - .../CardEmptyCover.constants.js | 3 ++ .../src/misc/CardEmptyCover/CardEmptyCover.js | 5 +-- .../CardEmptyCover/CardEmptyCover.stories.js | 7 +++- .../CardEmptyCover/CardEmptyCover.styles.js | 6 +-- packages/components/src/tokens.compiled.js | 41 ++++--------------- .../icons/src/outline/plugin-scores-basic.svg | 10 +++-- .../icons/src/solid/plugin-scores-basic.svg | 12 +++--- 8 files changed, 33 insertions(+), 53 deletions(-) diff --git a/packages/components/src/form/RadioGroup/RadioGroup.styles.js b/packages/components/src/form/RadioGroup/RadioGroup.styles.js index d882cc5b7..1f71db267 100644 --- 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 index bb5310729..299b5400d 100644 --- 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: , 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 index ea5ec93a0..dead51b61 100644 --- 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 = ( diff --git a/packages/components/src/misc/CardEmptyCover/CardEmptyCover.stories.js b/packages/components/src/misc/CardEmptyCover/CardEmptyCover.stories.js index aa1aaf158..d6a0aab99 100644 --- 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 index a4492e000..58525d7e8 100644 --- 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 index 01fb240f5..69dbb7a2d 100644 --- 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 index d3a0ddc1e..83edd3656 100644 --- a/packages/icons/src/outline/plugin-scores-basic.svg +++ b/packages/icons/src/outline/plugin-scores-basic.svg @@ -1,5 +1,7 @@ - - - - + + + + + + diff --git a/packages/icons/src/solid/plugin-scores-basic.svg b/packages/icons/src/solid/plugin-scores-basic.svg index d3a0ddc1e..39f7d5521 100644 --- a/packages/icons/src/solid/plugin-scores-basic.svg +++ b/packages/icons/src/solid/plugin-scores-basic.svg @@ -1,5 +1,7 @@ - - - - - + + + + + + + \ No newline at end of file