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

Author: kmcfaul

packages/module/package.json

@@ -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"
   },

packages/module/patternfly-docs/generated/extensions/user-feedback/react.js

@@ -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 = {
@@ -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= \"[email protected]\" \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>
 };
 
@@ -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';

packages/module/patternfly-docs/generated/index.js

@@ -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",

packages/module/patternfly-docs/patternfly-docs.css.js

@@ -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';

…ckages/module/src/Feedback/Feedback.scss packages/module/src/Feedback/Feedback.csspackages/module/src/Feedback/Feedback.scss renamed to packages/module/src/Feedback/Feedback.css packages/module/src/Feedback/Feedback.scss renamed to packages/module/src/Feedback/Feedback.css

@@ -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;
 }

packages/module/src/Feedback/FeedbackError.tsx

@@ -16,8 +16,6 @@ import {
 } from '@patternfly/react-core';
 import { LocaleContext } from '../context/LocaleContext';
 
-import './Feedback.scss';
-
 export interface FeedbackFormProps {
   email?: string;
   onCloseModal: () => void;

packages/module/src/Feedback/FeedbackForm.tsx

@@ -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';
@@ -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 =
@@ -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
@@ -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'
                       }}
@@ -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}{' '}
@@ -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'
                         }}
@@ -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
@@ -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'
                         }}
@@ -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>

packages/module/src/Feedback/FeedbackModalInternal.tsx

@@ -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 {
@@ -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>