From 268a90479a0fbc7f3009f2367b02900ff33d631a Mon Sep 17 00:00:00 2001 From: Carlos Lima Date: Wed, 22 Feb 2023 18:55:14 -0300 Subject: [PATCH 1/2] Converting Loading Inline kit to Typescrit --- .../pb_loading_inline/_loading_inline.jsx | 37 ------------ .../pb_loading_inline/_loading_inline.tsx | 57 +++++++++++++++++++ .../pb_loading_inline/loading_inline.test.js | 41 +++++++++++++ 3 files changed, 98 insertions(+), 37 deletions(-) delete mode 100644 playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx create mode 100644 playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx create mode 100644 playbook/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js diff --git a/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx b/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx deleted file mode 100644 index 9216ad7335..0000000000 --- a/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx +++ /dev/null @@ -1,37 +0,0 @@ -/* @flow */ - -import React from 'react' -import classnames from 'classnames' - -import { globalProps } from '../utilities/globalProps' - -import Body from '../pb_body/_body' -import Icon from '../pb_icon/_icon' -type LoadingInlineProps = { - align?: "left" | "center" | "right", - className?: string, - dark?: boolean, - data?: string, - id?: string, -} - -const LoadingInline = (props: LoadingInlineProps) => { - const { align = 'left' } = props - return ( -
- - - {' Loading'} - -
- ) -} - -export default LoadingInline diff --git a/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx b/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx new file mode 100644 index 0000000000..1c73ea249f --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx @@ -0,0 +1,57 @@ +/* @flow */ + +import React from 'react' +import classnames from 'classnames' + +import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props' +import { globalProps } from '../utilities/globalProps' + +import Body from '../pb_body/_body' +import Icon from '../pb_icon/_icon' + +type LoadingInlineProps = { + align?: "left" | "center" | "right", + aria?: { [key: string]: string }, + className?: string, + data?: { [key: string]: string }, + id?: string, +} + +const LoadingInline = (props: LoadingInlineProps) => { + const { + align = 'left', + aria = {}, + className, + data = {}, + id, + } = props + + const ariaProps = buildAriaProps(aria) + const dataProps = buildDataProps(data) + const classes = classnames( + buildCss(`pb_loading_inline_kit_${align}`), + globalProps(props), + className + ) + + return ( +
+ + + {' Loading'} + +
+ ) +} + +export default LoadingInline diff --git a/playbook/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js b/playbook/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js new file mode 100644 index 0000000000..b16842dc78 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js @@ -0,0 +1,41 @@ +import React from 'react' +import { render, screen } from '../utilities/test-utils' +import LoadingInline from './_loading_inline' + +const testId = "loadingInline" + +test('should render custom class and data', () => { + render( + + ) + + const kit = screen.getByTestId(testId) + expect(kit).toHaveClass('custom-class') +}) + +test('should render id', () => { + render( + + ) + + const kit = screen.getByTestId(testId) + expect(kit).toHaveProperty('id', testId) +}) + +test('should render aria-label', () => { + render( + + ) + + const kit = screen.getByTestId(testId) + expect(kit).toHaveAttribute('aria-label', testId) +}) From 8880a2ce4178664bfbc20623980d831e88912ff8 Mon Sep 17 00:00:00 2001 From: Carlos Lima Date: Fri, 24 Feb 2023 12:48:29 -0300 Subject: [PATCH 2/2] Removing flow markdown --- .../app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx b/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx index 1c73ea249f..01dc98f251 100644 --- a/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +++ b/playbook/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx @@ -1,5 +1,3 @@ -/* @flow */ - import React from 'react' import classnames from 'classnames'