From 7da833f8236543c9943f89b80c48989c1feb6f27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Kag=CC=86an=20Yo=CC=88ru=CC=88k?= <47483182+KaganYrk@users.noreply.github.com> Date: Tue, 5 Mar 2024 16:40:38 +0300 Subject: [PATCH 1/2] Badge & avatar updated -badge: borderStyle to variant wraps children with children prop - Avatar: borderStyle to variant removed badge related props --- doc/docs/components/avatar.md | 13 ++--- doc/docs/components/badge.md | 6 +-- src/components/Avatar/Avatar.tsx | 42 +++++---------- src/components/Avatar/AvatarGroup.tsx | 7 +-- src/components/Badge/Badge.tsx | 75 ++++++++++++++++----------- src/types.ts | 15 ++---- 6 files changed, 73 insertions(+), 85 deletions(-) diff --git a/doc/docs/components/avatar.md b/doc/docs/components/avatar.md index cd448c4..0f07db0 100644 --- a/doc/docs/components/avatar.md +++ b/doc/docs/components/avatar.md @@ -20,10 +20,8 @@ import { View } from 'react-native'; const App = () => ( } source={{ uri: 'https://randomuser.me/api/portraits/men/62.jpg' }} /> @@ -38,16 +36,13 @@ export default App; |-----------------------|-------------------------------------------------|----------|--------------------------------------------------------------------------------------------| | size | 'small' \| 'medium' | No | The size of the avatar. Default value: ``'medium' `` | | source |[``ImageSourcePropType``](https://reactnative.dev/docs/image#imagesource)| No | Used to specify the image source. | -| borderStyle |'circular' \| 'rounded' | No | Specifies the border type of the avatar. Default value: ``'circular'``| +| variant |'circular' \| 'rounded' | No | Specifies the border type of the avatar. Default value: ``'circular'``| | avatarIcon |``React.ReactNode `` | No | Used to add icon to avatar. | | containerStyle |[``StyleProp``](https://reactnative.dev/docs/view-style-props)| No | Additional styles to apply to the avatar container. | | label |``string``| No | Represents the initials of the name to be written on the avatar. | | labelStyle |[``StyleProp``](https://reactnative.dev/docs/text-style-props)| No | Additional styles to apply to the label text. | -| badgePosition |'top' \| 'bottom'| No | Badge component location. | -| badgeStyle |``{ containerStyle?: StyleProp, textStyle?: StyleProp } `` | No | Additional styles to apply to the badge component.| -| badgeContent |``React.ReactNode `` | No | Additional content to apply to the badge component. | | theme |``UITheme `` | No | The theme to use for the component. | -| typography |``UITypography `` | No | The typography to use for the component. | +| typography |``UITypography ## Avatar Group @@ -88,7 +83,7 @@ export default App; | Prop name | Type | Required | Description | |-----------------------|-------------------------------------------------|----------|--------------------------------------------------------------------------------------------| -| avatarsType | ``Array<{``
`` source?: ImageSourcePropType,``
`` borderStyle?: 'circular' \| 'rounded',``
`` avatarIcon?: React.ReactNode,``
`` containerStyle?: StyleProp,``
`` label?: string,``
`` labelStyle?: StyleProp,``
`` badgePosition?: 'top' \| 'bottom',``
`` badgeStyle?: { containerStyle?: StyleProp,``
`` textStyle?: StyleProp }, ``
``badgeContent?: React.ReactNode ``
``}> ``| Yes | Takes avatar props into array. | +| avatarsType | ``Array<{``
`` source?: ImageSourcePropType,``
`` variant?: 'circular' \| 'rounded',``
`` avatarIcon?: React.ReactNode,``
`` containerStyle?: StyleProp,``
`` label?: string,``
`` labelStyle?: StyleProp,``
`` textStyle?: StyleProp }, ``
``}> ``| Yes | Takes avatar props into array. | | avatarLimit |``number`` | No | Limit of avatars to be listed. Default value: ``10`` | | limitContainerStyle |'circular' \| 'rounded' | No | Additional styles to apply to the limit container. | | theme |``UITheme `` | No | The theme to use for the component. | diff --git a/doc/docs/components/badge.md b/doc/docs/components/badge.md index 1f6b0a1..e309c40 100644 --- a/doc/docs/components/badge.md +++ b/doc/docs/components/badge.md @@ -21,8 +21,8 @@ import Badge from '../../components/Badge'; const App = () => ( - } /> - } /> + } /> + } /> ); @@ -65,7 +65,7 @@ export default App; | size | 'small' \| 'medium' | No | The size of the badge. Default value: ``'medium'`` | | containerStyle |[``StyleProp``](https://reactnative.dev/docs/view-style-props)| No | Additional styles to apply to the badge container. | | labelStyle |[``StyleProp``](https://reactnative.dev/docs/text-style-props)| No | Additional styles to apply to the children text. | -| borderStyle |'circular' \| 'rectangular' | No | Specifies the border type of the badge. Default value: ``'circular'`` | +| variant |'circular' \| 'rectangular' | No | Specifies the border type of the badge. Default value: ``'circular'`` | | icon |[``React.ReactNode``](https://reactnative.dev/docs/react-node) | No | Icon to be added to badge. | | children |[``React.ReactNode``](https://reactnative.dev/docs/react-node) | Yes | A required prop that represents the content to display within the Badge component. | | position |'top-right'\| 'top-left' \| 'bottom-left' \| 'bottom-right' | No | Position the Badge component. Default value: ``'top-right'`` | diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index 2d268dd..48ae35d 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -2,31 +2,35 @@ import { Image, View, Text } from 'react-native'; import type { AvatarProps, FCCWD } from '../../types'; import { applyDefaults } from '../../core/KitraProvider'; import OcticonsIcon from '../Icons/Octicons'; -import Badge from '../Badge/Badge'; const Avatar : FCCWD = ( { typography, theme, source, size = 'medium', - borderStyle, + variant, containerStyle, - badgeContent = 'circular', avatarIcon = , label, - labelStyle, - badgeStyle, - badgePosition }, + labelStyle }, ) => { const splitName = (string:string) => { const avatarText = string.trim().replace(/ {1,9}/g, ' ').split(' ').reduce((accumulator, currentValue:any) => accumulator.concat(currentValue[0]), ''); return avatarText; }; + const labelTypography = { + medium: { + ...typography?.heading.h2, + }, + small: { + ...typography?.body.smedium, + }, + }; return ( = ( {(() => { if (source) { return ( - + ); } if (label) { return ( - + {splitName(label)} @@ -53,23 +54,6 @@ const Avatar : FCCWD = ( avatarIcon ); })()} - {badgePosition && ( - - - - )} ); diff --git a/src/components/Avatar/AvatarGroup.tsx b/src/components/Avatar/AvatarGroup.tsx index 7d26da0..0d8cd05 100644 --- a/src/components/Avatar/AvatarGroup.tsx +++ b/src/components/Avatar/AvatarGroup.tsx @@ -27,14 +27,11 @@ const AvatarGroup: FCCWD = ( typography={typography} key={index} source={item?.source} - borderStyle={item?.borderStyle} + variant={item?.variant} avatarIcon={item?.avatarIcon} containerStyle={item?.containerStyle} size="small" label={item?.label} - badgePosition={item?.badgePosition} - badgeStyle={item?.badgeStyle} - badgeContent={item?.badgeContent} /> @@ -43,7 +40,7 @@ const AvatarGroup: FCCWD = ( = ( size = 'medium', containerStyle, textStyles, - borderStyle = 'circular', - icon }, -) => ( - - {visible ? ( - - {(() => { - if (label) { - return {label}; - } - if (icon) { - return icon; - } - return null; - })()} - - ) - : null + variant = 'circular', + icon, + badgePosition = 'bottomRight', + children }, +) => { + const [childSize, setChildSize] = useState({ width: 0, height: 0 }); + return ( + + {visible ? ( + + + {(() => { + if (label) { + return {label}; + } + if (icon) { + return icon; + } + return null; + })()} + + + ) + : null } - -); + setChildSize({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height })}> + {children} + + + ); +}; export default applyDefaults(Badge); diff --git a/src/types.ts b/src/types.ts index 8011dab..a041143 100644 --- a/src/types.ts +++ b/src/types.ts @@ -47,14 +47,11 @@ export type AccordionListProps = { export type AvatarGroupProps = { avatarsType: Array<{ source?: ImageSourcePropType, - borderStyle?: 'circular' | 'rounded', + variant?: 'circular' | 'rounded', avatarIcon?: React.ReactNode, containerStyle?: StyleProp, label?: string, labelStyle?: StyleProp, - badgePosition?: 'top' | 'bottom', - badgeStyle?: { containerStyle?: StyleProp, textStyle?: StyleProp }, - badgeContent?: React.ReactNode, }>, avatarLimit?: number, limitContainerStyle?: { style: StyleProp, backgroundColor: string } @@ -63,14 +60,11 @@ export type AvatarGroupProps = { export type AvatarProps = { size?: 'small' | 'medium', source?: ImageSourcePropType, - borderStyle?: 'circular' | 'rounded', + variant?: 'circular' | 'rounded', avatarIcon?: React.ReactNode, containerStyle?: StyleProp, label?: string, labelStyle?: StyleProp, - badgePosition?: 'top' | 'bottom', - badgeStyle?: { containerStyle?: StyleProp, textStyle?: StyleProp }, - badgeContent?: React.ReactNode, } export type BadgeProps = { @@ -79,8 +73,9 @@ export type BadgeProps = { size?: 'medium' | 'small', containerStyle?: StyleProp, textStyles?: StyleProp, - borderStyle?: 'circular' | 'rectangular' - icon?: React.ReactNode + variant?: 'circular' | 'rectangular' + icon?: React.ReactNode, + badgePosition: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft' } export type ButtonProps = { From e01b7c8e24bcd6c7a3b0b1f9b9bae4e5dbf9cdb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Kag=CC=86an=20Yo=CC=88ru=CC=88k?= <47483182+KaganYrk@users.noreply.github.com> Date: Tue, 5 Mar 2024 16:42:44 +0300 Subject: [PATCH 2/2] snapshots updated --- .../__snapshots__/avatar.test.js.snap | 1163 +---------------- .../__snapshots__/badge.test.js.snap | 528 ++++++-- 2 files changed, 428 insertions(+), 1263 deletions(-) diff --git a/src/components/__tests__/__snapshots__/avatar.test.js.snap b/src/components/__tests__/__snapshots__/avatar.test.js.snap index b5361db..2bcaa12 100644 --- a/src/components/__tests__/__snapshots__/avatar.test.js.snap +++ b/src/components/__tests__/__snapshots__/avatar.test.js.snap @@ -28,6 +28,9 @@ exports[` 1`] = ` [ { "color": "#8973CD", + }, + { + "fontFamily": "Poppins-Medium", "fontSize": 28, "lineHeight": 42, }, @@ -37,49 +40,6 @@ exports[` 1`] = ` > T - - - - circular - - - T - - - - circular - - - - - - - circular - - - - - - - circular - - - T - - - - -  - - - - T - - - - -  - - - - - - - - -  - - - - T - - - - circular - - - - - - - circular - - - @@ -1780,6 +1063,9 @@ exports[` 7`] = ` [ { "color": "#8973CD", + }, + { + "fontFamily": "Poppins-Medium", "fontSize": 12, "lineHeight": 18, }, @@ -1789,49 +1075,6 @@ exports[` 7`] = ` > T - - - - circular - - - T - - - - circular - - - T - - - - circular - - - T - - - - circular - - - T - - - - circular - - - T - - - - circular - - - - - - - circular - - - - - - - circular - - - T - - - - circular - - - + + + + `; exports[` 2`] = ` - + - -  - + +  + + + `; exports[` 3`] = ` - + - - Test label - + + Test label + + + `; exports[`Badge renders badge with borderStyle renders badge with circular borderStyle 1`] = ` - + + + + `; exports[`Badge renders badge with borderStyle renders badge with rectangular borderStyle 1`] = ` - + + + + `; exports[`Badge renders badge with borderStyle renders badge with rectangular borderStyle, small size 1`] = ` - + + + + `; exports[`Badge renders badge with different sizes renders badge with medium size 1`] = ` - + + + + `; exports[`Badge renders badge with different sizes renders badge with small size 1`] = ` - + + + + `;