Skip to content

Commit

Permalink
[PLAY-1666] Dark Mode Audit Stat Change (#3968)
Browse files Browse the repository at this point in the history 
**What does this PR do?** A clear and concise description with your
runway ticket url.

Updates the Rails and React Stat Change Kit to have correct dark mode
styling.

[Play 1666](https://runway.powerhrg.com/backlog_items/PLAY-1666)

**Screenshots:** Screenshots to visualize your addition/change
<img width="879" alt="Screenshot 2024-12-02 at 3 59 52 PM"
src="https://github.com/user-attachments/assets/74ed5285-2e3c-4213-a3be-e3f6c7ce2b73">

<img width="873" alt="Screenshot 2024-12-02 at 4 00 22 PM"
src="https://github.com/user-attachments/assets/3b870237-db96-490f-93a5-769004f8b8cb">

<img width="877" alt="Screenshot 2024-12-02 at 4 00 07 PM"
src="https://github.com/user-attachments/assets/162a8b5c-96cb-4ba8-9107-937144a0f241">


**How to test?** Steps to confirm the desired behavior:
1. Go to '/kits/stat_change/rails'
2. Click on 'dark mode toggle
3. Scroll down to 'default, icon, and colors examples
4. dark mode style coloring should be visible for default increasing and
decreasing value for body along with dark mode for icon
5. repeat for React kit '/kits/stat_change/react'

#### Checklist:
- [x] **LABELS** Add a label: enhancement, bug, improvement, new kit,
deprecated, or breaking. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
  • Loading branch information
@ASPhillips8
ASPhillips8 authored Dec 9, 2024
1 parent 52c84d4 commit 93bb24c
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 69 deletions.
27 changes: 14 additions & 13 deletions playbook/app/pb_kits/playbook/pb_body/_body.scss
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
@import "./body_mixins";
@import "../tokens/titles";

[class^=pb_body_kit]{
[class^="pb_body_kit"] {
@include pb_body($text_lt_default);
@each $color_name, $color_value in $pb_body_colors {
&[class*=_#{"" + $color_name}] {
@include pb_body($color_value);
}
@each $status_name, $status_value in $pb_body_status {
&[class*=_default_#{$status_name}] {
&[class*="_default_#{$status_name}"] {
@include pb_body($status_value);
}
}
}
@each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
&[class*=_#{$dark_color_name}][class*=dark]{
@each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
&[class*="_#{$dark_color_name}"][class*="dark"] {
@include pb_body($dark_color_value);
}
}
b, strong {
b,
strong {
font-weight: $bold;
}

Expand All @@ -29,7 +30,8 @@
}
}

em, i {
em,
i {
font-style: italic;
}

Expand All @@ -39,26 +41,25 @@
}

@each $status_name, $status_value in $pb_body_status {
&[class*=#{$status_name}] {
&[class*="#{$status_name}"] {
@include pb_body($status_value);
}
}

&[class*=dark] {
&[class*="dark"] {
a {
color: $active_dark;
}
@include pb_body_dark();
@each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
&[class*=_#{$dark_color_name}][class*=dark]{
@each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
&[class*="_#{$dark_color_name}"][class*="dark"] {
@include pb_body($dark_color_value);
}
}
@each $status_name, $status_value in $pb_body_status {
&[class*=_#{$status_name}] {
@each $status_name, $status_value in $pb_dark_body_status {
&[class*="_#{$status_name}"] {
@include pb_body($status_value);
}
}
}

}
38 changes: 22 additions & 16 deletions playbook/app/pb_kits/playbook/pb_body/_body_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,35 @@
@import "../tokens/typography";

$pb_body_colors: (
default: $text_lt_default,
light: $text_lt_light,
lighter: $text_lt_lighter,
link: $primary,
error: $error,
success: $text_lt_success_sm,
default: $text_lt_default,
light: $text_lt_light,
lighter: $text_lt_lighter,
link: $primary,
error: $error,
success: $text_lt_success_sm,
);

$pb_dark_body_colors: (
default: $text_dk_default,
light: $text_dk_light,
lighter: $text_dk_lighter,
link: $active_dark,
error: $error,
success: $text_dk_success_sm,
default: $text_dk_default,
light: $text_dk_light,
lighter: $text_dk_lighter,
link: $active_dark,
error: $error,
success: $text_dk_success_sm,
);

// Order is important here!
$pb_body_status: (
default: $text_lt_default,
negative: $error,
dark_error: $error_dark_body,
positive: $text_lt_success_sm,
default: $text_lt_default,
negative: $error,
dark_error: $error_dark_body,
positive: $text_lt_success_sm,
);

$pb_dark_body_status: (
default: $text_dk_default,
negative: $error_dark,
positive: $text_dk_success_sm,
);

@mixin pb_body($color: $text_lt_default) {
Expand Down
80 changes: 44 additions & 36 deletions playbook/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,46 @@
import React from 'react'
import classnames from 'classnames'
import React from "react"
import classnames from "classnames"

import { buildCss, buildHtmlProps } from '../utilities/props'
import { globalProps } from '../utilities/globalProps'
import { buildCss, buildHtmlProps } from "../utilities/props"
import { globalProps } from "../utilities/globalProps"

import Body from '../pb_body/_body'
import Icon from '../pb_icon/_icon'
import Body from "../pb_body/_body"
import Icon from "../pb_icon/_icon"

const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
increase: 'positive',
decrease: 'negative',
neutral: 'neutral',
const statusMap: {
neutral: "neutral"
decrease: "negative"
increase: "positive"
} = {
increase: "positive",
decrease: "negative",
neutral: "neutral",
}

const iconMap = {
increase: 'arrow-up',
decrease: 'arrow-down',
increase: "arrow-up",
decrease: "arrow-down",
}

type StatChangeProps = {
change?: 'increase' | 'decrease' | 'neutral',
className?: string,
icon?: string,
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
id?: string,
value?: string | number,
change?: "increase" | "decrease" | "neutral"
className?: string
dark?: boolean
icon?: string
id?: string
htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
value?: string | number
}

const StatChange = (props: StatChangeProps): React.ReactElement => {
const {
change = 'neutral',
className,
const {
change = "neutral",
className,
dark = false,
htmlOptions = {},
icon,
id,
value
icon,
id,
value,
} = props

const status = statusMap[change as keyof typeof statusMap]
Expand All @@ -47,30 +53,32 @@ const StatChange = (props: StatChangeProps): React.ReactElement => {

return (
<>
{value &&
{value && (
<div
className={classnames(
buildCss('pb_stat_change_kit', status),
globalProps(props),
className
)}
buildCss("pb_stat_change_kit", status),
globalProps(props),
className
)}
id={id}
{...htmlProps}
>
<Body status={status}>
{returnedIcon &&
<Body dark={dark}
status={status}
>
{" "}
{returnedIcon && (
<>
<Icon
<Icon dark={dark}
fixed_width
icon={returnedIcon}
/>
{' '}
/>{" "}
</>
}
)}
{`${value}%`}
</Body>
</div>
}
)}
</>
)
}
Expand Down
8 changes: 4 additions & 4 deletions playbook/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<%= pb_content_tag do %>
<%= pb_rails("body", props: { status: object.status }) do %>
<%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
<%= "#{object.value}%" if object.value %>
<% end %>
<%= pb_rails("body", props: { status: object.status, dark: object.dark }) do %>
<%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon, dark: object.dark }) if object.returned_icon %>
<%= "#{object.value}%" if object.value %>
<% end %>
<% end %>

0 comments on commit 93bb24c

Please sign in to comment.