Skip to content

Commit

Permalink
Fixes for classnames for status colors
Browse files Browse the repository at this point in the history
  • Loading branch information
nidaqg committed Jan 3, 2025
1 parent 9800773 commit 8871fd6
Showing 3 changed files with 79 additions and 3 deletions.
24 changes: 21 additions & 3 deletions playbook/app/pb_kits/playbook/pb_card/_card.scss
Original file line number Diff line number Diff line change
@@ -21,6 +21,14 @@
border-width: 0px;
}

@function ends-with($string, $suffix) {
$suffix-length: str-length($suffix);
@if $suffix-length == 0 {
@return true;
}
@return str-slice($string, -$suffix-length) == $suffix;
}

[class^=pb_card_header_kit] {
flex-grow: 0;
flex-shrink: 0;
@@ -30,9 +38,19 @@
border: 0;
border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
@each $color_name, $color_value in $pb_card_header_colors {
&[class*=_#{"" + $color_name}] {
@include pb_card_header_color($color_value);
color: lightenText($color_value);
@if not ends-with($color_name, '_subtle') {
&[class*="_#{$color_name}"] {
@include pb_card_header_color($color_value);
color: lightenText($color_value);
}
}
}
@each $color_name, $color_value in $pb_card_header_colors {
@if ends-with($color_name, '_subtle') {
&[class*="_#{$color_name}"] {
@include pb_card_header_color($color_value);
color: lightenText($color_value);
}
}
}
@each $color_name, $color_value in $pb_card_header_colors {
18 changes: 18 additions & 0 deletions playbook/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb
Original file line number Diff line number Diff line change
@@ -88,3 +88,21 @@
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: "success_subtle" }) do %>
<%= pb_rails("body", props: { text: "Success Subtle" }) %>
<% 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_subtle" }) do %>
<%= pb_rails("body", props: { text: "Error Subtle"}) %>
<% end %>
<%= pb_rails("card/card_body", props: { padding: "md" }) do %>
Body
<% end %>
<% end %>
40 changes: 40 additions & 0 deletions playbook/app/pb_kits/playbook/pb_card/docs/_card_header.jsx
Original file line number Diff line number Diff line change
@@ -231,6 +231,46 @@ const CardHeader = (props) => {
/>
</Card.Body>
</Card>

<Card
{...props}
marginBottom='sm'
padding="none"
>
<Card.Header
headerColor="success_subtle"
>
<Body
text="Success Subtle"
/>
</Card.Header>
<Card.Body>
<Body
{...props}
text="Body"
/>
</Card.Body>
</Card>

<Card
{...props}
marginBottom='sm'
padding="none"
>
<Card.Header
headerColor="error_subtle"
>
<Body
text="Error Subtle"
/>
</Card.Header>
<Card.Body>
<Body
{...props}
text="Body"
/>
</Card.Body>
</Card>
</>
)
}

0 comments on commit 8871fd6

Please sign in to comment.