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 ? (
- <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}
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;
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.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>
</>
)
}
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>.