@amboss/design-system 4.0.0-next.2 → 4.0.0-next.3
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { AvatarProps } from "../Avatar/Avatar";
|
|
3
2
|
import type { ConditionalAccessibleName } from "src/types/a11y";
|
|
3
|
+
import type { AvatarProps } from "../Avatar/Avatar";
|
|
4
4
|
export type AvatarGroupProps = ConditionalAccessibleName & {
|
|
5
5
|
labels: string[] | AvatarProps[];
|
|
6
6
|
/** Maximum number of avatars to display before showing overflow counter */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"AvatarGroup",{enumerable:!0,get:function(){return AvatarGroup}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Avatar=require("../Avatar/Avatar"),_Text=require("../Typography/Text"),_Inline=require("../Inline/Inline"),AvatarWrapper=(0,_styled.default)("div",{target:"
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"AvatarGroup",{enumerable:!0,get:function(){return AvatarGroup}});const _interop_require_default=require("@swc/helpers/_/_interop_require_default"),_react=/*#__PURE__*/_interop_require_default._(require("react")),_styled=/*#__PURE__*/_interop_require_default._(require("@emotion/styled")),_Avatar=require("../Avatar/Avatar"),_Text=require("../Typography/Text"),_Inline=require("../Inline/Inline"),AvatarWrapper=(0,_styled.default)("div",{target:"e2jym4l0",label:"AvatarWrapper"})(({theme,isLastitem})=>({outline:`2px solid ${theme.values.color.avatar.border.default}`,borderRadius:theme.variables.size.borderRadius.full,...!isLastitem&&{marginRight:`-${theme.variables.size.spacing.xxxs}`},"&:hover, &:focus-within":{position:"relative",zIndex:1}}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvQXZhdGFyR3JvdXAvQXZhdGFyR3JvdXAudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9BdmF0YXJHcm91cC9BdmF0YXJHcm91cC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgdHlwZSB7IENvbmRpdGlvbmFsQWNjZXNzaWJsZU5hbWUgfSBmcm9tIFwic3JjL3R5cGVzL2ExMXlcIjtcbmltcG9ydCB0eXBlIHsgQXZhdGFyUHJvcHMgfSBmcm9tIFwiLi4vQXZhdGFyL0F2YXRhclwiO1xuaW1wb3J0IHsgQXZhdGFyLCBBVkFUQVJfQ09MT1JTIH0gZnJvbSBcIi4uL0F2YXRhci9BdmF0YXJcIjtcbmltcG9ydCB7IFRleHQgfSBmcm9tIFwiLi4vVHlwb2dyYXBoeS9UZXh0XCI7XG5pbXBvcnQgeyBJbmxpbmUgfSBmcm9tIFwiLi4vSW5saW5lL0lubGluZVwiO1xuXG5leHBvcnQgdHlwZSBBdmF0YXJHcm91cFByb3BzID0gQ29uZGl0aW9uYWxBY2Nlc3NpYmxlTmFtZSAmIHtcbiAgbGFiZWxzOiBzdHJpbmdbXSB8IEF2YXRhclByb3BzW107XG4gIC8qKiBNYXhpbXVtIG51bWJlciBvZiBhdmF0YXJzIHRvIGRpc3BsYXkgYmVmb3JlIHNob3dpbmcgb3ZlcmZsb3cgY291bnRlciAqL1xuICBtYXhDb3VudD86IG51bWJlcjtcbiAgc2hvd0NvdW50PzogYm9vbGVhbjtcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG59O1xuXG50eXBlIEF2YXRhcldyYXBwZXJQcm9wcyA9IHtcbiAgaXNMYXN0aXRlbT86IGJvb2xlYW47XG59O1xuXG5jb25zdCBBdmF0YXJXcmFwcGVyID0gc3R5bGVkLmRpdjxBdmF0YXJXcmFwcGVyUHJvcHM+KFxuICAoeyB0aGVtZSwgaXNMYXN0aXRlbSB9KSA9PiAoe1xuICAgIG91dGxpbmU6IGAycHggc29saWQgJHt0aGVtZS52YWx1ZXMuY29sb3IuYXZhdGFyLmJvcmRlci5kZWZhdWx0fWAsXG4gICAgYm9yZGVyUmFkaXVzOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5ib3JkZXJSYWRpdXMuZnVsbCxcblxuICAgIC4uLighaXNMYXN0aXRlbSAmJiB7XG4gICAgICBtYXJnaW5SaWdodDogYC0ke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHh4c31gLFxuICAgIH0pLFxuXG4gICAgXCImOmhvdmVyLCAmOmZvY3VzLXdpdGhpblwiOiB7XG4gICAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgICAgekluZGV4OiAxLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgZnVuY3Rpb24gQXZhdGFyR3JvdXAoe1xuICBsYWJlbHMsXG4gIG1heENvdW50ID0gNSxcbiAgc2hvd0NvdW50LFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbiAgLi4uYXJpYUF0dHJpYnV0ZXNcbn06IEF2YXRhckdyb3VwUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCBpdGVtcyA9IGxhYmVscyBhcyAoc3RyaW5nIHwgQXZhdGFyUHJvcHMpW107XG4gIGNvbnN0IHZpc2libGVJdGVtcyA9IGl0ZW1zLnNsaWNlKDAsIG1heENvdW50KTtcbiAgY29uc3QgcmVtYWluaW5nQ291bnQgPSBpdGVtcy5sZW5ndGggLSB2aXNpYmxlSXRlbXMubGVuZ3RoO1xuXG4gIHJldHVybiAoXG4gICAgPElubGluZVxuICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAgIGRhdGEtZHMtaWQ9XCJBdmF0YXJHcm91cFwiXG4gICAgICB2QWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICBzcGFjZT1cInh4c1wiXG4gICAgICB7Li4uYXJpYUF0dHJpYnV0ZXN9XG4gICAgPlxuICAgICAgPElubGluZSBzcGFjZT1cInplcm9cIiBhcz1cInVsXCIgcm9sZT1cImxpc3RcIj5cbiAgICAgICAge3Zpc2libGVJdGVtcy5tYXAoKGl0ZW0sIGluZGV4KSA9PiB7XG4gICAgICAgICAgY29uc3QgZmFsbGJhY2tDb2xvciA9IEFWQVRBUl9DT0xPUlNbaW5kZXggJSBBVkFUQVJfQ09MT1JTLmxlbmd0aF07XG4gICAgICAgICAgY29uc3QgYXZhdGFyUHJvcHM6IEF2YXRhclByb3BzID1cbiAgICAgICAgICAgIHR5cGVvZiBpdGVtID09PSBcInN0cmluZ1wiXG4gICAgICAgICAgICAgID8geyBsYWJlbDogaXRlbSwgY29sb3I6IGZhbGxiYWNrQ29sb3IgfVxuICAgICAgICAgICAgICA6IHsgLi4uaXRlbSwgY29sb3I6IGl0ZW0uY29sb3IgPz8gZmFsbGJhY2tDb2xvciB9O1xuICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8QXZhdGFyV3JhcHBlclxuICAgICAgICAgICAgICBrZXk9e2F2YXRhclByb3BzLmxhYmVsfVxuICAgICAgICAgICAgICBpc0xhc3RpdGVtPXtpbmRleCA9PT0gdmlzaWJsZUl0ZW1zLmxlbmd0aCAtIDF9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxBdmF0YXIgey4uLmF2YXRhclByb3BzfSAvPlxuICAgICAgICAgICAgPC9BdmF0YXJXcmFwcGVyPlxuICAgICAgICAgICk7XG4gICAgICAgIH0pfVxuICAgICAgPC9JbmxpbmU+XG4gICAgICB7c2hvd0NvdW50ICYmIHJlbWFpbmluZ0NvdW50ID4gMCAmJiAoXG4gICAgICAgIDxUZXh0IHVzZXJTZWxlY3Q9XCJub25lXCIgc2l6ZT1cInNcIiBhcz1cInNwYW5cIj5cbiAgICAgICAgICAre3JlbWFpbmluZ0NvdW50fVxuICAgICAgICA8L1RleHQ+XG4gICAgICApfVxuICAgIDwvSW5saW5lPlxuICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9Cc0IifQ== */");function AvatarGroup({labels,maxCount=5,showCount,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let visibleItems=labels.slice(0,maxCount),remainingCount=labels.length-visibleItems.length;return _react.default.createElement(_Inline.Inline,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"AvatarGroup",vAlignItems:"center",space:"xxs",...ariaAttributes},_react.default.createElement(_Inline.Inline,{space:"zero",as:"ul",role:"list"},visibleItems.map((item,index)=>{let fallbackColor=_Avatar.AVATAR_COLORS[index%_Avatar.AVATAR_COLORS.length],avatarProps="string"==typeof item?{label:item,color:fallbackColor}:{...item,color:item.color??fallbackColor};return _react.default.createElement(AvatarWrapper,{key:avatarProps.label,isLastitem:index===visibleItems.length-1},_react.default.createElement(_Avatar.Avatar,avatarProps))})),showCount&&remainingCount>0&&_react.default.createElement(_Text.Text,{userSelect:"none",size:"s",as:"span"},"+",remainingCount))}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { AvatarProps } from "../Avatar/Avatar";
|
|
3
2
|
import type { ConditionalAccessibleName } from "src/types/a11y";
|
|
3
|
+
import type { AvatarProps } from "../Avatar/Avatar";
|
|
4
4
|
export type AvatarGroupProps = ConditionalAccessibleName & {
|
|
5
5
|
labels: string[] | AvatarProps[];
|
|
6
6
|
/** Maximum number of avatars to display before showing overflow counter */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import styled from"@emotion/styled";import{Avatar,AVATAR_COLORS}from"../Avatar/Avatar";import{Text}from"../Typography/Text";import{Inline}from"../Inline/Inline";let AvatarWrapper=styled("div",{target:"
|
|
1
|
+
import React from"react";import styled from"@emotion/styled";import{Avatar,AVATAR_COLORS}from"../Avatar/Avatar";import{Text}from"../Typography/Text";import{Inline}from"../Inline/Inline";let AvatarWrapper=styled("div",{target:"e2jym4l0",label:"AvatarWrapper"})(({theme,isLastitem})=>({outline:`2px solid ${theme.values.color.avatar.border.default}`,borderRadius:theme.variables.size.borderRadius.full,...!isLastitem&&{marginRight:`-${theme.variables.size.spacing.xxxs}`},"&:hover, &:focus-within":{position:"relative",zIndex:1}}),"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvQXZhdGFyR3JvdXAvQXZhdGFyR3JvdXAudHN4Iiwic291cmNlcyI6WyJzcmMvY29tcG9uZW50cy9BdmF0YXJHcm91cC9BdmF0YXJHcm91cC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgdHlwZSB7IENvbmRpdGlvbmFsQWNjZXNzaWJsZU5hbWUgfSBmcm9tIFwic3JjL3R5cGVzL2ExMXlcIjtcbmltcG9ydCB0eXBlIHsgQXZhdGFyUHJvcHMgfSBmcm9tIFwiLi4vQXZhdGFyL0F2YXRhclwiO1xuaW1wb3J0IHsgQXZhdGFyLCBBVkFUQVJfQ09MT1JTIH0gZnJvbSBcIi4uL0F2YXRhci9BdmF0YXJcIjtcbmltcG9ydCB7IFRleHQgfSBmcm9tIFwiLi4vVHlwb2dyYXBoeS9UZXh0XCI7XG5pbXBvcnQgeyBJbmxpbmUgfSBmcm9tIFwiLi4vSW5saW5lL0lubGluZVwiO1xuXG5leHBvcnQgdHlwZSBBdmF0YXJHcm91cFByb3BzID0gQ29uZGl0aW9uYWxBY2Nlc3NpYmxlTmFtZSAmIHtcbiAgbGFiZWxzOiBzdHJpbmdbXSB8IEF2YXRhclByb3BzW107XG4gIC8qKiBNYXhpbXVtIG51bWJlciBvZiBhdmF0YXJzIHRvIGRpc3BsYXkgYmVmb3JlIHNob3dpbmcgb3ZlcmZsb3cgY291bnRlciAqL1xuICBtYXhDb3VudD86IG51bWJlcjtcbiAgc2hvd0NvdW50PzogYm9vbGVhbjtcbiAgXCJkYXRhLWUyZS10ZXN0LWlkXCI/OiBzdHJpbmc7XG59O1xuXG50eXBlIEF2YXRhcldyYXBwZXJQcm9wcyA9IHtcbiAgaXNMYXN0aXRlbT86IGJvb2xlYW47XG59O1xuXG5jb25zdCBBdmF0YXJXcmFwcGVyID0gc3R5bGVkLmRpdjxBdmF0YXJXcmFwcGVyUHJvcHM+KFxuICAoeyB0aGVtZSwgaXNMYXN0aXRlbSB9KSA9PiAoe1xuICAgIG91dGxpbmU6IGAycHggc29saWQgJHt0aGVtZS52YWx1ZXMuY29sb3IuYXZhdGFyLmJvcmRlci5kZWZhdWx0fWAsXG4gICAgYm9yZGVyUmFkaXVzOiB0aGVtZS52YXJpYWJsZXMuc2l6ZS5ib3JkZXJSYWRpdXMuZnVsbCxcblxuICAgIC4uLighaXNMYXN0aXRlbSAmJiB7XG4gICAgICBtYXJnaW5SaWdodDogYC0ke3RoZW1lLnZhcmlhYmxlcy5zaXplLnNwYWNpbmcueHh4c31gLFxuICAgIH0pLFxuXG4gICAgXCImOmhvdmVyLCAmOmZvY3VzLXdpdGhpblwiOiB7XG4gICAgICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICAgICAgekluZGV4OiAxLFxuICAgIH0sXG4gIH0pXG4pO1xuXG5leHBvcnQgZnVuY3Rpb24gQXZhdGFyR3JvdXAoe1xuICBsYWJlbHMsXG4gIG1heENvdW50ID0gNSxcbiAgc2hvd0NvdW50LFxuICBcImRhdGEtZTJlLXRlc3QtaWRcIjogZGF0YUUyZVRlc3RJZCxcbiAgLi4uYXJpYUF0dHJpYnV0ZXNcbn06IEF2YXRhckdyb3VwUHJvcHMpOiBSZWFjdC5SZWFjdEVsZW1lbnQge1xuICBjb25zdCBpdGVtcyA9IGxhYmVscyBhcyAoc3RyaW5nIHwgQXZhdGFyUHJvcHMpW107XG4gIGNvbnN0IHZpc2libGVJdGVtcyA9IGl0ZW1zLnNsaWNlKDAsIG1heENvdW50KTtcbiAgY29uc3QgcmVtYWluaW5nQ291bnQgPSBpdGVtcy5sZW5ndGggLSB2aXNpYmxlSXRlbXMubGVuZ3RoO1xuXG4gIHJldHVybiAoXG4gICAgPElubGluZVxuICAgICAgZGF0YS1lMmUtdGVzdC1pZD17ZGF0YUUyZVRlc3RJZH1cbiAgICAgIGRhdGEtZHMtaWQ9XCJBdmF0YXJHcm91cFwiXG4gICAgICB2QWxpZ25JdGVtcz1cImNlbnRlclwiXG4gICAgICBzcGFjZT1cInh4c1wiXG4gICAgICB7Li4uYXJpYUF0dHJpYnV0ZXN9XG4gICAgPlxuICAgICAgPElubGluZSBzcGFjZT1cInplcm9cIiBhcz1cInVsXCIgcm9sZT1cImxpc3RcIj5cbiAgICAgICAge3Zpc2libGVJdGVtcy5tYXAoKGl0ZW0sIGluZGV4KSA9PiB7XG4gICAgICAgICAgY29uc3QgZmFsbGJhY2tDb2xvciA9IEFWQVRBUl9DT0xPUlNbaW5kZXggJSBBVkFUQVJfQ09MT1JTLmxlbmd0aF07XG4gICAgICAgICAgY29uc3QgYXZhdGFyUHJvcHM6IEF2YXRhclByb3BzID1cbiAgICAgICAgICAgIHR5cGVvZiBpdGVtID09PSBcInN0cmluZ1wiXG4gICAgICAgICAgICAgID8geyBsYWJlbDogaXRlbSwgY29sb3I6IGZhbGxiYWNrQ29sb3IgfVxuICAgICAgICAgICAgICA6IHsgLi4uaXRlbSwgY29sb3I6IGl0ZW0uY29sb3IgPz8gZmFsbGJhY2tDb2xvciB9O1xuICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8QXZhdGFyV3JhcHBlclxuICAgICAgICAgICAgICBrZXk9e2F2YXRhclByb3BzLmxhYmVsfVxuICAgICAgICAgICAgICBpc0xhc3RpdGVtPXtpbmRleCA9PT0gdmlzaWJsZUl0ZW1zLmxlbmd0aCAtIDF9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxBdmF0YXIgey4uLmF2YXRhclByb3BzfSAvPlxuICAgICAgICAgICAgPC9BdmF0YXJXcmFwcGVyPlxuICAgICAgICAgICk7XG4gICAgICAgIH0pfVxuICAgICAgPC9JbmxpbmU+XG4gICAgICB7c2hvd0NvdW50ICYmIHJlbWFpbmluZ0NvdW50ID4gMCAmJiAoXG4gICAgICAgIDxUZXh0IHVzZXJTZWxlY3Q9XCJub25lXCIgc2l6ZT1cInNcIiBhcz1cInNwYW5cIj5cbiAgICAgICAgICAre3JlbWFpbmluZ0NvdW50fVxuICAgICAgICA8L1RleHQ+XG4gICAgICApfVxuICAgIDwvSW5saW5lPlxuICApO1xufVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9Cc0IifQ== */");export function AvatarGroup({labels,maxCount=5,showCount,"data-e2e-test-id":dataE2eTestId,...ariaAttributes}){let visibleItems=labels.slice(0,maxCount),remainingCount=labels.length-visibleItems.length;return React.createElement(Inline,{"data-e2e-test-id":dataE2eTestId,"data-ds-id":"AvatarGroup",vAlignItems:"center",space:"xxs",...ariaAttributes},React.createElement(Inline,{space:"zero",as:"ul",role:"list"},visibleItems.map((item,index)=>{let fallbackColor=AVATAR_COLORS[index%AVATAR_COLORS.length],avatarProps="string"==typeof item?{label:item,color:fallbackColor}:{...item,color:item.color??fallbackColor};return React.createElement(AvatarWrapper,{key:avatarProps.label,isLastitem:index===visibleItems.length-1},React.createElement(Avatar,avatarProps))})),showCount&&remainingCount>0&&React.createElement(Text,{userSelect:"none",size:"s",as:"span"},"+",remainingCount))}
|