@patternfly/react-core 5.2.0-prerelease.5 → 5.2.0-prerelease.7

package/src/demos/Banner.md

@@ -3,6 +3,9 @@ id: Banner
 section: components
 ---
 
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+
 ## Demos
 
 ### Basic sticky banner
@@ -21,7 +24,10 @@ import {
   TextContent,
   Text
 } from '@patternfly/react-core';
+
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 class BannerDemo extends React.Component {
   render() {
@@ -33,12 +39,12 @@ class BannerDemo extends React.Component {
               justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
               flexWrap={{ default: 'nowrap' }}
             >
-              <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
-              <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+              <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+              <div className={css(display.displayNone, display.displayBlockOnLg)}>
                 This message is sticky to the top of the page.
               </div>
-              <div className="pf-v5-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
-              <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
+              <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+              <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
             </Flex>
           </Banner>
           <PageSection variant={PageSectionVariants.light}>
@@ -86,6 +92,8 @@ import {
   Text
 } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
 
 class BannerDemo extends React.Component {
   render() {
@@ -103,12 +111,12 @@ class BannerDemo extends React.Component {
                 justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
                 flexWrap={{ default: 'nowrap' }}
               >
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>
                   This message is sticky to the top of the page.
                 </div>
-                <div className="pf-v5-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
+                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
               </Flex>
             </Banner>
           </FlexItem>
@@ -142,12 +150,12 @@ class BannerDemo extends React.Component {
                 justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
                 flexWrap={{ default: 'nowrap' }}
               >
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>
                   This message is sticky to the bottom of the page.
                 </div>
-                <div className="pf-v5-u-display-none-on-lg">Drop some text on mobile, truncate if needed.</div>
-                <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
+                <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+                <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
               </Flex>
             </Banner>
           </FlexItem>