Avatars now use IconSizeHelper, added IconSizeHelper and Avatar/Avata…

…rItem to the lib exports, and show case menus
linked-planet · Oct 25, 2023 · b039f74 · b039f74
1 parent a56399d
commit b039f74
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 169 deletions.
diff --git a/library/src/components/Avatar.tsx b/library/src/components/Avatar.tsx
@@ -2,6 +2,13 @@ import React from "react"
 import * as RAvatar from "@radix-ui/react-avatar"
 import { twMerge } from "tailwind-merge"
 
+import LockFilledIcon from "@atlaskit/icon/glyph/lock-filled"
+import CrossIcon from "@atlaskit/icon/glyph/cross"
+import CheckIcon from "@atlaskit/icon/glyph/check"
+import PersonIcon from "@atlaskit/icon/glyph/person"
+
+import { IconSizeHelper } from "./IconSizeHelper"
+
 type AvatarProps = {
 	src?: string
 	name?: string
@@ -28,11 +35,11 @@ const sizes = {
 } as const
 
 const presenceStatusSizes = {
-	xsmall: 8,
-	small: 12,
-	medium: 14,
-	large: 15,
-	xlarge: 15,
+	xsmall: 10,
+	small: 14,
+	medium: 16,
+	large: 16,
+	xlarge: 16,
 	xxlarge: 20,
 } as const
 
@@ -50,98 +57,11 @@ const statusStyles = {
 } as const
 
 const statusSVGs = {
-	approved: (
-		// check icon from atlaskit
-		<svg
-			aria-hidden="true"
-			height="100%"
-			version="1.1"
-			viewBox="0 0 8 8"
-			width="100%"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<circle
-				fill="var(--ds-icon-success, #00875A)"
-				cx="4"
-				cy="4"
-				r="4"
-			></circle>
-			<path
-				fill="var(--ds-surface-overlay, #FFFFFF)"
-				d="M2.47140452,3.52859548 C2.21105499,3.26824595 1.78894501,3.26824595 1.52859548,3.52859548 C1.26824595,3.78894501 1.26824595,4.21105499 1.52859548,4.47140452 L2.86192881,5.80473785 C3.12227834,6.06508738 3.54438833,6.06508738 3.80473785,5.80473785 L6.47140452,3.13807119 C6.73175405,2.87772166 6.73175405,2.45561167 6.47140452,2.19526215 C6.21105499,1.93491262 5.78894501,1.93491262 5.52859548,2.19526215 L3.33333333,4.39052429 L2.47140452,3.52859548 Z"
-			></path>
-		</svg>
-	),
-	declined: (
-		// cross icon from atlaskit
-		<svg
-			aria-hidden="true"
-			height="100%"
-			version="1.1"
-			viewBox="0 0 8 8"
-			width="100%"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<circle
-				fill="var(--ds-icon-danger, #DE350B)"
-				cx="4"
-				cy="4"
-				r="4"
-			></circle>
-			<path
-				fill="var(--ds-surface-overlay, #FFFFFF)"
-				d="M4.890661,4.0088336 L5.81806461,3.07802178 C6.06167933,2.83351177 6.06048933,2.43826992 5.81540668,2.19522442 C5.57032402,1.95217891 5.17415651,1.95336612 4.93054179,2.19787613 L4.00765946,3.12415007 L3.06906871,2.18377143 C2.82523777,1.93947602 2.42906937,1.93863765 2.18420182,2.18189887 C1.93933427,2.42516008 1.93849394,2.82040282 2.18232488,3.06469822 L3.12544091,4.00961077 L2.20275024,4.93569234 C1.95913552,5.18020236 1.96032551,5.5754442 2.20540817,5.81848971 C2.45049083,6.06153521 2.84665833,6.060348 3.09027306,5.81583799 L4.00844245,4.89429431 L4.9092123,5.79678001 C5.15304324,6.04107541 5.54921164,6.04191379 5.79407919,5.79865257 C6.03894674,5.55539135 6.03978708,5.16014862 5.79595614,4.91585321 L4.890661,4.0088336 Z"
-			></path>
-		</svg>
-	),
-	locked: (
-		// lock icon from atlaskit
-		<svg
-			aria-hidden="true"
-			height="100%"
-			version="1.1"
-			viewBox="0 0 8 8"
-			width="100%"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<circle
-				fill="var(--ds-text-subtlest, #DFE1E6)"
-				cx="4"
-				cy="4"
-				r="4"
-			></circle>
-			<path
-				fill="var(--ds-surface-overlay, #42526E)"
-				d="M4.13074827,1.21766493 L4.10368158,1.21766493 C3.36340745,1.21766493 2.76388015,1.80793503 2.76388015,2.5367787 L2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,2.54344089 C3.44054754,2.17901906 3.74031119,1.88388401 4.11044825,1.88388401 L4.1239816,1.88388401 C4.49411866,1.88388401 4.79388232,2.17901906 4.79388232,2.54344089 L4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,2.5367787 C5.47054971,1.80793503 4.8710224,1.21766493 4.13074827,1.21766493 M2.76388015,3.21632216 L3.44054754,3.21632216 L3.44054754,3.88254123 L2.76388015,3.88254123 L2.76388015,3.21632216 Z M4.79388232,3.21632216 L5.47054971,3.21632216 L5.47054971,3.88254123 L4.79388232,3.88254123 L4.79388232,3.21632216 Z M4.79401765,3.88254123 L3.44068287,3.88254123 L2.76401548,3.88254123 C2.39049508,3.88254123 2.08734809,4.18100738 2.08734809,4.54876031 L2.08734809,5.54808892 C2.08734809,6.10000287 2.53735205,6.54741753 3.09094491,6.54741753 L5.14375561,6.54741753 C5.69802683,6.54741753 6.14735243,6.10385072 6.14735243,5.54808892 L6.14735243,4.54876031 C6.14735243,4.18100738 5.84420544,3.88254123 5.47068504,3.88254123 L4.79401765,3.88254123 Z"
-			></path>
-		</svg>
-	),
+	approved: <CheckIcon label="approved" size="small" />,
+	declined: <CrossIcon label="declined" size="small" />,
+	locked: <LockFilledIcon label="locked" size="small" />,
 } as const
 
-function FallbackAvatarIcon({
-	className,
-	diameter,
-}: {
-	className?: string
-	diameter: number
-}) {
-	//return <PersonIcon label="fallback avatar icon" /> // I cannot resize this -> i extracted the svg element
-	return (
-		<svg
-			width={`${diameter}`}
-			height={`${diameter}`}
-			viewBox="0 0 24 24"
-			role="presentation"
-			className={className}
-		>
-			<g fill="currentColor" fillRule="evenodd">
-				<path d="M6 14c0-1.105.902-2 2.009-2h7.982c1.11 0 2.009.894 2.009 2.006v4.44c0 3.405-12 3.405-12 0V14z"></path>
-				<circle cx="12" cy="7" r="4"></circle>
-			</g>
-		</svg>
-	)
-}
-
 function PresenceIcon({
 	presence,
 	size,
@@ -209,22 +129,22 @@ function StatusIcon({
 	const translate = `translate(${translateX}, -${translateY})`
 
 	return (
-		<span
+		<IconSizeHelper
+			size={diameter - 4}
 			aria-label={status}
-			role="status"
 			className={twMerge(
 				"border-surface-overlay absolute flex flex-none items-center justify-center rounded-full border-2",
 				statusStyles[status],
 				className,
 			)}
 			style={{
+				transform: translate,
 				width: diameter,
 				height: diameter,
-				transform: translate,
 			}}
 		>
 			{statusSVGs[status]}
-		</span>
+		</IconSizeHelper>
 	)
 }
 
@@ -319,7 +239,10 @@ export function Avatar({
 				{nameLetters ? (
 					nameLetters
 				) : (
-					<FallbackAvatarIcon diameter={diameter} />
+					<IconSizeHelper size={diameter}>
+						<PersonIcon label="fallback avatar icon" />
+					</IconSizeHelper>
+					//<FallbackAvatarIcon diameter={diameter} />
 				)}
 			</RAvatar.Fallback>
 			{presenceElement}

diff --git a/library/src/components/IconSizeHelper.tsx b/library/src/components/IconSizeHelper.tsx
@@ -0,0 +1,40 @@
+import React, { ComponentPropsWithoutRef } from "react"
+import { css } from "@emotion/css"
+import { twMerge } from "tailwind-merge"
+
+/**
+ * IconSizeHelper helps to set a size for an icon.
+ * It can size spans, svgs and spans with svgs inside.
+ */
+export function IconSizeHelper({
+	size,
+	children,
+	style,
+	className,
+	...props
+}: {
+	size: number | string
+} & ComponentPropsWithoutRef<"div">) {
+	const sizeProp = typeof size === "number" ? size + "px" : size
+	const sizeHelperClass = css`
+		width: ${sizeProp};
+		height: ${sizeProp};
+
+		span,
+		svg,
+		span svg {
+			width: ${sizeProp};
+			height: ${sizeProp};
+		}
+	`
+
+	return (
+		<div
+			className={twMerge(sizeHelperClass, "flex-none", className)}
+			style={style}
+			{...props}
+		>
+			{children}
+		</div>
+	)
+}
diff --git a/library/src/components/index.ts b/library/src/components/index.ts
@@ -8,3 +8,5 @@ export * from "./BookCard"
 export * from "./ToastFlag"
 export * from "./Flag"
 export * from "./Button"
+export * from "./Avatar"
+export * from "./IconSizeHelper"
diff --git a/package-lock.json b/package-lock.json
diff --git a/showcase/public/index-old.html b/showcase/public/index-old.html