From 4ca09f71a4473d92741f7934d7b6812f025703f2 Mon Sep 17 00:00:00 2001 From: Thomas Martin Date: Thu, 19 Dec 2024 15:39:09 -0500 Subject: [PATCH 1/3] Make status colors available to react version of kit --- playbook/app/pb_kits/playbook/pb_card/_card.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_card/_card.tsx b/playbook/app/pb_kits/playbook/pb_card/_card.tsx index 225f40def0..f9f2568d8f 100755 --- a/playbook/app/pb_kits/playbook/pb_card/_card.tsx +++ b/playbook/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 ? ( - { {...dataProps} className={classnames(cardCss, globalProps(props), className)} {...restHtmlProps} - style={mergedStyles} + style={mergedStyles} > {subComponentTags('Header')} { dragHandle ? ( - { {...dataProps} className={classnames(cardCss, globalProps(props), className)} {...restHtmlProps} - style={mergedStyles} + style={mergedStyles} > {subComponentTags('Header')} {nonHeaderChildren} From ab1a88f1a13c00e1ff46e13334c23a04dd85903e Mon Sep 17 00:00:00 2001 From: Thomas Martin Date: Thu, 19 Dec 2024 15:40:05 -0500 Subject: [PATCH 2/3] Add status colors style to both versions of kits --- playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss b/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss index c6e150ccd8..91f92c9b8f 100755 --- a/playbook/app/pb_kits/playbook/pb_card/_card_mixin.scss +++ b/playbook/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; From 594af4828391641a6914bc279436f577049bc621 Mon Sep 17 00:00:00 2001 From: Thomas Martin Date: Thu, 19 Dec 2024 15:41:00 -0500 Subject: [PATCH 3/3] Update kit examples and text description --- .../pb_card/docs/_card_header.html.erb | 22 +++++++- .../playbook/pb_card/docs/_card_header.jsx | 50 +++++++++++++++++++ .../playbook/pb_card/docs/_card_header.md | 2 +- 3 files changed, 72 insertions(+), 2 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb b/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb index 028736d74d..05e4f406a5 100644 --- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +++ b/playbook/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 %> \ No newline at end of file +<% 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 %> diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.jsx b/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.jsx index 6cc397e4c7..2589f9ae4c 100644 --- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +++ b/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.jsx @@ -181,6 +181,56 @@ const CardHeader = (props) => { /> + + + + <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> </> ) } diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.md index 629123d2a1..5e2856ea90 100644 --- a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header.md +++ b/playbook/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>.