diff --git a/library/src/components/Avatar.tsx b/library/src/components/Avatar.tsx index e8871bc8..a0e61c0b 100644 --- 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 - - ), - declined: ( - // cross icon from atlaskit - - ), - locked: ( - // lock icon from atlaskit - - ), + approved: , + declined: , + locked: , } as const -function FallbackAvatarIcon({ - className, - diameter, -}: { - className?: string - diameter: number -}) { - //return // I cannot resize this -> i extracted the svg element - return ( - - - - - - - ) -} - function PresenceIcon({ presence, size, @@ -209,22 +129,22 @@ function StatusIcon({ const translate = `translate(${translateX}, -${translateY})` return ( - {statusSVGs[status]} - + ) } @@ -319,7 +239,10 @@ export function Avatar({ {nameLetters ? ( nameLetters ) : ( - + + + + // )} {presenceElement} diff --git a/library/src/components/IconSizeHelper.tsx b/library/src/components/IconSizeHelper.tsx new file mode 100644 index 00000000..47752641 --- /dev/null +++ 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 ( +
+ {children} +
+ ) +} diff --git a/library/src/components/index.ts b/library/src/components/index.ts index bb26f0f2..9e9cdba6 100644 --- 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 index a575eb5b..ee0e600e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3512,30 +3512,30 @@ } }, "node_modules/@volar/language-core": { - "version": "1.10.4", - "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.4.tgz", - "integrity": "sha512-Na69qA6uwVIdA0rHuOc2W3pHtVQQO8hCNim7FOaKNpRJh0oAFnu5r9i7Oopo5C4cnELZkPNjTrbmpcCTiW+CMQ==", + "version": "1.10.5", + "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.5.tgz", + "integrity": "sha512-xD71j4Ee0Ycq8WsiAE6H/aCThGdTobiZZeD+jFD+bvmbopa1Az296pqJysr3Ck8c7n5+GGF+xlKCS3WxRFYgSQ==", "dev": true, "dependencies": { - "@volar/source-map": "1.10.4" + "@volar/source-map": "1.10.5" } }, "node_modules/@volar/source-map": { - "version": "1.10.4", - "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.10.4.tgz", - "integrity": "sha512-RxZdUEL+pV8p+SMqnhVjzy5zpb1QRZTlcwSk4bdcBO7yOu4rtEWqDGahVCEj4CcXour+0yJUMrMczfSCpP9Uxg==", + "version": "1.10.5", + "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.10.5.tgz", + "integrity": "sha512-s4kgo66SA1kMzYvF9HFE6Vc1rxtXLUmcLrT2WKnchPDvLne+97Kw+xoR2NxJFmsvHoL18vmu/YGXYcN+Q5re1g==", "dev": true, "dependencies": { "muggle-string": "^0.3.1" } }, "node_modules/@volar/typescript": { - "version": "1.10.4", - "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.10.4.tgz", - "integrity": "sha512-BCCUEBASBEMCrz7qmNSi2hBEWYsXD0doaktRKpmmhvb6XntM2sAWYu6gbyK/MluLDgluGLFiFRpWgobgzUqolg==", + "version": "1.10.5", + "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.10.5.tgz", + "integrity": "sha512-kfDehpeLJku9i1BgsFOYIczPmFFH4herl+GZrLGdvX5urTqeCKsKYlF36iNmFaADzjMb9WlENcUZzPjK8MxNrQ==", "dev": true, "dependencies": { - "@volar/language-core": "1.10.4" + "@volar/language-core": "1.10.5" } }, "node_modules/@vue/compiler-core": { diff --git a/showcase/public/index-old.html b/showcase/public/index-old.html deleted file mode 100644 index f47af759..00000000 --- a/showcase/public/index-old.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - - - - - UI-Kit-TS - - - -
- - - diff --git a/showcase/public/showcase-sources.txt b/showcase/public/showcase-sources.txt index 732d88c8..bc6f8b27 100644 --- a/showcase/public/showcase-sources.txt +++ b/showcase/public/showcase-sources.txt @@ -6,7 +6,7 @@ import Avatar, { AvatarItem } from "@atlaskit/avatar" import { Avatar as LPAvatar, AvatarItem as LPAvatarItem, -} from "@linked-planet/ui-kit-ts/components/Avatar" +} from "@linked-planet/ui-kit-ts" function AvatarShowcase(props: ShowcaseProps) { //#region avatar1 @@ -156,18 +156,18 @@ function AvatarShowcase(props: ShowcaseProps) { {...props} packages={[ { - name: "@atlaskit/avatar", - url: "https://atlassian.design/components/avatar/examples", + name: "@linked-planet/ui-kit-ts", + url: "https://linked-planet.github.io/ui-kit-ts/single#Avatars", }, ]} examples={[ { - title: "Example 1", + title: "Avatar", example: example1, sourceCodeExampleId: "avatar1", }, { - title: "Example 2", + title: "AvatarItem", example: example2, sourceCodeExampleId: "avatar2", }, @@ -1838,6 +1838,56 @@ import ShowcaseWrapperItem, { ShowcaseProps, } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem" +import { IconSizeHelper } from "@linked-planet/ui-kit-ts" + +import AddItemIcon from "@atlaskit/icon/glyph/add-item" + +export default function IconSizeHelperShowcase(props: ShowcaseProps) { + //#region iconsizehelper + const example = ( + <> + + + + + + + + ) + //#endregion iconsizehelper + + return ( + + ) +} + +import React from "react" +import ShowcaseWrapperItem, { + ShowcaseProps, +} from "../../ShowCaseWrapperItem/ShowcaseWrapperItem" + import { InlineMessage } from "@linked-planet/ui-kit-ts" export default function InlineMessageShowcase(props: ShowcaseProps) { @@ -4106,11 +4156,11 @@ function TooltipShowcase(props: ShowcaseProps) { //#region tooltip // import 'react-tooltip/dist/react-tooltip.css' const example = ( -
-
+
+
- + I'm a tooltip...
diff --git a/showcase/src/components/showcase/wrapper/AvatarShowcase.tsx b/showcase/src/components/showcase/wrapper/AvatarShowcase.tsx index 8dbbcc92..9ebc1566 100644 --- a/showcase/src/components/showcase/wrapper/AvatarShowcase.tsx +++ b/showcase/src/components/showcase/wrapper/AvatarShowcase.tsx @@ -6,7 +6,7 @@ import Avatar, { AvatarItem } from "@atlaskit/avatar" import { Avatar as LPAvatar, AvatarItem as LPAvatarItem, -} from "@linked-planet/ui-kit-ts/components/Avatar" +} from "@linked-planet/ui-kit-ts" function AvatarShowcase(props: ShowcaseProps) { //#region avatar1 @@ -156,18 +156,18 @@ function AvatarShowcase(props: ShowcaseProps) { {...props} packages={[ { - name: "@atlaskit/avatar", - url: "https://atlassian.design/components/avatar/examples", + name: "@linked-planet/ui-kit-ts", + url: "https://linked-planet.github.io/ui-kit-ts/single#Avatars", }, ]} examples={[ { - title: "Example 1", + title: "Avatar", example: example1, sourceCodeExampleId: "avatar1", }, { - title: "Example 2", + title: "AvatarItem", example: example2, sourceCodeExampleId: "avatar2", }, diff --git a/showcase/src/components/showcase/wrapper/IconSizeHelperShowcase.tsx b/showcase/src/components/showcase/wrapper/IconSizeHelperShowcase.tsx new file mode 100644 index 00000000..2852f6ab --- /dev/null +++ b/showcase/src/components/showcase/wrapper/IconSizeHelperShowcase.tsx @@ -0,0 +1,49 @@ +import React from "react" +import ShowcaseWrapperItem, { + ShowcaseProps, +} from "../../ShowCaseWrapperItem/ShowcaseWrapperItem" + +import { IconSizeHelper } from "@linked-planet/ui-kit-ts" + +import AddItemIcon from "@atlaskit/icon/glyph/add-item" + +export default function IconSizeHelperShowcase(props: ShowcaseProps) { + //#region iconsizehelper + const example = ( + <> + + + + + + + + ) + //#endregion iconsizehelper + + return ( + + ) +} diff --git a/showcase/src/components/showcase/wrapper/UtilsShowCase.tsx b/showcase/src/components/showcase/wrapper/UtilsShowcase.tsx similarity index 100% rename from showcase/src/components/showcase/wrapper/UtilsShowCase.tsx rename to showcase/src/components/showcase/wrapper/UtilsShowcase.tsx diff --git a/showcase/src/useShowcases.tsx b/showcase/src/useShowcases.tsx index 92c75bed..cc8e675e 100644 --- a/showcase/src/useShowcases.tsx +++ b/showcase/src/useShowcases.tsx @@ -36,7 +36,8 @@ import TextFieldShowcase from "./components/showcase/wrapper/TextFieldShowcase" import ToastFlagShowcase from "./components/showcase/wrapper/ToastFlagShowcase" import ToggleShowcase from "./components/showcase/wrapper/ToggleShowcase" import TooltipShowcase from "./components/showcase/wrapper/TooltipShowcase" -import UtilsShowCase from "./components/showcase/wrapper/UtilsShowCase" +import UtilsShowcase from "./components/showcase/wrapper/UtilsShowcase" +import IconSizeHelperShowcase from "./components/showcase/wrapper/IconSizeHelperShowcase" export default function useShowcases({ overallSourceCode, @@ -84,6 +85,9 @@ export default function useShowcases({ Flag: , Form: , Icon: , + "Icon Size Helper": ( + + ), Joyride: , "Inline Message": ( @@ -125,7 +129,7 @@ export default function useShowcases({ ), Toggle: , Tooltip: , - Utils: , + Utils: , }), [overallSourceCode], )