Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(css): update scss for org compatibility #76

Merged
merged 1 commit into from
Aug 8, 2024
Merged

feat(css): update scss for org compatibility #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions packages/module/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,18 @@
"tag": "alpha"
},
"scripts": {
"build": "yarn build:js && yarn build:esm && yarn build:fed:packages && yarn copy:files:esm && yarn copy:files:cjs",
"build:esm": "tsc --build --verbose ./tsconfig.json && yarn build:css && yarn transform:css",
"build:css": "node ../../scripts/build-styles.js",
"build": "yarn build:js && yarn build:esm && yarn build:fed:packages && yarn copy:files:esm && yarn copy:files:cjs && yarn copy:files:css",
"build:esm": "tsc --build --verbose ./tsconfig.json",
"build:fed:packages": "node generate-fed-package-json.js",
"build:js": "tsc -p tsconfig.cjs.json",
"copy:files:esm": "copyfiles -u 1 src/**/*.svg src/**/*.json ./dist/esm",
"copy:files:cjs": "copyfiles -u 1 src/**/*.svg src/**/*.json ./dist/cjs",
"copy:files:css": "copyfiles -u 1 src/Feedback/Feedback.css ./dist/esm",
"clean": "rimraf dist",
"docs:develop": "pf-docs-framework start",
"docs:build": "pf-docs-framework build all --output public",
"docs:serve": "pf-docs-framework serve public --port 5001",
"docs:screenshots": "pf-docs-framework screenshots --urlPrefix http://localhost:5001",
"transform:css": "node ../../scripts/transform-scss.js",
"test:a11y": "patternfly-a11y --config patternfly-a11y.config",
"serve:a11y": "yarn serve coverage"
},
Expand Down
21 changes: 20 additions & 1 deletion packages/module/patternfly-docs/generated/extensions/user-feedback/react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ const pageData = {
"Basic modal",
"Advanced modal",
"Advanced that autofills an email address",
"Modal with asynchronous call support"
"Modal with asynchronous call support",
"Modal with internationalization support"
]
};
pageData.liveContext = {
Expand Down Expand Up @@ -139,6 +140,23 @@ pageData.examples = {
</code>
{` function to send data to a backend service.`}
</p>
</Example>,
'Modal with internationalization support': props =>
<Example {...pageData} {...props} {...{"code":"const i18nExample = {\n getSupport: 'Lorem ipsum dolor sit amet support',\n back: 'Lorem ipsum dolor sit amet back',\n bugReported: 'Lorem ipsum dolor sit amet Bug Reported',\n cancel: 'Cancel',\n close: 'Close',\n describeBug: \n 'Lorem ipsum dolor sit amet Describe the bug you encountered. For urgent issues, open a support case instead.',\n describeBugUrgentCases: \n 'Lorem ipsum dolor sit amet Describe the bug you encountered. For urgent issues, open a support case instead.',\n describeReportBug: \n 'Lorem ipsum dolor sit amet Describe the bug you encountered. Include where it is located and what action caused it. If this issue is urgent or blocking your workflow,',\n directInfluence:\n 'Lorem ipsum dolor sit amet your feedback will directly influence the future of Red Hat’s products. Opt in below to hear about future research opportunities via email.',\n email: 'Lorem ipsum dolor sit amet Email',\n enterFeedback: 'Lorem ipsum dolor sit amet Enter your feedback',\n feedback: 'Lorem ipsum dolor sit amet Feedback',\n feedbackSent: 'Lorem ipsum dolor sit amet Feedback Sent',\n helpUsImproveHCC: 'Lorem ipsum dolor sit amet Help us improve the Red Hat OpenShift.',\n howIsConsoleExperience: 'Lorem ipsum dolor sit amet What has your experience been like so far?',\n joinMailingList: 'Lorem ipsum dolor sit ametJoin mailing list',\n informDirectionDescription: \n 'Lorem ipsum dolor sit ametBy participating in feedback sessions, usability tests, and interviews with our',\n informDirection: 'Lorem ipsum dolor sit ametInform the direction of Red Hat',\n learnAboutResearchOpportunities: 'Lorem ipsum dolor sit ametLearn about opportunities to share your feedback with our User Research Team.',\n openSupportCase: 'Lorem ipsum dolor sit amet Support Case',\n problemProcessingRequest: \n 'Lorem ipsum dolor sit ametThere was a problem processing the request. Try reloading the page. If the problem persists, contact',\n support: 'Lorem ipsum dolor sit ametRed Hat support',\n reportABug: 'Lorem ipsum dolor sit ametReport a bug',\n responseSent: 'Lorem ipsum dolor sit ametResponse sent',\n researchOpportunities: 'Lorem ipsum dolor sit ametYes, I would like to hear about research opportunities',\n shareFeedback: 'Lorem ipsum dolor sit ametShare feedback',\n shareYourFeedback: 'Lorem ipsum dolor sit ametShare your feedback with us!',\n somethingWentWrong: 'Lorem ipsum dolor sit ametSomething went wrong',\n submitFeedback: 'Submit feedback',\n teamWillReviewBug: 'Lorem ipsum dolor sit ametWe appreciate your feedback and our team will review your report shortly',\n tellAboutExperience: 'Lorem ipsum dolor sit ametTell us about your experience',\n thankYouForFeedback: 'Lorem ipsum dolor sit ametThank you, we appreciate your feedback.',\n thankYouForInterest: \n 'Lorem ipsum dolor sit ametThank you for your interest in user research. You have been added to our mailing list.',\n userResearchTeam: 'Lorem ipsum dolor sit ametUser Research Team',\n weNeverSharePersonalInformation: \n 'Lorem ipsum dolor sit ametWe never share your personal information, and you can opt out at any time.',\n };\n\n\n /* eslint-disable no-debugger */\nimport React from 'react';\nimport { FeedbackModal} from '@patternfly/react-user-feedback';\nimport { Button } from '@patternfly/react-core';\n\nexport const AdvancedExample: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const handleButtonClicked = () => {setIsOpen(true)}; \n return <>\n <Button onClick={handleButtonClicked}>Show Modal</Button>\n <FeedbackModal \n feedbackLocale={i18nExample}\n email= \"test@redhat.com\" \n onShareFeedback={()=>\n // Example of a successful callback\n true\n }\n onJoinMailingList={()=>\n true\n }\n onOpenSupportCase='https://pf-user-feedback-extension-form-demos.surge.sh/requestSupport.html'\n onReportABug={()=>true}\n isOpen={isOpen}\n onClose={()=>setIsOpen(false)}/>\n </>\n}","title":"Modal with internationalization support","lang":"js","className":""}}>

<p {...{"className":"pf-v6-c-content--p ws-p "}}>
{`To customize the content displayed in the feedback modal, pass in a custom `}

<code {...{"className":"ws-code "}}>
{`i18n`}
</code>
{` object with values for each property of`}

<code {...{"className":"ws-code "}}>
{`<FeedbackModal>`}
</code>
{`. This allows you to prepare a modal for different languages and requirements.`}
</p>
</Example>
};

Expand All @@ -157,6 +175,7 @@ const Component = () => (
{React.createElement(pageData.examples["Advanced modal"])}
{React.createElement(pageData.examples["Advanced that autofills an email address"])}
{React.createElement(pageData.examples["Modal with asynchronous call support"])}
{React.createElement(pageData.examples["Modal with internationalization support"])}
</React.Fragment>
);
Component.displayName = 'ExtensionsUserFeedbackReactDocs';
Expand Down
4 changes: 2 additions & 2 deletions packages/module/patternfly-docs/generated/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ module.exports = {
'/extensions/user-feedback/react': {
id: "User feedback",
title: "User feedback",
toc: [{"text":"About"},{"text":"Examples"},[{"text":"Basic modal"},{"text":"Advanced modal"},{"text":"Advanced that autofills an email address"},{"text":"Modal with asynchronous call support"}]],
examples: ["Basic modal","Advanced modal","Advanced that autofills an email address","Modal with asynchronous call support"],
toc: [{"text":"About"},{"text":"Examples"},[{"text":"Basic modal"},{"text":"Advanced modal"},{"text":"Advanced that autofills an email address"},{"text":"Modal with asynchronous call support"},{"text":"Modal with internationalization support"}]],
examples: ["Basic modal","Advanced modal","Advanced that autofills an email address","Modal with asynchronous call support","Modal with internationalization support"],
section: "extensions",
subsection: "",
source: "react",
Expand Down
1 change: 1 addition & 0 deletions packages/module/patternfly-docs/patternfly-docs.css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@ import '@patternfly/patternfly/patternfly-addons.css';
import '@patternfly/documentation-framework/global.css';

// Add your extension CSS below
import '@patternfly/react-user-feedback/src/Feedback/Feedback.css';
34 changes: 16 additions & 18 deletions packages/module/src/Feedback/Feedback.scss → packages/module/src/Feedback/Feedback.css
View file
Open in desktop

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

2 changes: 0 additions & 2 deletions packages/module/src/Feedback/FeedbackError.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import { Button, Content, ContentVariants } from '@patternfly/react-core';
import ErrorIcon from '@patternfly/react-icons/dist/esm/icons/error-circle-o-icon';
import { LocaleContext } from '../context/LocaleContext';

import './Feedback.scss';

export interface FeedbackErrorProps {
onCloseModal: () => void;
}
Expand Down
2 changes: 0 additions & 2 deletions packages/module/src/Feedback/FeedbackForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ import {
} from '@patternfly/react-core';
import { LocaleContext } from '../context/LocaleContext';

import './Feedback.scss';

export interface FeedbackFormProps {
email?: string;
onCloseModal: () => void;
Expand Down
112 changes: 43 additions & 69 deletions packages/module/src/Feedback/FeedbackModalInternal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,21 @@
import React, { memo, useState, useRef } from 'react';
import {
Button,
Card,
CardBody,
CardHeader,
CardTitle,
Flex,
FlexItem,
Panel,
PanelFooter,
PanelHeader,
PanelMain,
PanelMainBody,
Content,
ContentVariants
Button,
Card,
CardBody,
CardHeader,
CardTitle,
Flex,
FlexItem,
Panel,
PanelFooter,
PanelHeader,
PanelMain,
PanelMainBody,
Content,
ContentVariants
} from '@patternfly/react-core';
import {
Modal,
ModalVariant
} from '@patternfly/react-core/deprecated';
import { Modal, ModalVariant } from '@patternfly/react-core/deprecated';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';

import feedbackImage from '../images/pf_feedback.svg';
Expand All @@ -27,7 +24,6 @@ import FeedbackSuccess from './FeedbackSuccess';
import FeedbackError from './FeedbackError';
import { FeedbackModalProps } from './FeedbackModal';

import './Feedback.scss';
import { LocaleContext } from '../context/LocaleContext';

export type FeedbackPages =
Expand Down Expand Up @@ -83,21 +79,16 @@ export const FeedbackModalInternal = memo(
return (
<Panel isScrollable className="chr-c-feedback-content">
<PanelHeader className="chr-c-feedback-heading">
<FlexItem>
<Content component={ContentVariants.h1}>{intl.tellAboutExperience}</Content>
</FlexItem>
<FlexItem>
<Content component="p">{intl.helpUsImproveHCC}</Content>
</FlexItem>

<FlexItem>
<Content component={ContentVariants.h1}>{intl.tellAboutExperience}</Content>
</FlexItem>
<FlexItem>
<Content component="p">{intl.helpUsImproveHCC}</Content>
</FlexItem>
</PanelHeader>
<PanelMain tabIndex={0} className='chr-c-feedback-content-main'>
<PanelMain tabIndex={0} className="chr-c-feedback-content-main">
<PanelMainBody className="chr-c-feedback-cards">
<Card
isCompact
isClickable
variant="secondary"
>
<Card isCompact isClickable variant="secondary">
<CardHeader
selectableActions={{
// eslint-disable-next-line no-console
Expand All @@ -106,7 +97,7 @@ export const FeedbackModalInternal = memo(
? window.open(onShareFeedback, '_blank')
: setModalPage('feedbackOne');
},
selectableActionId: "feedback-card-1",
selectableActionId: 'feedback-card-1',
selectableActionAriaLabelledby: 'feedback-card-1',
name: 'feedback-card'
}}
Expand All @@ -117,24 +108,20 @@ export const FeedbackModalInternal = memo(
<CardBody>{intl.howIsConsoleExperience} </CardBody>
</Card>
{onReportABug && (
<Card
isCompact
isClickable
variant='secondary'
>
<CardHeader
selectableActions={{
// eslint-disable-next-line no-console
onClickAction: () => {
typeof onReportABug === 'string'
? window.open(onReportABug, '_blank')
: setModalPage('reportBugOne');
},
selectableActionId: "report-bug-card-1",
selectableActionAriaLabelledby: 'report-bug-card-1',
name: 'report-bug-card'
}}
></CardHeader>
<Card isCompact isClickable variant="secondary">
<CardHeader
selectableActions={{
// eslint-disable-next-line no-console
onClickAction: () => {
typeof onReportABug === 'string'
? window.open(onReportABug, '_blank')
: setModalPage('reportBugOne');
},
selectableActionId: 'report-bug-card-1',
selectableActionAriaLabelledby: 'report-bug-card-1',
name: 'report-bug-card'
}}
></CardHeader>

<CardTitle>
{intl.reportABug} {typeof onReportABug === 'string' ? <ExternalLinkAltIcon /> : null}{' '}
Expand All @@ -143,18 +130,14 @@ export const FeedbackModalInternal = memo(
</Card>
)}
{onOpenSupportCase && (
<Card
isCompact
isClickable
variant="secondary"
>
<Card isCompact isClickable variant="secondary">
<CardHeader
selectableActions={{
// eslint-disable-next-line no-console
onClickAction: () => {
window.open(onOpenSupportCase, '_blank');
},
selectableActionId: "open-support-case-card-1",
selectableActionId: 'open-support-case-card-1',
selectableActionAriaLabelledby: 'open-support-case-card-1',
name: 'open-support-case-card'
}}
Expand All @@ -168,11 +151,7 @@ export const FeedbackModalInternal = memo(
</Card>
)}
{onJoinMailingList && (
<Card
isCompact
isClickable
variant="secondary"
>
<Card isCompact isClickable variant="secondary">
<CardHeader
selectableActions={{
// eslint-disable-next-line no-console
Expand All @@ -181,7 +160,7 @@ export const FeedbackModalInternal = memo(
? window.open(onJoinMailingList, '_blank')
: setModalPage('informDirection');
},
selectableActionId: "join-mailing-list-card-1",
selectableActionId: 'join-mailing-list-card-1',
selectableActionAriaLabelledby: 'join-mailing-list-card-1',
name: 'join-mailing-list-card'
}}
Expand All @@ -198,12 +177,7 @@ export const FeedbackModalInternal = memo(
</PanelMainBody>
</PanelMain>
<PanelFooter className="chr-c-feedback-footer">
<Button
ouiaId="cancel-feedback"
key="cancel"
variant="link"
onClick={handleCloseModal}
>
<Button ouiaId="cancel-feedback" key="cancel" variant="link" onClick={handleCloseModal}>
{intl.cancel}
</Button>
</PanelFooter>
Expand Down
5 changes: 2 additions & 3 deletions packages/module/src/Feedback/FeedbackSuccess.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react';
import { Button, Content, ContentVariants } from '@patternfly/react-core';
import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';

import './Feedback.scss';
import { LocaleContext } from '../context/LocaleContext';

export interface FeedbackSuccessProps {
Expand All @@ -16,8 +15,8 @@ const FeedbackSuccess = ({ onCloseModal, successTitle, successDescription }: Fee
return (
<div className="chr-c-feedback-success-content">
<CheckIcon color="var(--pf-global--success-color--100)" className="pf-u-mx-auto" />
<Content component={ContentVariants.h1}>{successTitle}</Content>
<Content>{successDescription}</Content>
<Content component={ContentVariants.h1}>{successTitle}</Content>
<Content>{successDescription}</Content>
<Button variant="primary" onClick={onCloseModal}>
{intl.close}
</Button>
Expand Down
Loading
Loading