frst-components 0.20.0

package/src/components/IJ/learningCycleCard/components/menu/index.tsx

@@ -0,0 +1,92 @@
+import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+import { useState } from 'react'
+import { Divider } from '@mui/material'
+import { TrashDelete } from '@shared/icons'
+import * as Styles from './menuStyle'
+
+export default function CardMenu({ id, menuOptions }) {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+  const handleClose = (option: any) => {
+    setAnchorEl(null)
+    option?.action(id, option)
+  }
+
+  return (
+    <div>
+      <IconButton
+        aria-label="more"
+        aria-controls={open ? 'long-menu' : undefined}
+        aria-expanded={open ? 'true' : undefined}
+        aria-haspopup="true"
+        onClick={handleClick}
+        sx={{ padding: '0px' }}
+      >
+        <MoreVertIcon />
+      </IconButton>
+
+      {open && (
+        <>
+          <Styles.MenuIconOpen />
+          <Menu
+            id="long-menu"
+            MenuListProps={{
+              'aria-labelledby': 'long-button'
+            }}
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleClose}
+            PaperProps={{
+              style: {
+                width: '300px',
+                position: 'relative',
+                marginTop: '10px',
+                padding: '10px'
+              }
+            }}
+            sx={{
+              '& .MuiMenu-paper': {
+                padding: '1px',
+                border: '1px solid #BDBDBD',
+                borderRadius: '10px'
+              }
+            }}
+          >
+            {menuOptions?.map((option, index) => (
+              <>
+                <MenuItem
+                  key={index}
+                  onClick={() => {
+                    handleClose(option)
+                  }}
+                  sx={{
+                    color: option?.type === 'delete' ? '#923534' : '#000000',
+                    fontWeight: option?.type === 'delete' ? 600 : 400,
+                    '&:hover': {
+                      backgroundColor: 'transparent'
+                    }
+                  }}
+                >
+                  {option?.type === 'delete' ? <TrashDelete fill="#923534" width="30px" /> : option?.icon}{' '}
+                  {option?.label}
+                </MenuItem>
+                <Divider
+                  sx={{
+                    margin: '5px 10px 0px 10px'
+                  }}
+                />
+              </>
+            ))}
+          </Menu>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/IJ/learningCycleCard/components/menu/menuStyle.ts

@@ -0,0 +1,27 @@
+import { Padding } from '@mui/icons-material'
+import styled from 'styled-components'
+
+export const MenuIconOpen = styled.div`
+  width: 13.64px;
+  height: 13.64px;
+  position: fixed;
+  margin: -7px 0 32px 27px;
+
+  top: 71px;
+  right: 40px;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  border: 1px solid #9c9c9c;
+  border-right-color: rgb(156, 156, 156);
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-bottom-color: rgb(156, 156, 156);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom: none;
+  border-right: none;
+  -webkit-transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+  -ms-transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+  transform: matrix(0.71, 0.97, -0.51, 0.91, 0, 0);
+  z-index: 999999;
+`

package/src/components/IJ/learningCycleCard/index.tsx

@@ -0,0 +1,93 @@
+import '../../../shared/global.css'
+import { ThemeProvider } from 'styled-components'
+import { FRSTTheme } from '../../../theme'
+import * as Styles from './learningCycleCardStyle'
+import { LearningCycleCardI } from './learningCycleCard'
+
+import { IconUp } from '@shared/icons'
+import { useState } from 'react'
+import { Accordion, AccordionDetails, AccordionSummary, Divider, Rating, Typography } from '@mui/material'
+
+import CardMenu from './components/menu'
+
+export default function LearningCycleCard({
+  id,
+  tag,
+  name,
+  favorite,
+  labels,
+
+  modulesList,
+  handleClick,
+  handleFavorite,
+  disabled,
+  menuOptions,
+  style
+}: LearningCycleCardI) {
+  const [selectedItem, setSelectedItem] = useState(null)
+  const [isAccordionOpen, setIsAccordionOpen] = useState(false)
+  const [isFavorite, setIsFavorite] = useState(favorite || false)
+
+  const handleSelectedItem = (id: string | number) => {
+    setIsAccordionOpen(!isAccordionOpen)
+    setSelectedItem(id)
+  }
+
+  const handleQuantityGroups = (quantity: number | string) => {
+    if (Number(quantity) < 10) {
+      return `0${quantity}`
+    } else {
+      return quantity
+    }
+  }
+
+  const FavoriteStar = () => {
+    return (
+      <Rating
+        id="favoriteStar"
+        value={isFavorite ? 1 : 0}
+        max={1}
+        onChange={() => {
+          setIsFavorite(!isFavorite)
+          handleFavorite(!isFavorite)
+        }}
+      />
+    )
+  }
+
+  return (
+    <ThemeProvider theme={FRSTTheme}>
+      <Styles.WrapperCard disabled={disabled} status={tag} style={{ ...style }}>
+        <Styles.TagArea>
+          <Styles.TagStatus disabled={disabled}>{tag}</Styles.TagStatus>
+          <Styles.Actions>
+            <FavoriteStar />
+            <CardMenu id={id} menuOptions={menuOptions} />
+          </Styles.Actions>
+        </Styles.TagArea>
+        <Styles.CycleName>{name}</Styles.CycleName>
+
+        <Styles.AccordionList disabled={disabled}>
+          <Accordion expanded={selectedItem === id && isAccordionOpen} onChange={() => handleSelectedItem(id)}>
+            <AccordionSummary expandIcon={<IconUp />} aria-controls="panel1bh-content" id="panel1bh-header">
+              <Styles.AccortionTitle>
+                <span>{handleQuantityGroups(modulesList?.length)}</span> <span> {labels?.groupsLabel} </span>
+                {labels?.groupsQuantityDescription}
+              </Styles.AccortionTitle>
+            </AccordionSummary>
+            {!disabled && isAccordionOpen && <Divider sx={{ margin: '5px 10px 0px 10px' }} />}
+            <AccordionDetails>
+              <Styles.DataList>
+                {modulesList?.map((item, index) => (
+                  <Styles.DataListItem key={index}>{item.name}</Styles.DataListItem>
+                ))}
+              </Styles.DataList>
+            </AccordionDetails>
+            {isAccordionOpen && <Divider sx={{ margin: '5px 10px 0px 10px' }} />}
+            <Styles.Button onClick={() => handleClick(id)}>{labels?.actionButton}</Styles.Button>
+          </Accordion>
+        </Styles.AccordionList>
+      </Styles.WrapperCard>
+    </ThemeProvider>
+  )
+}

package/src/components/IJ/learningCycleCard/learningCycleCard.d.ts

@@ -0,0 +1,28 @@
+import React from 'react'
+
+export interface LearningCycleCardI {
+  id: number | string
+  tag: string
+  name: string
+  favorite?: boolean
+
+  labels?: {
+    groupsQuantity: number | string
+    groupsQuantityDescription: string
+    groupsLabel: string
+    actionButton: string
+  }
+  modulesList: [{ id: number | string; name: string }]
+  disabled?: boolean
+  handleClick: (id: string | number) => void
+  handleFavorite: (favorite: boolean) => void
+  menuOptions: [
+    {
+      label: string
+      icon?: React.ReactNode
+      type?: string | null
+      action: ({ id, option }: any) => any
+    }
+  ]
+  style: React.CSSProperties
+}

package/src/components/IJ/learningCycleCard/learningCycleCard.stories.tsx

@@ -0,0 +1,229 @@
+import React from 'react'
+
+import LearningCycleCard from './index'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'IJ/LearningCycleCard',
+  component: LearningCycleCard
+}
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template = (args) => <LearningCycleCard {...args} />
+
+export const normal = Template.bind({})
+normal.args = {
+  id: '1',
+  tag: 'Life Long Learning',
+  name: 'Learning Cycle Name',
+  favorite: false,
+  labels: {
+    groupsLabel: 'grupos',
+    groupsQuantityDescription: 'nesse plano de conteúdo',
+    actionButton: 'Editar grupo'
+  },
+  disabled: false,
+  handleClick: (id) => alert(`click: ${id}`),
+  handleFavorite: (favorite) => alert(`favorite: ${favorite}`),
+
+  menuOptions: [
+    {
+      label: 'Editar Plano de conteúdo',
+      icon: null,
+      type: 'edit',
+      action: (id: string | number, option: any) => console.log('handleEdit', id, option)
+    },
+    {
+      label: 'Duplicar Plano de conteúdo',
+      icon: null,
+      type: 'duplicate',
+      action: (id: string | number, option: any) => console.log('handleDuplicate', id, option)
+    },
+    {
+      label: 'Desativar Plano de conteúdo',
+      icon: null,
+      type: 'disable',
+      action: (id: string | number, option: any) => console.log('handleDisable', id, option)
+    },
+    {
+      label: 'Excluir Plano de conteúdo',
+      icon: 'edit icon',
+      type: 'delete',
+      action: (id: string | number, option: any) => console.log('handleDelete', id, option)
+    }
+  ],
+  modulesList: [
+    {
+      id: 1,
+      name: 'Atendimento/suporte/comercial'
+    },
+    {
+      id: 2,
+      name: 'Atendimento/suporte/comercial/vend...'
+    },
+    {
+      id: 3,
+      name: 'Suporte/Gestão'
+    },
+    {
+      id: 4,
+      name: 'Comercial/Vendas'
+    },
+    {
+      id: 5,
+      name: 'Suporte Santos/São Paulo'
+    },
+    {
+      id: 6,
+      name: 'Suporte Santos/São Paulo'
+    }
+  ]
+}
+
+export const favorite = Template.bind({})
+favorite.args = {
+  id: '1',
+  tag: 'Life Long Learning',
+  name: 'Learning Cycle Name',
+  favorite: true,
+  labels: {
+    groupsLabel: 'grupos',
+    groupsQuantityDescription: 'nesse plano de conteúdo',
+    actionButton: 'Editar grupo'
+  },
+  handleClick: (id) => alert(`click: ${id}`),
+  handleFavorite: (favorite) => alert(`favorite: ${favorite}`),
+  menuOptions: [
+    {
+      label: 'Editar Plano de conteúdo',
+      icon: null,
+      type: 'edit',
+      action: (id: string | number, option: any) => console.log('handleEdit', id, option)
+    },
+    {
+      label: 'Duplicar Plano de conteúdo',
+      icon: null,
+      type: 'duplicate',
+      action: (id: string | number, option: any) => console.log('handleDuplicate', id, option)
+    },
+    {
+      label: 'Desativar Plano de conteúdo',
+      icon: null,
+      type: 'disable',
+      action: (id: string | number, option: any) => console.log('handleDisable', id, option)
+    },
+    {
+      label: 'Excluir Plano de conteúdo',
+      icon: 'edit icon',
+      type: 'delete',
+      action: (id: string | number, option: any) => console.log('handleDelete', id, option)
+    }
+  ],
+  disabled: false,
+  modulesList: [
+    {
+      id: 1,
+      name: 'Atendimento/suporte/comercial'
+    },
+    {
+      id: 2,
+      name: 'Atendimento/suporte/comercial/vend...'
+    },
+    {
+      id: 3,
+      name: 'Suporte/Gestão'
+    },
+    {
+      id: 4,
+      name: 'Comercial/Vendas'
+    },
+    {
+      id: 5,
+      name: 'Suporte Santos/São Paulo'
+    },
+    {
+      id: 6,
+      name: 'Suporte Santos/São Paulo'
+    },
+    {
+      id: 7,
+      name: 'Suporte Santos/São Paulo'
+    },
+    {
+      id: 8,
+      name: 'Suporte Santos/São Paulo'
+    },
+    {
+      id: 9,
+      name: 'Suporte Santos/São Paulo'
+    }
+  ]
+}
+
+export const disabled = Template.bind({})
+disabled.args = {
+  id: '1',
+  tag: 'Life Long Learning',
+  name: 'Learning Cycle Name',
+  favorite: false,
+  labels: {
+    groupsLabel: 'grupos',
+    groupsQuantityDescription: 'nesse plano de conteúdo',
+    actionButton: 'Editar grupo'
+  },
+  handleClick: (id) => alert(`click: ${id}`),
+  handleFavorite: (favorite) => alert(`favorite: ${favorite}`),
+  menuOptions: [
+    {
+      label: 'Editar Plano de conteúdo',
+      icon: null,
+      type: 'edit',
+      action: (id: string | number, option: any) => console.log('handleEdit', id, option)
+    },
+    {
+      label: 'Duplicar Plano de conteúdo',
+      icon: null,
+      type: 'duplicate',
+      action: (id: string | number, option: any) => console.log('handleDuplicate', id, option)
+    },
+    {
+      label: 'Desativar Plano de conteúdo',
+      icon: null,
+      type: 'disable',
+      action: (id: string | number, option: any) => console.log('handleDisable', id, option)
+    },
+    {
+      label: 'Excluir Plano de conteúdo',
+      icon: 'edit icon',
+      type: 'delete',
+      action: (id: string | number, option: any) => console.log('handleDelete', id, option)
+    }
+  ],
+  disabled: true,
+  modulesList: [
+    {
+      id: 1,
+      name: 'Atendimento/suporte/comercial'
+    },
+    {
+      id: 2,
+      name: 'Atendimento/suporte/comercial/vend...'
+    },
+    {
+      id: 3,
+      name: 'Suporte/Gestão'
+    },
+    {
+      id: 4,
+      name: 'Comercial/Vendas'
+    },
+    {
+      id: 5,
+      name: 'Suporte Santos/São Paulo'
+    },
+    {
+      id: 6,
+      name: 'Suporte Santos/São Paulo'
+    }
+  ]
+}

package/src/components/IJ/learningCycleCard/learningCycleCardStyle.ts

@@ -0,0 +1,173 @@
+import styled from 'styled-components'
+
+interface ITag {
+  disabled: boolean
+}
+interface ILearningCycleCard {
+  status: string
+  disabled: boolean
+}
+
+interface IAccordionList {
+  disabled: boolean
+}
+
+export const WrapperCard = styled.div<ILearningCycleCard>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: fit-content;
+
+  background: ${(props) => (props.disabled ? '#E0E0E0' : '#fff')};
+
+  border-radius: 10px;
+
+  padding: 20px 20px 8px 20px;
+
+  :hover {
+    cursor: pointer;
+  }
+`
+
+export const TagArea = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+
+export const TagStatus = styled.div<ITag>`
+  background-color: ${(props) => (props.disabled ? '#757575' : '#398787')};
+  color: #fff;
+  font-weight: 300;
+  border-radius: 4px;
+  width: 100%;
+  max-width: 160px !important;
+  padding: 4px 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const Actions = styled.div`
+  display: flex;
+
+  .MuiMenu-root {
+    position: relative;
+    border: 1px solid red !important;
+  }
+
+  #long-menu::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    width: 0;
+    height: 0;
+    border-top: solid 10px #fff;
+    border-right: solid 10px transparent;
+  }
+
+  #long-menu {
+    border: 1px solid red !important;
+  }
+
+  .MuiMenu-paper {
+    border: 1px solid red !important;
+  }
+`
+
+export const AccordionList = styled.div<IAccordionList>`
+  border: none;
+
+  .MuiAccordion-root {
+    border: none;
+    box-shadow: none;
+    margin-top: 0;
+    background: ${(props) => (props.disabled ? '#E0E0E0' : '#fff')};
+  }
+  .MuiButtonBase-root {
+    padding: 0;
+  }
+  .MuiAccordionDetails-root {
+    padding: 0;
+  }
+  #panel1bh-content {
+    margin-top: -5px;
+    box-shadow: none;
+    padding: 0 !important;
+  }
+`
+
+export const AccortionTitle = styled.span`
+  color: #222222;
+
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+
+  span {
+    font-weight: 600;
+  }
+
+  span:last-child {
+    margin-right: 5px;
+    margin-left: 5px;
+  }
+`
+
+export const CycleName = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding-top: 10px;
+  font-weight: 600;
+  font-size: 25px;
+  color: #222222;
+`
+
+export const FooterButton = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-top: 15px;
+  justify-content: space-around;
+  align-items: center;
+`
+
+export const DataList = styled.ul`
+  list-style-type: none;
+  padding: 0;
+  margin-top: 0 !important;
+  line-height: 35px;
+  overflow-y: scroll;
+  height: 194px;
+  color: #222222;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  scrollbar-width: none;
+  -moz-scrollbars-none: none;
+`
+
+export const DataListItem = styled.li`
+  list-style-type: none;
+  margin: 0;
+  font-weight: 400;
+  padding: 0px 10px;
+`
+
+export const Button = styled.button`
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 15px auto 5px;
+
+  border: none;
+  font-size: 16px;
+  color: #64748b;
+
+  :hover {
+    cursor: pointer;
+  }
+`