ironmansoftware / powershell-universal

Issue tracker for PowerShell Universal
https://powershelluniversal.com
35 stars 2 forks source link

Add MUI CardActionArea to New-UDCard cmdlets #2844

Open eizedev opened 10 months ago

eizedev commented 10 months ago

Summary of the new feature / enhancement

Hi @adamdriscoll

currently we are using a custom function to create a "clickable card" in UD. I just realized, that the MUI Card element has a CardActionArea API - Material UI (mui.com) to define actions to specific card elements.
f.e. we could add a href to the CardActionArea and inside the CardActionArea we can put an image and/or text to make the card "clickable".
Is it possible to implement this to the existing New-UDCard cmdlets to make this function available instead of using New-UDElement with OnClick attribute around the card?

Thanks, René

Proposed technical implementation details (optional)

Idea (Put redirect in content and define the content of the CardActionArea with string array type -Type (Body, Media, Footer, Header)):

$Media = New-UDCardMedia -Image 'https://mui.com/static/images/cards/contemplative-reptile.jpg'
$Body = New-UDCardBody -Content {
    New-UDTypography -Text 'Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica' -Sx @{ color = 'text.secondary'} -Variant body2 -Align 'center'
}
$CardActionArea = New-UDCardActionArea -Type @('Body', 'Media') -Content { Invoke-UDRedirect 'https://www.google.com' -OpenInNewWindow }
New-UDCard -Media $Media -Body $Body -CardActionArea $CardActionArea -Id 'card_1'

Example javascript code with CardActionArea block (<CardActionArea href="https://google.com" target="_blank">):

Sandbox: https://codesandbox.io/s/vigorous-goodall-ngx8dd?file=/src/Demo.js

image

import * as React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import { Button, CardActionArea, CardActions } from '@mui/material';

export default function MultiActionAreaCard() {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardActionArea href="https://google.com" target="_blank">
        <CardMedia
          component="img"
          height="140"
          image="https://mui.com/static/images/cards/contemplative-reptile.jpg"
          alt="green iguana"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            Lizard
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Lizards are a widespread group of squamate reptiles, with over 6,000
            species, ranging across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  );
}
eizedev commented 10 months ago

@adamdriscoll Just saw the changelog for 4.2 and this issue: https://github.com/ironmansoftware/issues/issues/2697

So, the OnClick handler is integrated, thanks for that! :)

I do not know if there are any needs for the CardActionArea request of my issue here