From 8d0e90d5d64b8c0290e1f11b1da4e4f370eadb49 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 25 Nov 2024 20:52:19 -0500 Subject: [PATCH 1/2] feat: Add PasswordInput and PasswordHiddenText components --- .../PasswordHiddenTextExample.tsx | 7 +++ .../examples/PasswordInput/PasswordInput.md | 29 +++++++++++++ .../PasswordInput/PasswordInputExample.tsx | 7 +++ .../src/PasswordInput/PasswordHiddenText.tsx | 43 +++++++++++++++++++ .../src/PasswordInput/PasswordInput.tsx | 37 ++++++++++++++++ packages/module/src/PasswordInput/index.ts | 2 + packages/module/src/index.ts | 1 + 7 files changed, 126 insertions(+) create mode 100644 packages/module/patternfly-docs/content/examples/PasswordInput/PasswordHiddenTextExample.tsx create mode 100644 packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInput.md create mode 100644 packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInputExample.tsx create mode 100644 packages/module/src/PasswordInput/PasswordHiddenText.tsx create mode 100644 packages/module/src/PasswordInput/PasswordInput.tsx create mode 100644 packages/module/src/PasswordInput/index.ts diff --git a/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordHiddenTextExample.tsx b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordHiddenTextExample.tsx new file mode 100644 index 0000000..f1e834b --- /dev/null +++ b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordHiddenTextExample.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { PasswordHiddenText } from "@patternfly/ai-infra-ui-components"; + + +export const PasswordHiddenTextExample: React.FunctionComponent = () => ( + +); diff --git a/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInput.md b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInput.md new file mode 100644 index 0000000..06cca08 --- /dev/null +++ b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInput.md @@ -0,0 +1,29 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: AI-infra-ui-components +# Sidenav secondary level section +# should be the same for all markdown files +id: PasswordInput +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +source: react +# If you use typescript, the name of the interface to display props for +# These are found through the sourceProps function provided in patternfly-docs.source.js +propComponents: ['PasswordInput, PasswordHiddenText'] +--- + +import { PasswordInput, PasswordHiddenText } from "@patternfly/ai-infra-ui-components"; + +Note: this component documents the API and enhances the [existing PasswordInput](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/components/PasswordInput.tsx) component and [existing PasswordHiddenText](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/components/PasswordHiddenText.tsx) component from odh-dashboard. It can be imported from [@patternfly/ai-infra-ui-components](https://www.npmjs.com/package/@patternfly/AI-infra-ui-components). Alternatively, it can be used within the odh-dashboard via the import: `~/components/PasswordInput`. + +### Password input example + +```js file="./PasswordInputExample.tsx" + +``` + +### Password hidden text example + +```js file="./PasswordHiddenTextExample.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInputExample.tsx b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInputExample.tsx new file mode 100644 index 0000000..8815a53 --- /dev/null +++ b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInputExample.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { PasswordInput } from "@patternfly/ai-infra-ui-components"; + + +export const PasswordInputExample: React.FunctionComponent = () => ( + +); diff --git a/packages/module/src/PasswordInput/PasswordHiddenText.tsx b/packages/module/src/PasswordInput/PasswordHiddenText.tsx new file mode 100644 index 0000000..6473a9e --- /dev/null +++ b/packages/module/src/PasswordInput/PasswordHiddenText.tsx @@ -0,0 +1,43 @@ +import { Button, Flex, FlexItem, Content } from '@patternfly/react-core'; +import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons'; +import React from 'react'; + +export type PasswordHiddenTextProps = { + /** Read only password text to display */ + password: string; + /** Test id to pass to the view password toggle button */ + testId: string; +}; + +export const PasswordHiddenText: React.FunctionComponent = ({ + password, + testId +}: PasswordHiddenTextProps) => { + const [isHidden, setIsHidden] = React.useState(true); + + const passwordText = isHidden ? Array(password.length).fill('\u25CF').join('') : password; + + return ( + + + {passwordText} + + + + + + ); +}; + +export default PasswordHiddenText; \ No newline at end of file diff --git a/packages/module/src/PasswordInput/PasswordInput.tsx b/packages/module/src/PasswordInput/PasswordInput.tsx new file mode 100644 index 0000000..c9ff6ea --- /dev/null +++ b/packages/module/src/PasswordInput/PasswordInput.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { Button, InputGroup, TextInput, TextInputProps, InputGroupItem } from '@patternfly/react-core'; +import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons'; + +export type PasswordInputProps = TextInputProps & { + /** Aria label to display on the view password toggle while the password is hidden */ + ariaLabelShow?: string; + /** Aria label to display on the view password toggle while the password is visible */ + ariaLabelHide?: string; +}; + +export const PasswordInput: React.FunctionComponent = ({ + ariaLabelShow = 'Show password', + ariaLabelHide = 'Hide password', + ...props +}: PasswordInputProps) => { + const [isPasswordHidden, setPasswordHidden] = React.useState(true); + + return ( + + + + + + + + + ); +}; + +export default PasswordInput; \ No newline at end of file diff --git a/packages/module/src/PasswordInput/index.ts b/packages/module/src/PasswordInput/index.ts new file mode 100644 index 0000000..86cfa07 --- /dev/null +++ b/packages/module/src/PasswordInput/index.ts @@ -0,0 +1,2 @@ +export * from './PasswordInput'; +export * from './PasswordHiddenText'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index cd4a036..d7d3536 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -5,3 +5,4 @@ export * from './IndentSection'; export * from './K8sNameDescriptionField'; export * from './TruncatedText'; export * from './EmptyStateErrorMessage'; +export * from './PasswordInput' \ No newline at end of file From 1470936614e55192a2b1891439134b4b84188b0e Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Wed, 4 Dec 2024 21:52:39 -0500 Subject: [PATCH 2/2] address PR comments --- .../content/examples/PasswordInput/PasswordInput.md | 2 +- packages/module/src/PasswordInput/PasswordHiddenText.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInput.md b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInput.md index 06cca08..179639c 100644 --- a/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInput.md +++ b/packages/module/patternfly-docs/content/examples/PasswordInput/PasswordInput.md @@ -14,7 +14,7 @@ propComponents: ['PasswordInput, PasswordHiddenText'] import { PasswordInput, PasswordHiddenText } from "@patternfly/ai-infra-ui-components"; -Note: this component documents the API and enhances the [existing PasswordInput](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/components/PasswordInput.tsx) component and [existing PasswordHiddenText](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/components/PasswordHiddenText.tsx) component from odh-dashboard. It can be imported from [@patternfly/ai-infra-ui-components](https://www.npmjs.com/package/@patternfly/AI-infra-ui-components). Alternatively, it can be used within the odh-dashboard via the import: `~/components/PasswordInput`. +Note: these component document the API and enhance the [existing PasswordInput](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/components/PasswordInput.tsx) component and [existing PasswordHiddenText](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/components/PasswordHiddenText.tsx) components from odh-dashboard. It can be imported from [@patternfly/ai-infra-ui-components](https://www.npmjs.com/package/@patternfly/AI-infra-ui-components). Alternatively, they can be used within the odh-dashboard via the `~/components/PasswordInput` and `~/components/PasswordHiddenText` imports. ### Password input example diff --git a/packages/module/src/PasswordInput/PasswordHiddenText.tsx b/packages/module/src/PasswordInput/PasswordHiddenText.tsx index 6473a9e..876dc1e 100644 --- a/packages/module/src/PasswordInput/PasswordHiddenText.tsx +++ b/packages/module/src/PasswordInput/PasswordHiddenText.tsx @@ -19,7 +19,7 @@ export const PasswordHiddenText: React.FunctionComponent