@patternfly/quickstarts 1.2.2 → 1.4.1-rc.0

package/README.md

@@ -27,9 +27,26 @@ import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/quickstarts/dist/quickstarts.min.css';
 ```
 
+### Stylesheets if you use an older version of PatternFly
+If you use an older version of @patternfly/react-core (older than "4.115.2"), and you can't upgrade yet, you can pull in the necessary PatternFly styles that @patternfly/quickstarts depends upon.
+
+Ideally @patternfly/quickstarts will use the consumer provided PatternFly styles, only use these stylesheets if really needed.
+
+`quickstarts-standalone.min.css` nests the css classes within a **.pfext-quick-start__base** parent, so that they have higher specificity. `patternfly-global.css` includes component styles that we cannot nest with more specificiy (for example Drawer since it can include consumer components that depend on an older PF version).
+
+> Note: Only use these stylesheets if necessary!
+```js
+// import base from PatternFly to get the font
+import '@patternfly/react-core/dist/styles/base.css';
+// some global styles and variables that quickstarts uses (Drawer, Popover, Modal, Backdrop, Bullseye)
+import '@patternfly/quickstarts/dist/patternfly-global.css';
+// PF and quickstarts styles nested within .pfext-quick-start__base
+import '@patternfly/quickstarts/dist/quickstarts-standalone.min.css';
+```
+
 ## Usage example
 
-Note: You can also view this example on [codesandbox](https://codesandbox.io/s/patternflyquickstarts-1386f?file=/src/App.js)!
+Note: You can also view this example on [codesandbox](https://codesandbox.io/s/patternfly-quickstarts-finished-cnv53)!
 
 ```js
 import "./styles.css";
@@ -93,7 +110,10 @@ const App = () => {
     allQuickStartStates,
     setActiveQuickStartID,
     setAllQuickStartStates,
+    // Set to true to opt-out of default hidden card footers
     showCardFooters: false,
+    // Set to true to opt-out of default drawer header colors of blue with white text
+    useLegacyHeaderColors: false,
     loading,
     useQueryParams: withQueryParams,
   };
@@ -140,6 +160,10 @@ const SomeNestedComponent = () => {
 export default App;
 ```
 
+## Design update, option to opt-out of new drawer header coloring
+
+See above usage of `useLegacyHeaderColors` boolean to opt-out of update. Should only be used if new color scheme clashes with the usage context.
+
 ## Quick starts format
 
 Quick starts are parsed as markdown. To write your own quick start, if you use Typescript you can [check out the type definition here](https://github.com/patternfly/patternfly-quickstarts/blob/d52b194119f1ff16e69bf589d49a14931a19ac4b/packages/module/src/utils/quick-start-types.ts#L6).
@@ -204,4 +228,26 @@ You can have inline or block copyable text.
     ```{{copy}}
 ```
 
-#### 
+## Localization
+We use English as the default language. You can override the default by providing your own key/value pairs to the `QuickStartContainer` or `QuickStartContextProvider` resourceBundle prop.
+
+Example:
+```js
+// load my own resource Czech translations resource bundle using i18next
+const resourceBundle = i18n.getResourceBundle('cs', 'quickstart');
+const resources = {
+  ...resourceBundle,
+  Start: "Let's go!",
+  Continue: 'Resume',
+  Restart: 'Start over',
+};
+return (
+  <QuickStartContainer resourceBundle={resources}>
+  </QuickStartContainer>
+)
+```
+
+Use this [file](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/locales/en/quickstart.json) as a base for your translations.
+Each language is different, especially when it comes to plurals. Try [this utility](https://jsfiddle.net/6bpxsgd4) sourced from [i18next](https://www.i18next.com/translation-function/plurals#how-to-find-the-correct-plural-suffix) to determine the suffixes for the right plural format.
+
+#### 

package/dist/QuickStartDrawer.d.ts

@@ -14,10 +14,12 @@ export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement
     onCloseInProgress?: any;
     onCloseNotInProgress?: any;
     showCardFooters?: boolean;
+    useLegacyHeaderColors?: boolean;
     resourceBundle?: any;
     language?: string;
     loading?: boolean;
     useQueryParams?: boolean;
+    alwaysShowTaskReview?: boolean;
     /**
      * Additional markdown extensions and renderers to use
      * TODO: example usage - In the meantime you can take a look at:

package/dist/QuickStartPanelContent.d.ts

@@ -9,6 +9,7 @@ declare type QuickStartPanelContentProps = {
     appendTo?: HTMLElement | (() => HTMLElement);
     isResizable?: boolean;
     showClose?: boolean;
+    headerVariant?: '' | 'blue-white';
 };
 declare const QuickStartPanelContent: React.FC<QuickStartPanelContentProps>;
 export default QuickStartPanelContent;

package/dist/catalog/QuickStartTileFooterExternal.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { QuickStartExternal } from '../utils/quick-start-types';
 declare type QuickStartTileFooterProps = {
     link: QuickStartExternal;
+    quickStartId?: string;
 };
 declare const QuickStartTileFooterExternal: React.FC<QuickStartTileFooterProps>;
 export default QuickStartTileFooterExternal;

package/dist/catalog/QuickStartTileHeader.d.ts

@@ -6,6 +6,7 @@ declare type QuickStartTileHeaderProps = {
     duration: number;
     name: string;
     type?: QuickStartType;
+    quickStartId?: string;
 };
 declare const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps>;
 export default QuickStartTileHeader;

package/dist/controller/QuickStartConclusion.d.ts

@@ -4,7 +4,7 @@ declare type QuickStartConclusionProps = {
     tasks: QuickStartTask[];
     conclusion: string;
     allTaskStatuses: QuickStartTaskStatus[];
-    nextQuickStart?: QuickStart;
+    nextQuickStarts?: QuickStart[];
     onQuickStartChange: (quickStartid: string) => void;
     onTaskSelect: (selectedTaskNumber: number) => void;
 };

package/dist/controller/QuickStartIntroduction.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
+import './QuickStartIntroduction.scss';
 declare type QuickStartIntroductionProps = {
     introduction: string;
     tasks: QuickStartTask[];
     allTaskStatuses: QuickStartTaskStatus[];
+    prerequisites?: string[];
     onTaskSelect: (selectedTaskNumber: number) => void;
 };
 declare const QuickStartIntroduction: React.FC<QuickStartIntroductionProps>;