@useloops/design-system 1.4.553 → 1.4.555
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/systems/Platform/TestItem/TestItem.js +1 -1
- package/dist/esm/systems/WebCore/Menu/MenuItem.js +1 -1
- package/dist/systems/Platform/SliderGraph/_partials/StyledComponents.d.ts +6 -6
- package/dist/systems/Platform/TestItem/TestItem.js +1 -1
- package/dist/systems/WebCore/Menu/MenuItem.d.ts +1 -0
- package/dist/systems/WebCore/Menu/MenuItem.js +1 -1
- package/dist/systems/WebCore/Typography/Typography.d.ts +1 -1
- package/dist/theme/theme.hooks.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{Stack as r,Box as a}from"@mui/material";import n from"@number-flow/react";import{mergeSx as i}from"merge-sx";import{useState as s}from"react";import{TruncatedList as l}from"react-truncate-list";import m from"../../BrandCore/Icon/Icon.js";import p from"../../WebCore/IconButton/IconButton.js";import"../../BrandCore/primitiveVariables.js";import c from"../../WebCore/Label/Label.js";import d from"../../WebCore/Menu/Menu.js";import u from"../../WebCore/ProgressBar/ProgressBar.js";import g from"../../WebCore/Skeleton/Skeleton.js";import h from"../../WebCore/Surface/Surface.js";import x from"../../WebCore/Typography/Typography.js";import y from"../TestStatus/TestStatus.js";const f=({animated:n=!0,status:f,menuItems:C,title:
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{Stack as r,Box as a}from"@mui/material";import n from"@number-flow/react";import{mergeSx as i}from"merge-sx";import{useState as s}from"react";import{TruncatedList as l}from"react-truncate-list";import m from"../../BrandCore/Icon/Icon.js";import p from"../../WebCore/IconButton/IconButton.js";import"../../BrandCore/primitiveVariables.js";import c from"../../WebCore/Label/Label.js";import d from"../../WebCore/Menu/Menu.js";import u from"../../WebCore/ProgressBar/ProgressBar.js";import g from"../../WebCore/Skeleton/Skeleton.js";import h from"../../WebCore/Surface/Surface.js";import x from"../../WebCore/Typography/Typography.js";import y from"../TestStatus/TestStatus.js";const f=({animated:n=!0,status:f,menuItems:C,title:S,tags:T,stats:k,user:v,slotProps:I,loading:j=!1,...N})=>{const[z,B]=s(!1);return e(h,{variation:"raised",borderradius:"lg",...N,sx:i({padding:e=>e.spacing(e.custom.padding.md),border:e=>`1px solid ${e.custom.palette.stroke.light}`,width:"100%",cursor:"pointer","&:hover .TestItem__Menu":{opacity:1}},N.sx),children:t(r,{component:"article",gap:2,children:[t(r,{component:"header",gap:1,justifyContent:"space-between",children:[t(r,{direction:"row",justifyContent:"space-between",alignItems:"center",gap:1,children:[j?e(g,{sx:{width:90,height:32}}):e(y,{status:f,...I?.status}),!j&&Boolean(C?.length)&&e(d,{trigger:e(p,{icon:e(m,{name:"more-horizontal",size:16}),variation:"outlined",className:"TestItem__Menu",sx:{width:28,aspectRatio:1,borderRadius:"100% !important",transition:"opacity 0.3s ease",opacity:0,"&:focus":{background:e=>`${e.custom.palette.interaction.press} !important`,opacity:1}}}),bindOn:["toggle"],menuItems:C,width:128,offset:[0,8],placement:"bottom-end",...I?.menu})]}),j?e(g,{}):e(x,{component:"h1",weight:"bold",...I?.title,sx:i({fontSize:e=>e.custom.typography.body.xl},I?.title?.sx),children:S})]}),e(a,{children:j?e(a,{display:"flex",flexDirection:"row",gap:.5,children:[...new Array(3).fill(void 0)].map((t,o)=>e(g,{sx:{maxWidth:50}},`test-item-skeleton-${o}`))}):Boolean(T?.length)&&e(l,{style:{display:"flex",flexWrap:"wrap",maxHeight:30,gap:"4px",listStyleType:"none",paddingInlineStart:0,margin:0,...z&&{maxHeight:"none"}},alwaysShowTruncator:z,renderTruncator:({hiddenItemsCount:t})=>t>0?e(c,{body:`+${t}`,weight:"light",onClick:e=>{e.stopPropagation(),B(!0)},...I?.tagsExpand,sx:i({background:e=>e.custom.palette.neutral[50]},I?.tagsExpand?.sx)}):e(p,{sizing:"sm",icon:e(m,{name:"chevron-up",size:16}),onClick:e=>{e.stopPropagation(),B(!1)},...I?.tagsCollapse,sx:i({color:e=>e.custom.palette.icon.primary},I?.tagsCollapse?.sx)}),children:T.map(t=>e(c,{body:t,weight:"light",...I?.pill,sx:i({background:e=>e.custom.palette.neutral[50]},I?.pill?.sx)},t))})}),!j&&k?.progress&&e(h,{variation:"sunken",borderradius:"md",sx:{border:e=>`1px solid ${e.custom.palette.neutral[100]}`,padding:e=>e.spacing(e.custom.padding.md)},children:t(r,{gap:2,children:[e(u,{variation:"determinate",value:k.progress.percentage}),t(a,{gap:{sm:.5,md:1},justifyContent:"stretch",sx:e=>({display:"grid",[e.breakpoints.up("lg")]:{gridTemplateColumns:"repeat(3, 1fr)"},[e.breakpoints.down("lg")]:{gridTemplateColumns:"auto"},[e.containerQueries.up("lg")]:{gridTemplateColumns:"repeat(3, 1fr)"},[e.containerQueries.down("lg")]:{gridTemplateColumns:"auto"}}),children:[e(a,{flexBasis:0,flexGrow:1,children:e(b,{animated:n,label:"Completed",primaryText:k.progress.completed.toString(),secondaryText:`of ${k.progress.total}`})}),e(a,{flexBasis:0,flexGrow:1,children:e(b,{animated:n,label:"Incomplete",primaryText:k.progress.incomplete.toString(),secondaryText:`${k.progress.incompletePercentage}%`})}),e(a,{flexBasis:0,flexGrow:1,children:e(b,{animated:n,label:"Duration",primaryText:k.progress.averageDuration,secondaryText:"average"})})]})]})}),t(a,{component:"footer",display:"flex",flexDirection:"row",justifyContent:v?"space-between":"end",gap:1,children:[v&&e(a,{display:"flex",alignItems:"center",gap:1,children:j?t(o,{children:[e(g,{sx:{borderRadius:"50%",width:24,aspectRatio:1,flexShrink:0}}),e(g,{sx:{width:100}})]}):e(o,{children:e(x,{component:"p",clamp:1,sx:{fontSize:e=>e.custom.typography.body.xs,color:e=>e.custom.palette.text.secondary},children:v.activityDescription})})}),!j&&"draft"!==f&&t(a,{display:"flex",alignItems:"center",gap:2,flexShrink:0,children:[e(w,{animated:n,iconName:"data-bar",label:"answers",value:k?.count?.answers??0}),e(w,{animated:n,iconName:"comment-filled",label:"comments",value:k?.count?.comments??0,slotProps:{icon:{size:20}}})]})]})]})})},b=({animated:a,label:i,primaryText:s,secondaryText:l})=>{const m=s.match(/\d{1,2}:\d{2}/),p=s.split(":"),c=!isNaN(Number(s)),d=l.includes("%")&&!isNaN(Number(l.replace("%","")));return t(r,{sx:{background:e=>e.custom.palette.surface.default,minWidth:"92px",border:e=>`1px solid ${e.custom.palette.neutral[100]}`,borderRadius:1,padding:e=>`${e.spacing(e.custom.padding.sm)} ${e.spacing(e.custom.padding.md)}`,color:e=>e.custom.palette.text.primary,flexShrink:0,height:"100%"},direction:{sm:"row",md:"row",lg:"column"},alignItems:"center",gap:{sm:1,md:1,lg:0},children:[e(x,{component:"p",sx:{width:"100%",textAlign:{md:"left",lg:"center"},fontSize:e=>e.custom.typography.body.sm},children:i}),e(x,{component:"h3",sx:{fontSize:e=>({sm:e.custom.typography.body.sm,md:e.custom.typography.body.md,lg:e.custom.typography.body.xxl}),fontWeight:500,flexShrink:0},monospaced:!0,children:e(o,{children:e(o,m||c?{children:m?t(o,{children:[e(n,{value:Number(p[0]),format:{minimumIntegerDigits:2,useGrouping:!1},animated:a}),":",e(n,{value:Number(p[1]),format:{minimumIntegerDigits:2,useGrouping:!1},animated:a})]}):e(n,{value:Number(s),animated:a})}:{children:s})})}),e(x,{component:"p",sx:{color:e=>e.custom.palette.text.secondary,fontSize:e=>e.custom.typography.body.sm,flexShrink:0},monospaced:!0,children:d?t(o,{children:[e(n,{value:Number(l.replace("%","")),animated:a}),"%"]}):l})]})},w=({animated:o,iconName:r,label:s,value:l,slotProps:p})=>t(a,{display:"flex",alignItems:"center",gap:.5,children:[e(m,{name:r,...p?.icon,sx:i({color:e=>e.custom.palette.icon.secondary},p?.icon?.sx)}),t(x,{monospaced:!0,component:"p",sx:e=>({fontSize:e=>e.custom.typography.body.xs,color:e=>e.custom.palette.text.primary,"& > span":{color:e=>e.custom.palette.text.secondary,[e.breakpoints.up("lg")]:{display:"inline"},[e.breakpoints.down("lg")]:{display:"none"},[e.containerQueries.up("lg")]:{display:"inline"},[e.containerQueries.down("lg")]:{display:"none"}}}),children:[e(n,{value:l,animated:o})," ",e("span",{children:s})]})]});export{f as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{styled as o,Button as n,Box as i,Stack as r,useTheme as a,Grow as s}from"@mui/material";import{mergeSx as l}from"merge-sx";import"../../BrandCore/colorRamps.js";import{base as c}from"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import d from"../../BrandCore/Icon/Icon.js";import{buttonInteraction as p}from"../ButtonBase/Button.variant-helpers.js";import"../ButtonBase/ButtonBase.js";import m from"../Typography/Typography.js";const h=o(n,{shouldForwardProp:e=>!["active","iconHeight"].includes(e)})(({active:e,iconHeight:t=24,theme:o})=>({borderRadius:o.spacing(o.custom.radius.sm),maxWidth:"100%",padding:o.spacing(.5,1),textTransform:"none",width:"100%",...p(o,e),backgroundColor:e?o.custom.palette.surface.sunken:"transparent","& p":{alignItems:"center",display:"flex",height:t},"&:disabled":{backgroundColor:"inherit","& p":{color:o.custom.palette.text.disabled}}})),g=o(i)(({theme:e})=>({padding:e.spacing(.5,1.5)})),u=o(i)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),justifyContent:"space-between",textAlign:"left"})),x=o(r)(({iconHeight:e=24,theme:t})=>({height:e,width:24,alignItems:"center",color:t.custom.palette.icon.secondary,display:"flex",justifyContent:"center",marginLeft:"auto"})),f=({baseState:o,label:n,active:r,danger:p,divider:f,heading:y,selected:B,disabled:C,closeOnClick:b,
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{styled as o,Button as n,Box as i,Stack as r,useTheme as a,Grow as s}from"@mui/material";import{mergeSx as l}from"merge-sx";import"../../BrandCore/colorRamps.js";import{base as c}from"../../BrandCore/primitiveVariables.js";import"../../BrandCore/semanticColor.js";import"../../BrandCore/types.js";import"../../BrandCore/typography.js";import d from"../../BrandCore/Icon/Icon.js";import{buttonInteraction as p}from"../ButtonBase/Button.variant-helpers.js";import"../ButtonBase/ButtonBase.js";import m from"../Typography/Typography.js";const h=o(n,{shouldForwardProp:e=>!["active","iconHeight"].includes(e)})(({active:e,iconHeight:t=24,theme:o})=>({borderRadius:o.spacing(o.custom.radius.sm),maxWidth:"100%",padding:o.spacing(.5,1),textTransform:"none",width:"100%",...p(o,e),backgroundColor:e?o.custom.palette.surface.sunken:"transparent","& p":{alignItems:"center",display:"flex",height:t},"&:disabled":{backgroundColor:"inherit","& p":{color:o.custom.palette.text.disabled}}})),g=o(i)(({theme:e})=>({padding:e.spacing(.5,1.5)})),u=o(i)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),justifyContent:"space-between",textAlign:"left"})),x=o(r)(({iconHeight:e=24,theme:t})=>({height:e,width:24,alignItems:"center",color:t.custom.palette.icon.secondary,display:"flex",justifyContent:"center",marginLeft:"auto"})),f=({baseState:o,label:n,active:r,danger:p,divider:f,heading:y,selected:B,disabled:C,closeOnClick:b,hidden:j,onClick:v,startIcon:I,slotProps:k,children:w})=>{const H=a(),T=3*c;return j?null:f?e(i,{sx:{height:"32px",display:"flex",alignItems:"center"},children:e(i,{sx:{borderBottom:`1px solid ${H.custom.palette.stroke.default}`,width:"100%"}})}):n?y?e(g,{children:e(m,{component:"p",type:"button",variation:"md",sx:{color:H.custom.palette.text.secondary},children:n})}):e(h,{active:r,disabled:C,onClick:e=>{v&&v(e),b&&o?.close()},iconHeight:T,children:t(u,{sx:{flex:1,gap:1,justifyContent:"start"},children:[void 0!==I&&e(d,{name:I,...k?.startIcon}),e(u,{sx:{px:.5},children:e(m,{monospaced:!0,component:"p",sx:l(p&&{color:H.custom.palette.text.negative},y&&{color:H.custom.palette.text.secondary}),type:"button",variation:"md",children:n})}),(Boolean(w?.length)||B)&&t(x,{iconHeight:T,children:[w?.length&&w.length>0&&e(s,{in:!0,children:e(i,{sx:{display:"flex",alignItems:"center"},children:e(d,{name:"chevron-right",size:T})})}),B&&e(s,{in:!0,children:e(i,{sx:{display:"flex",alignItems:"center"},children:e(d,{name:"check",size:T})})})]})]})}):null};export{f as default};
|
|
@@ -6,27 +6,27 @@ import * as _mui_material from '@mui/material';
|
|
|
6
6
|
import { SliderGraphBarProps, CommonComponentProps } from '../types.js';
|
|
7
7
|
|
|
8
8
|
declare const SliderGraphWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
|
|
9
|
-
declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "
|
|
9
|
+
declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "sx" | "alignItems" | "style" | "children" | "autoFocus" | "className" | "tabIndex" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
|
|
10
10
|
declare const SliderGraphBarWrapper: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
|
|
11
|
-
declare const VerticalBarValue: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof
|
|
11
|
+
declare const VerticalBarValue: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
|
|
12
12
|
component?: React.ElementType;
|
|
13
13
|
}, {}, {}>;
|
|
14
|
-
declare const VerticalBar: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof
|
|
14
|
+
declare const VerticalBar: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
|
|
15
15
|
component?: React.ElementType;
|
|
16
16
|
} & CommonComponentProps & {
|
|
17
17
|
value: number;
|
|
18
18
|
checked: boolean;
|
|
19
19
|
}, {}, {}>;
|
|
20
|
-
declare const VerticalBarActions: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof
|
|
20
|
+
declare const VerticalBarActions: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
|
|
21
21
|
component?: React.ElementType;
|
|
22
22
|
}, {}, {}>;
|
|
23
|
-
declare const VerticalBarLabel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof
|
|
23
|
+
declare const VerticalBarLabel: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
|
|
24
24
|
component?: React.ElementType;
|
|
25
25
|
}, {}, {}>;
|
|
26
26
|
declare const AxisSegmentWrapper: _emotion_styled.StyledComponent<_mui_material.StackOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_material_OverridableComponent.CommonProps | keyof _mui_material.StackOwnProps> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
|
|
27
27
|
component?: React.ElementType;
|
|
28
28
|
} & Partial<SliderGraphBarProps>, {}, {}>;
|
|
29
|
-
declare const AxisSegment: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof
|
|
29
|
+
declare const AxisSegment: _emotion_styled.StyledComponent<_mui_system.BoxOwnProps<_mui_material.Theme> & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme>> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof _mui_system.BoxOwnProps<_mui_material.Theme> | keyof _mui_material_OverridableComponent.CommonProps> & {
|
|
30
30
|
component?: React.ElementType;
|
|
31
31
|
} & {
|
|
32
32
|
showGraphLines?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("@number-flow/react"),s=require("merge-sx"),a=require("react"),n=require("react-truncate-list"),o=require("../../BrandCore/Icon/Icon.js"),i=require("../../WebCore/IconButton/IconButton.js");require("../../BrandCore/primitiveVariables.js");var l=require("../../WebCore/Label/Label.js"),d=require("../../WebCore/Menu/Menu.js"),c=require("../../WebCore/ProgressBar/ProgressBar.js"),p=require("../../WebCore/Skeleton/Skeleton.js"),m=require("../../WebCore/Surface/Surface.js"),u=require("../../WebCore/Typography/Typography.js"),x=require("../TestStatus/TestStatus.js");function g(e){return e&&e.__esModule?e:{default:e}}var h=g(r);const j=({animated:r,label:s,primaryText:a,secondaryText:n})=>{const o=a.match(/\d{1,2}:\d{2}/),i=a.split(":"),l=!isNaN(Number(a)),d=n.includes("%")&&!isNaN(Number(n.replace("%","")));return e.jsxs(t.Stack,{sx:{background:e=>e.custom.palette.surface.default,minWidth:"92px",border:e=>`1px solid ${e.custom.palette.neutral[100]}`,borderRadius:1,padding:e=>`${e.spacing(e.custom.padding.sm)} ${e.spacing(e.custom.padding.md)}`,color:e=>e.custom.palette.text.primary,flexShrink:0,height:"100%"},direction:{sm:"row",md:"row",lg:"column"},alignItems:"center",gap:{sm:1,md:1,lg:0},children:[e.jsx(u,{component:"p",sx:{width:"100%",textAlign:{md:"left",lg:"center"},fontSize:e=>e.custom.typography.body.sm},children:s}),e.jsx(u,{component:"h3",sx:{fontSize:e=>({sm:e.custom.typography.body.sm,md:e.custom.typography.body.md,lg:e.custom.typography.body.xxl}),fontWeight:500,flexShrink:0},monospaced:!0,children:e.jsx(e.Fragment,{children:o||l?e.jsx(e.Fragment,{children:o?e.jsxs(e.Fragment,{children:[e.jsx(h.default,{value:Number(i[0]),format:{minimumIntegerDigits:2,useGrouping:!1},animated:r}),":",e.jsx(h.default,{value:Number(i[1]),format:{minimumIntegerDigits:2,useGrouping:!1},animated:r})]}):e.jsx(h.default,{value:Number(a),animated:r})}):e.jsx(e.Fragment,{children:a})})}),e.jsx(u,{component:"p",sx:{color:e=>e.custom.palette.text.secondary,fontSize:e=>e.custom.typography.body.sm,flexShrink:0},monospaced:!0,children:d?e.jsxs(e.Fragment,{children:[e.jsx(h.default,{value:Number(n.replace("%","")),animated:r}),"%"]}):n})]})},y=({animated:r,iconName:a,label:n,value:i,slotProps:l})=>e.jsxs(t.Box,{display:"flex",alignItems:"center",gap:.5,children:[e.jsx(o.default,{name:a,...l?.icon,sx:s.mergeSx({color:e=>e.custom.palette.icon.secondary},l?.icon?.sx)}),e.jsxs(u,{monospaced:!0,component:"p",sx:e=>({fontSize:e=>e.custom.typography.body.xs,color:e=>e.custom.palette.text.primary,"& > span":{color:e=>e.custom.palette.text.secondary,[e.breakpoints.up("lg")]:{display:"inline"},[e.breakpoints.down("lg")]:{display:"none"},[e.containerQueries.up("lg")]:{display:"inline"},[e.containerQueries.down("lg")]:{display:"none"}}}),children:[e.jsx(h.default,{value:i,animated:r})," ",e.jsx("span",{children:n})]})]});module.exports=({animated:r=!0,status:g,menuItems:h,title:f,tags:b,stats:S,user:w,slotProps:k,loading:v=!1,...C})=>{const[T,B]=a.useState(!1);return e.jsx(m,{variation:"raised",borderradius:"lg",...C,sx:s.mergeSx({padding:e=>e.spacing(e.custom.padding.md),border:e=>`1px solid ${e.custom.palette.stroke.light}`,width:"100%",cursor:"pointer","&:hover .TestItem__Menu":{opacity:1}},C.sx),children:e.jsxs(t.Stack,{component:"article",gap:2,children:[e.jsxs(t.Stack,{component:"header",gap:1,justifyContent:"space-between",children:[e.jsxs(t.Stack,{direction:"row",justifyContent:"space-between",alignItems:"center",gap:1,children:[v?e.jsx(p,{sx:{width:90,height:32}}):e.jsx(x,{status:g,...k?.status}),!v&&Boolean(h?.length)&&e.jsx(d.default,{trigger:e.jsx(i,{icon:e.jsx(o.default,{name:"more-horizontal",size:16}),variation:"outlined",className:"TestItem__Menu",sx:{width:28,aspectRatio:1,borderRadius:"100% !important",transition:"opacity 0.3s ease",opacity:0,"&:focus":{background:e=>`${e.custom.palette.interaction.press} !important`,opacity:1}}}),bindOn:["toggle"],menuItems:h,width:128,offset:[0,8],placement:"bottom-end",...k?.menu})]}),v?e.jsx(p,{}):e.jsx(u,{component:"h1",weight:"bold",...k?.title,sx:s.mergeSx({fontSize:e=>e.custom.typography.body.xl},k?.title?.sx),children:f})]}),e.jsx(t.Box,{children:v?e.jsx(t.Box,{display:"flex",flexDirection:"row",gap:.5,children:[...new Array(3).fill(void 0)].map((t,r)=>e.jsx(p,{sx:{maxWidth:50}},`test-item-skeleton-${r}`))}):Boolean(b?.length)&&e.jsx(n.TruncatedList,{style:{display:"flex",flexWrap:"wrap",maxHeight:30,gap:"4px",listStyleType:"none",paddingInlineStart:0,margin:0,...T&&{maxHeight:"none"}},alwaysShowTruncator:T,renderTruncator:({hiddenItemsCount:t})=>t>0?e.jsx(l,{body:`+${t}`,weight:"light",onClick:e=>{e.stopPropagation(),B(!0)},...k?.tagsExpand,sx:s.mergeSx({background:e=>e.custom.palette.neutral[50]},k?.tagsExpand?.sx)}):e.jsx(i,{sizing:"sm",icon:e.jsx(o.default,{name:"chevron-up",size:16}),onClick:e=>{e.stopPropagation(),B(!1)},...k?.tagsCollapse,sx:s.mergeSx({color:e=>e.custom.palette.icon.primary},k?.tagsCollapse?.sx)}),children:b.map(t=>e.jsx(l,{body:t,weight:"light",...k?.pill,sx:s.mergeSx({background:e=>e.custom.palette.neutral[50]},k?.pill?.sx)},t))})}),!v&&S?.progress&&e.jsx(m,{variation:"sunken",borderradius:"md",sx:{border:e=>`1px solid ${e.custom.palette.neutral[100]}`,padding:e=>e.spacing(e.custom.padding.md)},children:e.jsxs(t.Stack,{gap:2,children:[e.jsx(c,{variation:"determinate",value:S.progress.percentage}),e.jsxs(t.Box,{gap:{sm:.5,md:1},justifyContent:"stretch",sx:e=>({display:"grid",[e.breakpoints.up("lg")]:{gridTemplateColumns:"repeat(3, 1fr)"},[e.breakpoints.down("lg")]:{gridTemplateColumns:"auto"},[e.containerQueries.up("lg")]:{gridTemplateColumns:"repeat(3, 1fr)"},[e.containerQueries.down("lg")]:{gridTemplateColumns:"auto"}}),children:[e.jsx(t.Box,{flexBasis:0,flexGrow:1,children:e.jsx(j,{animated:r,label:"Completed",primaryText:S.progress.completed.toString(),secondaryText:`of ${S.progress.total}`})}),e.jsx(t.Box,{flexBasis:0,flexGrow:1,children:e.jsx(j,{animated:r,label:"Incomplete",primaryText:S.progress.incomplete.toString(),secondaryText:`${S.progress.incompletePercentage}%`})}),e.jsx(t.Box,{flexBasis:0,flexGrow:1,children:e.jsx(j,{animated:r,label:"Duration",primaryText:S.progress.averageDuration,secondaryText:"average"})})]})]})}),e.jsxs(t.Box,{component:"footer",display:"flex",flexDirection:"row",justifyContent:w?"space-between":"end",gap:1,children:[w&&e.jsx(t.Box,{display:"flex",alignItems:"center",gap:1,children:v?e.jsxs(e.Fragment,{children:[e.jsx(p,{sx:{borderRadius:"50%",width:24,aspectRatio:1,flexShrink:0}}),e.jsx(p,{sx:{width:100}})]}):e.jsx(e.Fragment,{children:e.jsx(u,{component:"p",clamp:1,sx:{fontSize:e=>e.custom.typography.body.xs,color:e=>e.custom.palette.text.secondary},children:w.activityDescription})})}),!v&&"draft"!==g&&e.jsxs(t.Box,{display:"flex",alignItems:"center",gap:2,flexShrink:0,children:[e.jsx(y,{animated:r,iconName:"data-bar",label:"answers",value:S?.count?.answers??0}),e.jsx(y,{animated:r,iconName:"comment-filled",label:"comments",value:S?.count?.comments??0,slotProps:{icon:{size:20}}})]})]})]})})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("merge-sx");require("../../BrandCore/colorRamps.js");var s=require("../../BrandCore/primitiveVariables.js");require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var n=require("../../BrandCore/Icon/Icon.js"),i=require("../ButtonBase/Button.variant-helpers.js");require("../ButtonBase/ButtonBase.js");var o=require("../Typography/Typography.js");const a=t.styled(t.Button,{shouldForwardProp:e=>!["active","iconHeight"].includes(e)})(({active:e,iconHeight:t=24,theme:r})=>({borderRadius:r.spacing(r.custom.radius.sm),maxWidth:"100%",padding:r.spacing(.5,1),textTransform:"none",width:"100%",...i.buttonInteraction(r,e),backgroundColor:e?r.custom.palette.surface.sunken:"transparent","& p":{alignItems:"center",display:"flex",height:t},"&:disabled":{backgroundColor:"inherit","& p":{color:r.custom.palette.text.disabled}}})),l=t.styled(t.Box)(({theme:e})=>({padding:e.spacing(.5,1.5)})),c=t.styled(t.Box)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),justifyContent:"space-between",textAlign:"left"})),d=t.styled(t.Stack)(({iconHeight:e=24,theme:t})=>({height:e,width:24,alignItems:"center",color:t.custom.palette.icon.secondary,display:"flex",justifyContent:"center",marginLeft:"auto"}));module.exports=({baseState:i,label:u,active:x,danger:p,divider:h,heading:m,selected:g,disabled:j,closeOnClick:y,
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),r=require("merge-sx");require("../../BrandCore/colorRamps.js");var s=require("../../BrandCore/primitiveVariables.js");require("../../BrandCore/semanticColor.js"),require("../../BrandCore/types.js"),require("../../BrandCore/typography.js");var n=require("../../BrandCore/Icon/Icon.js"),i=require("../ButtonBase/Button.variant-helpers.js");require("../ButtonBase/ButtonBase.js");var o=require("../Typography/Typography.js");const a=t.styled(t.Button,{shouldForwardProp:e=>!["active","iconHeight"].includes(e)})(({active:e,iconHeight:t=24,theme:r})=>({borderRadius:r.spacing(r.custom.radius.sm),maxWidth:"100%",padding:r.spacing(.5,1),textTransform:"none",width:"100%",...i.buttonInteraction(r,e),backgroundColor:e?r.custom.palette.surface.sunken:"transparent","& p":{alignItems:"center",display:"flex",height:t},"&:disabled":{backgroundColor:"inherit","& p":{color:r.custom.palette.text.disabled}}})),l=t.styled(t.Box)(({theme:e})=>({padding:e.spacing(.5,1.5)})),c=t.styled(t.Box)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(1),justifyContent:"space-between",textAlign:"left"})),d=t.styled(t.Stack)(({iconHeight:e=24,theme:t})=>({height:e,width:24,alignItems:"center",color:t.custom.palette.icon.secondary,display:"flex",justifyContent:"center",marginLeft:"auto"}));module.exports=({baseState:i,label:u,active:x,danger:p,divider:h,heading:m,selected:g,disabled:j,closeOnClick:y,hidden:B,onClick:f,startIcon:b,slotProps:v,children:C})=>{const q=t.useTheme(),I=3*s.base;return B?null:h?e.jsx(t.Box,{sx:{height:"32px",display:"flex",alignItems:"center"},children:e.jsx(t.Box,{sx:{borderBottom:`1px solid ${q.custom.palette.stroke.default}`,width:"100%"}})}):u?m?e.jsx(l,{children:e.jsx(o,{component:"p",type:"button",variation:"md",sx:{color:q.custom.palette.text.secondary},children:u})}):e.jsx(a,{active:x,disabled:j,onClick:e=>{f&&f(e),y&&i?.close()},iconHeight:I,children:e.jsxs(c,{sx:{flex:1,gap:1,justifyContent:"start"},children:[void 0!==b&&e.jsx(n.default,{name:b,...v?.startIcon}),e.jsx(c,{sx:{px:.5},children:e.jsx(o,{monospaced:!0,component:"p",sx:r.mergeSx(p&&{color:q.custom.palette.text.negative},m&&{color:q.custom.palette.text.secondary}),type:"button",variation:"md",children:u})}),(Boolean(C?.length)||g)&&e.jsxs(d,{iconHeight:I,children:[C?.length&&C.length>0&&e.jsx(t.Grow,{in:!0,children:e.jsx(t.Box,{sx:{display:"flex",alignItems:"center"},children:e.jsx(n.default,{name:"chevron-right",size:I})})}),g&&e.jsx(t.Grow,{in:!0,children:e.jsx(t.Box,{sx:{display:"flex",alignItems:"center"},children:e.jsx(n.default,{name:"check",size:I})})})]})]})}):null};
|
|
@@ -10,7 +10,7 @@ interface TypographyProps extends Omit<TypographyProps$1, 'ref'> {
|
|
|
10
10
|
monospaced?: boolean;
|
|
11
11
|
sx?: SxProps<Theme>;
|
|
12
12
|
}
|
|
13
|
-
declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<
|
|
13
|
+
declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLParagraphElement | HTMLHeadingElement>>;
|
|
14
14
|
|
|
15
15
|
export { Typography as default };
|
|
16
16
|
export type { TypographyProps };
|
|
@@ -4,7 +4,7 @@ import { PaletteMode, Direction } from '@mui/material';
|
|
|
4
4
|
import { ScreenSize, CustomTheme } from './types.js';
|
|
5
5
|
|
|
6
6
|
declare const useThemeBuilder: (initialMode?: PaletteMode, initialScreenSize?: ScreenSize, initialDirection?: Direction) => {
|
|
7
|
-
breakpoint: "" | "sm" | "
|
|
7
|
+
breakpoint: "" | "sm" | "md" | "lg" | "xl";
|
|
8
8
|
custom: CustomTheme;
|
|
9
9
|
gridOverlayVisible: boolean;
|
|
10
10
|
mode: PaletteMode;
|