Skip to content

Commit

Permalink
feat(footer): migrate messager bar components
Browse files Browse the repository at this point in the history
  • Loading branch information
rohitkrai03 committed Aug 9, 2024
1 parent 935c892 commit bd862d2
Show file tree
Hide file tree
Showing 15 changed files with 617 additions and 14 deletions.
7 changes: 7 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 6 additions & 5 deletions packages/module/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,21 @@
"dependencies": {
"@patternfly/react-core": "6.0.0-alpha.94",
"@patternfly/react-icons": "6.0.0-alpha.34",
"clsx": "^2.1.0",
"react-jss": "^10.10.0",
"react-markdown": "^9.0.1",
"clsx": "^2.1.0"
"react-markdown": "^9.0.1"
},
"peerDependencies": {
"react": "^17 || ^18",
"react-dom": "^17 || ^18"
},
"devDependencies": {
"@patternfly/patternfly-a11y": "^4.3.1",
"@patternfly/documentation-framework": "6.0.0-alpha.69",
"@patternfly/react-table": "6.0.0-alpha.95",
"@patternfly/react-code-editor": "6.0.0-alpha.94",
"@patternfly/patternfly": "6.0.0-alpha.205",
"@patternfly/patternfly-a11y": "^4.3.1",
"@patternfly/react-code-editor": "6.0.0-alpha.94",
"@patternfly/react-table": "6.0.0-alpha.95",
"@types/dom-speech-recognition": "^0.0.4",
"@types/react": "^18.2.61",
"@types/react-dom": "^18.2.19",
"@types/react-router-dom": "^5.3.3",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,19 @@ 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:
['Footer', 'Footnote', 'FootnotePopover', 'FootnotePopoverCTA', 'FootnotePopoverBannerImage', 'FootnotePopoverLink']
[
'Footer',
'MessageBar',
'Footnote',
'FootnotePopover',
'FootnotePopoverCTA',
'FootnotePopoverBannerImage',
'FootnotePopoverLink'
]
---

import { Footer, Footnote } from '@patternfly/virtual-assistant/dist/dynamic/Footer';
import { MessageBar } from '@patternfly/virtual-assistant/dist/dynamic/MessageBar';

### Basic example

Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { Footer, Footnote } from '@patternfly/virtual-assistant/dist/dynamic/Footer';
import { MessageBar } from '@patternfly/virtual-assistant/dist/dynamic/MessageBar';

const footnoteProps = {
label: 'Lightspeed uses AI. Check for mistakes.',
Expand All @@ -23,8 +24,13 @@ const footnoteProps = {
}
};

export const BasicDemo: React.FunctionComponent = () => (
<Footer>
<Footnote {...footnoteProps} />
</Footer>
);
export const BasicDemo: React.FunctionComponent = () => {
const handleSend = (message) => alert(message);

return (
<Footer>
<MessageBar onSendMessage={handleSend} hasMicrophoneButton />
<Footnote {...footnoteProps} />
</Footer>
);
};
4 changes: 1 addition & 3 deletions packages/module/src/Footer/Footnote.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@ export interface FootnotePopover {
title: string;
/** Description for the Footnote popover */
description: string;
/** Aria Label for the Popover */
ariaLabel?: string;
/** Optional Banner Image that can be shown in the Footnote Popover */
bannerImage?: FootnotePopoverBannerImage;
/** Optional CTA button that can be used to trigger an action and close the popover */
Expand Down Expand Up @@ -112,7 +110,7 @@ export const Footnote: React.FunctionComponent<FootnoteProps> = ({
{popover && (
<Popover
className="pf-chatbot__popover--footnote"
aria-label={popover.ariaLabel || 'More information'}
aria-label={popover.popoverProps?.['aria-label'] || 'More information'}
isVisible={isVisible}
shouldOpen={(_event, _fn) => setIsVisible(true)}
shouldClose={(_event, _fn) => setIsVisible(false)}
Expand Down
35 changes: 35 additions & 0 deletions packages/module/src/MessageBar/AttachButton.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
// ============================================================================
// Chatbot Footer - Message Bar - Attach
// ============================================================================
.pf-v6-c-button.pf-chatbot__button--attach {
width: 48px;
height: 48px;
border-radius: var(--pf-t--global--border--radius--pill);

.pf-v6-c-button__text {
display: flex;
align-items: center;
justify-content: center;
color: var(--pf-t--chatbot--message-bar--icon--fill);
}

svg { height: 20px; }

// Interactive states
&:hover, &:focus {
.pf-v6-c-button__text { color: var(--pf-t--chatbot--message-bar--icon--fill--hover); }
}

// Active state
&--active {
background-color: var(--pf-t--color--blue--50);

.pf-v6-c-button__text {
color: var(--pf-t--color--white);
}

&:hover, &:focus {
.pf-v6-c-button__text { color: var(--pf-t--color--white); }
}
}
}
61 changes: 61 additions & 0 deletions packages/module/src/MessageBar/AttachButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
// ============================================================================
// Chatbot Footer - Message Bar - Attach
// ============================================================================
import React from 'react';

// Import PatternFly components
import { Button, ButtonProps, Tooltip, TooltipProps } from '@patternfly/react-core';

import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';

export interface AttachButtonProps extends ButtonProps {
/** OnClick Handler for the Attach Button */
onClick: () => void;
/** Class Name for the Attach button */
className?: string;
/** Props to control is the attach button should be disabled */
isDisabled?: boolean;
/** Props to control the PF Tooltip component */
tooltipProps?: TooltipProps;
}

export const AttachButton: React.FunctionComponent<AttachButtonProps> = ({
onClick,
isDisabled,
className,
tooltipProps,
...props
}: AttachButtonProps) => {
// Configure tooltip
const tooltipAttachRef = React.useRef();

return (
<>
<Button
ref={tooltipAttachRef}
variant="plain"
className={`pf-chatbot__button--attach ${className}`}
aria-describedby="pf-chatbot__tooltip--attach"
aria-label={props['aria-label'] || 'Attach Button'}
isDisabled={isDisabled}
onClick={onClick}
{...props}
>
<PaperclipIcon />
</Button>
<Tooltip
id="pf-chatbot__tooltip--attach"
content="Attach"
position="top"
triggerRef={tooltipAttachRef}
entryDelay={tooltipProps?.entryDelay || 0}
exitDelay={tooltipProps?.exitDelay || 0}
distance={tooltipProps?.distance || 8}
animationDuration={tooltipProps?.animationDuration || 0}
{...tooltipProps}
/>
</>
);
};

export default AttachButton;
113 changes: 113 additions & 0 deletions packages/module/src/MessageBar/MessageBar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
// ============================================================================
// Chatbot Footer - Message Bar
// ============================================================================
.pf-chatbot__message-bar {
--pf-t--chatbot--message-bar--BackgroundColor: var(--pf-t--color--white);
--pf-t--chatbot--message-bar--BoxShadow--color--hover: var(--pf-t--color--gray--30);
--pf-t--chatbot--message-bar--BoxShadow--color--focus: var(--pf-t--color--blue--50);

--pf-t--chatbot--message-bar--icon--fill: var(--pf-t--color--gray--50);
--pf-t--chatbot--message-bar--icon--fill--hover: var(--pf-t--color--gray--70);
--pf-t--chatbot--message-bar--icon--fill--active: var(--pf-t--color--white);

--pf-t--chatbot--message-bar--send-icon--fill: var(--pf-t--color--blue--50);
--pf-t--chatbot--message-bar--send-icon--fill--hover: var(--pf-t--color--blue--50);
--pf-t--chatbot--message-bar--send-icon--background--color--hover: rgba(
224,
240,
255,
0.5
); // --pf-t--color--blue--10 @ 50%

position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
min-height: 64px;
background-color: var(--pf-t--chatbot--message-bar--BackgroundColor);
border-radius: calc(
var(--pf-t--global--border--radius--medium) * 2
); // 32px corners - universal for single and multi-line height
transition: box-shadow var(--pf-t--chatbot--timing-function) var(--pf-t--global--duration--100);

&:hover {
box-shadow: inset 0 0 0 1px var(--pf-t--chatbot--message-bar--BoxShadow--color--hover);
}

&:focus-within {
box-shadow: inset 0 0 0 2px var(--pf-t--chatbot--message-bar--BoxShadow--color--focus);
}

// Input
// --------------------------------------------------------------------------
&-input {
align-self: stretch;
display: flex;
// align-items: center;
flex-grow: 1;
padding: calc(var(--pf-t--global--spacer--100) + var(--pf-t--global--spacer--300)) var(--pf-t--global--spacer--400);
}
.pf-chatbot__message-textarea {
align-self: stretch;
display: flex;
// align-items: center;
flex-grow: 1;
max-width: 100%;
max-height: 232px; // 8 rows + padding
font-size: var(--pf-t--global--font--size--md);
line-height: 24px;
}

// Actions
// --------------------------------------------------------------------------
&-actions {
display: flex;
align-self: flex-end;
margin: 0 var(--pf-t--global--spacer--200) var(--pf-t--global--spacer--200) 0;
}

// Standard Buttons
// --------------------------------------------------------------------------
// .pf-v6-c-button {
// width: 48px;
// height: 48px;
// border-radius: var(--pf-t--global--border--radius--pill);

// .pf-v6-c-button__text {
// display: flex;
// align-items: center;
// justify-content: center;
// color: var(--pf-t--chatbot--message-bar--icon--fill);
// }

// svg { height: 20px; }

// // Interactive states
// &:hover, &:focus {
// .pf-v6-c-button__text { color: var(--pf-t--chatbot--message-bar--icon--fill--hover); }
// }
// }

// Send Button
// --------------------------------------------------------------------------
}

// ============================================================================
// Chatbot Dark Theme
// ============================================================================
.pf-v6-theme-dark {
.pf-chatbot__message-bar {
--pf-t--chatbot--message-bar--BackgroundColor: var(--pf-t--color--gray--80);
--pf-t--chatbot--message-bar--BoxShadow--color--hover: var(--pf-t--color--gray--50);
--pf-t--chatbot--message-bar--BoxShadow--color--focus: var(--pf-t--color--blue--30);

--pf-t--chatbot--message-bar--icon--fill: var(--pf-t--color--gray--30);
--pf-t--chatbot--message-bar--icon--fill--hover: var(--pf-t--color--white);
--pf-t--chatbot--message-bar--icon--fill--active: var(--pf-t--color--white);

--pf-t--chatbot--message-bar--send-icon--fill: var(--pf-t--color--blue--30);
--pf-t--chatbot--message-bar--send-icon--fill--hover: var(--pf-t--color--white);
--pf-t--chatbot--message-bar--send-icon--background--color--hover: var(--pf-t--color--blue--50);
}
}
Loading

0 comments on commit bd862d2

Please sign in to comment.