playbook_ui 14.10.0.pre.rc.21 → 14.10.0.pre.rc.23

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b5b2dde029c1a805ef88ea1e6771b8cd9406daa6a13ecc29828b3c842292cdc
-  data.tar.gz: 40b8c61b5a5c93b5bbb43eac9d230a19fa9abe21056f8e87a9d10ac102e9527a
+  metadata.gz: a1d73e15bf41e2c7f0c5695db86c3af7e516c9483349001c97c3f2ceec20253b
+  data.tar.gz: b92a027af7c61274e867114228607f0b8e9e4f3fbf4dbc9e0ccb7aabae34c2bf
 SHA512:
-  metadata.gz: 152d244ee2616d0e82ca0baa68624222b7bf07cb7e40c05db4a120890a754ade64aebf69b1346e12bf737ae265b649ebf369ddf9d0aca3d26dcb8dbf01bc22b7
-  data.tar.gz: b590fcf5c3dde6875820a5b4afc5c9c3caf4ea91ba5187e3ad385103f5780b8dfceabddb91b45db48eb812f933d5b448c04439b1340e1a6a0bf202201fc6b572
+  metadata.gz: 9eb5845b95d23bf1490ec7a9ff5b11531aa74879a3d13d61693dcc9b23edcb8d9bdb65a4369ae7e711ad1d43be46375a7faf79c101f6e3b59a1fcfd08fded7c7
+  data.tar.gz: 7986936bc3d85c3fd1649d883527940aa61c9d4e429acb10eae6e2ba36db6f5ef53fd575aa6179bf786711c5694ba26d7a0caa465ebb3c06baeb91f76f61a66c

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
-import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
+import type { ProductColors, CategoryColors, BackgroundColors, StatusColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
 import Flex from '../pb_flex/_flex'
@@ -36,7 +36,7 @@ type CardPropTypes = {
 } & GlobalProps
 
 type CardHeaderProps = {
-  headerColor?: BackgroundColors | ProductColors | CategoryColors | "none",
+  headerColor?: BackgroundColors | ProductColors | CategoryColors | StatusColors | "none",
   headerColorStriped?: boolean,
   children: React.ReactChild[] | React.ReactChild,
   className?: string,
@@ -127,12 +127,12 @@ const Card = (props: CardPropTypes): React.ReactElement => {
 
   const tagOptions = ['div', 'section', 'footer', 'header', 'article', 'aside', 'main', 'nav']
   const Tag = tagOptions.includes(tag) ? tag : 'div'
-  
+
   return (
     <>
     {
       draggableItem ? (
-        <Draggable.Item dragId={dragId} 
+        <Draggable.Item dragId={dragId}
             key={dragId}
         >
         <Tag
@@ -140,14 +140,14 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             className={classnames(cardCss, globalProps(props), className)}
             {...restHtmlProps}
-            style={mergedStyles} 
+            style={mergedStyles}
         >
           {subComponentTags('Header')}
           {
             dragHandle ? (
               <Flex>
                 <span className="card_draggable_handle">
-                  <Icon 
+                  <Icon
                       icon="grip-dots-vertical"
                       paddingRight="xs"
                       verticalAlign="middle"
@@ -169,7 +169,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               className={classnames(cardCss, globalProps(props), className)}
               {...restHtmlProps}
-              style={mergedStyles} 
+              style={mergedStyles}
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -24,7 +24,7 @@ $additional_colors: (
   "neutral_subtle": $neutral_subtle,
 );
 $background_colors: map-merge($product_colors, $additional_colors);
-$pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors), $category_colors);
+$pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $additional_colors), $category_colors), $status_colors);
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -67,4 +67,24 @@
   <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
     Body
   <% end %>
-<% end %>
+<% end %>
+
+<%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success" }) do %>
+    <%= pb_rails("body", props: { text: "Success", dark: true }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>
+
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error" }) do %>
+    <%= pb_rails("body", props: { text: "Error", dark: true }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Body
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -181,6 +181,56 @@ const CardHeader = (props) => {
                     />
                 </Card.Body>
             </Card>
+
+            <Title
+                {...props}
+                marginBottom='sm'
+                size={4}
+                tag="h4"
+                text="Status Colors"
+            />
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="success"
+                >
+                    <Body
+                        dark
+                        text="Success"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="error"
+                >
+                    <Body
+                        dark
+                        text="Error"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
         </>
     )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -1,12 +1,33 @@
+@import "../tokens/colors";
+
 [class^=pb_gauge_kit] {
 
+  .fix {
+    fill: $text_lt_default;
+    stroke: none;
+
+    &[class*=dark] {
+      fill: $text_dk_default;
+    }
+  }
+
   .suffix {
     fill: $text_lt_light;
+    stroke: none;
     font: $regular $font_larger $font_family_base;
+
+    &[class*=dark] {
+      fill: $text_dk_light;
+    }
   }
   .prefix {
     fill: $text_lt_light;
+    stroke: none;
     font: $regular $font_base $font_family_base;
+
+    &[class*=dark] {
+      fill: $text_dk_light;
+    }
   }
 
   rect.highcharts-background {
@@ -16,4 +37,13 @@
   .gauge-pane {
     stroke-linejoin: round;
   }
-}
+
+  &[class*=dark] {
+    color: $text_dk_default;
+
+    .pb_title_kit_size_1,
+    .pb_caption_kit_xs {
+        color: $text_dk_light;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -164,9 +164,9 @@ const Gauge = ({
             color: defaultColors.text_lt_default,
             enabled: true,
             format:
-              `<span class="prefix">${prefix}</span>` +
-              '<span class="fix">{y:,f}</span>' +
-              `<span class="suffix">${suffix}</span>`,
+              `<span class="prefix${dark ? " dark" : ""}">${prefix}</span>` +
+              `<span class="fix${dark ? " dark" : ""}">{y:,f}</span>` +
+              `<span class="suffix${dark ? " dark" : ""}">${suffix}</span>`,
             style: {
               fontFamily: typography.font_family_base,
               fontWeight: typography.regular,

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -17,47 +17,60 @@ const GaugeComplex = (props) => (
       gap="sm"
       padding="xl"
       wrap
+      {...props}
   >
     <FlexItem
         flex={1}
         grow
+        {...props}
     >
       <Card
           maxWidth="xs"
           padding="md"
+          {...props}
       >
         <Title
             paddingBottom="sm"
             size={4}
             text="Abandoned Calls"
+            {...props}
         />
-        <Flex align="stretch">
+        <Flex
+            align="stretch"
+            {...props}
+        >
           <Flex
               marginRight="sm"
               orientation="column"
+              {...props}
           >
             <Body
                 color="light"
                 paddingBottom="sm"
                 text="Total Abandoned"
+                {...props}
             />
             <Flex
                 align="baseline"
                 paddingBottom="xs"
+                {...props}
             >
               <Title
                   size={1}
                   text="39"
+                  {...props}
               />
               <Title
                   color="light"
                   size={3}
                   text="calls"
+                  {...props}
               />
             </Flex>
             <Caption
                 size="xs"
                 text="of 390"
+                {...props}
             />
           </Flex>
 
@@ -65,22 +78,29 @@ const GaugeComplex = (props) => (
               alignSelf="stretch"
               marginRight="sm"
               orientation="vertical"
+              {...props}
           />
 
           <Flex
               orientation="column"
               wrap
+              {...props}
           >
               <Body
                   color="light"
                   text="% Abandoned"
-               />
-            <Flex wrap>
+                  {...props}
+              />
+            <Flex
+                wrap
+                {...props}
+            >
               <FlexItem
                   fixedSize="150px"
                   overflow="hidden"
                   shrink
-              > 
+                  {...props}
+              >
                 <Gauge
                     chartData={data}
                     disableAnimation
@@ -90,7 +110,7 @@ const GaugeComplex = (props) => (
                     {...props}
                 />
                </FlexItem>
-            </Flex>  
+            </Flex>
           </Flex>
         </Flex>
       </Card>