playbook_ui 12.12.0 → 12.13.0.pre.alpha.addingProductTokens439

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx

@@ -5,22 +5,22 @@ const LegendColors = (props) => (
   <div>
     <Legend
         color="data_8"
-        text="Windows"
+        text="Data 8"
         {...props}
     />
     <Legend
         color="warning"
-        text="Windows"
+        text="Warning"
         {...props}
     />
     <Legend
-        color="windows"
-        text="Windows"
+        color="product_6_highlight"
+        text="Product 6 (highlight)"
         {...props}
     />
     <Legend
         color="category_7"
-        text="Windows"
+        text="Category 7"
         {...props}
     />
   </div>

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("legend", props: { color: "#dc418a", text: "Windows" }) %>
-<%= pb_rails("legend", props: { color: "#3ef0b8", text: "Windows" }) %>
-<%= pb_rails("legend", props: { color: "#ab8b04", text: "Windows" }) %>
+<%= pb_rails("legend", props: { color: "#dc418a", text: "Custom Legend Color 1" }) %>
+<%= pb_rails("legend", props: { color: "#3ef0b8", text: "Custom Legend Color 2" }) %>
+<%= pb_rails("legend", props: { color: "#ab8b04", text: "Custom Legend Color 3" }) %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx

@@ -5,17 +5,17 @@ const LegendCustomColors = (props) => (
   <div>
     <Legend
         color="#dc418a"
-        text="Windows"
+        text="Custom Legend Color 1"
         {...props}
     />
     <Legend
         color="#3ef0b8"
-        text="Windows"
+        text="Custom Legend Color 2"
         {...props}
     />
     <Legend
         color="#ab8b04"
-        text="Windows"
+        text="Custom Legend Color 3"
         {...props}
     />
   </div>

data/app/pb_kits/playbook/pb_selectable_list/_item.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import classnames from "classnames";
+
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+
+import Checkbox from "../pb_checkbox/_checkbox";
+import ListItem from "../pb_list/_list_item";
+import Radio from "../pb_radio/_radio";
+
+export type SelectableListItemProps = {
+  aria?: { [key: string]: string };
+  children: React.ReactNode[] | React.ReactNode;
+  checked?: boolean;
+  className?: string;
+  data?: object;
+  defaultChecked?: boolean;
+  id?: string;
+  label?: string;
+  text?: string;
+  name?: string;
+  value?: string;
+  variant?: string;
+  onChange: (arg: React.ChangeEvent<HTMLInputElement>  | null) => void;
+};
+
+const SelectableListItem = ({
+  aria = {},
+  checked = false,
+  children,
+  className,
+  data = {},
+  defaultChecked,
+  id,
+  label,
+  text = "",
+  name = "",
+  value = "",
+  variant = "checkbox",
+  onChange = () => {},
+  ...props
+}: SelectableListItemProps) => {
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_selectable_list_item_kit"),
+    globalProps(props),
+    className
+  );
+
+  const initialCheckedState = checked;
+  const [checkedState, setCheckedState] = useState(initialCheckedState);
+
+  const handleChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event);
+    setCheckedState(event.target.checked);
+  };
+
+  return (
+    <ListItem
+      {...props}
+      className={classnames(checkedState ? "checked_item" : "", className)}
+    >
+      <div {...ariaProps} {...dataProps} className={classes}>
+        {variant == "checkbox" && (
+          <>
+            <Checkbox
+              checked={checkedState}
+              id={id}
+              name={name}
+              onChange={handleChecked}
+              // eslint suppressor, text is needed to display on screen
+              //@ts-ignore
+              text={label || (text && false)}
+              type="checkbox"
+              value={value}
+              {...props}
+            />
+            {children}
+          </>
+        )}
+        {variant == "radio" && (
+          <>
+            <Radio
+              defaultChecked={defaultChecked}
+              id={id}
+              label={label}
+              name={name}
+              onChange={onChange}
+              //@ts-ignore
+              text={label}
+              type="radio"
+              value={value}
+              {...props}
+            />
+            {children}
+          </>
+        )}
+        {variant !== "checkbox" && variant !== "radio" && (
+          { children }
+        )}
+      </div>
+    </ListItem>
+  );
+};
+
+export default SelectableListItem;

data/app/pb_kits/playbook/pb_selectable_list/{_selectable_list.jsx → _selectable_list.tsx}

@@ -1,16 +1,16 @@
-/* @flow */
 import React, { useState } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { SelectableListItemProps } from './_item.js'
 
 import List from  '../pb_list/_list'
-import SelectableListItem from './_item.jsx'
+import SelectableListItem from './_item'
 
 type SelectableListProps = {
-  aria?: object,
-  children?: Node,
+  aria?: {[key: string]: string },
+  children?: React.ReactElement[],
   className?: string,
   data?: object,
   id?: string,
@@ -30,17 +30,18 @@ const SelectableList = (props: SelectableListProps) => {
   const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
   const dataProps = buildDataProps(data)
   const isRadio = props.variant === "radio"
-  const defaultCheckedRadioValue = children.filter(item => item.props.defaultChecked)[0]?.props?.value
+  const defaultCheckedRadioValue = children.filter((item: {props:SelectableListItemProps} ) => item.props.defaultChecked)[0]?.props?.value
+
   const [selectedRadioValue, setSelectedRadioValue] = useState(defaultCheckedRadioValue)
   
-  const onChangeRadioValue = ({ target }) => {
+  const onChangeRadioValue = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
     setSelectedRadioValue(target.value)
   }
 
   let selectableListItems = children
 
   if (isRadio) {
-    selectableListItems = children.map(({ props }) => {
+    selectableListItems = children.map(( {props}: {props:SelectableListItemProps} ) => {
       return (
         <SelectableListItem
             {...props}
@@ -51,6 +52,7 @@ const SelectableList = (props: SelectableListProps) => {
       )
     })
   }
+
   
   return (
     <div
@@ -59,13 +61,13 @@ const SelectableList = (props: SelectableListProps) => {
         className={classes}
         id={id}
     >
-      <List {...props}>
+      <List variant={props.variant}>
         {selectableListItems}
       </List>
     </div>
   )
 }
-
+ 
 SelectableList.Item = SelectableListItem
 
 export default SelectableList

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import SelectableList from './_selectable_list'
+
+const testId = "selectable-list-test"
+
+const SelectableListCheckbox = () => {
+    return (
+      <SelectableList 
+          data={{ testid: testId }} 
+          variant="checkbox">
+        <SelectableList.Item
+            label="Mild"
+            name="checkbox-name-1"
+            value="1"
+        />
+        <SelectableList.Item
+            checked
+            label="Medium"
+            name="checkbox-name-2"
+            value="2"
+        />
+      </SelectableList>
+    )
+}
+
+const SelectableListRadio = () => {
+    return (
+        <SelectableList
+            data={{ testid: testId }}
+            variant="radio">
+        <SelectableList.Item
+            label="Small"
+            name="radio"
+            value="1"
+        />
+        <SelectableList.Item
+            defaultChecked
+            label="Medium"
+            name="radio"
+            value="2"
+        />
+      </SelectableList>
+    )
+}
+
+
+test("classname renders as expected", () => {
+   render(<SelectableListCheckbox />)
+
+   const kit = screen.getByTestId("selectable-list-test")
+   expect(kit).toHaveClass("pb_selectable_list_kit")
+})
+
+test("renders variant checkbox", () => {
+    render(<SelectableListCheckbox />)
+    const kit = screen.getByTestId("selectable-list-test")
+    const checkbox = kit.querySelector(".pb_checkbox_kit")
+    expect(checkbox).toBeInTheDocument()
+})
+
+test("renders variant radio", () => {
+    render(<SelectableListRadio />)
+    const kit = screen.getByTestId("selectable-list-test")
+    const checkbox = kit.querySelector(".pb_radio_kit")
+    expect(checkbox).toBeInTheDocument()
+
+})

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb

@@ -9,22 +9,22 @@
     </tr>
   </thead>
   <tbody>
-    <%= pb_rails("table/table_row", props: { side_highlight_color: "solar" }) do %>
-			<td>Solar</td>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "product_1_highlight" }) do %>
+			<td>Product 1</td>
 			<td>Value 2</td>
 			<td>Value 3</td>
 			<td>Value 4</td>
 			<td>Value 5</td>
     <% end %>
-		<%= pb_rails("table/table_row", props: { side_highlight_color: "roofing" }) do %>
-			<td>Roofing</td>
+		<%= pb_rails("table/table_row", props: { side_highlight_color: "product_2_highlight" }) do %>
+			<td>Product 2</td>
 			<td>Value 2</td>
 			<td>Value 3</td>
 			<td>Value 4</td>
 			<td>Value 5</td>
     <% end %>
-    <%= pb_rails("table/table_row", props: { side_highlight_color: "gutters" }) do %>
-			<td>Gutters</td>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "product_3_highlight" }) do %>
+			<td>Product 3</td>
 			<td>Value 2</td>
 			<td>Value 3</td>
 			<td>Value 4</td>

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx

@@ -21,30 +21,30 @@ const TableSideHighlight = (props) => {
         </thead>
         <tbody>
           <TableRow
-              sideHighlightColor="solar"
+              sideHighlightColor="product_1_highlight"
               {...props}
           >
-            <td>{'Solar'}</td>
+            <td>{'Product 1'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
           <TableRow
-              sideHighlightColor="roofing"
+              sideHighlightColor="product_2_highlight"
               {...props}
           >
-            <td>{'Roofing'}</td>
+            <td>{'Product 2'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
           <TableRow
-              sideHighlightColor="gutters"
+              sideHighlightColor="product_3_highlight"
               {...props}
           >
-            <td>{'Gutters'}</td>
+            <td>{'Product 3'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -213,22 +213,62 @@ $status_color_text: (
 $primary_action:      $primary !default;
 
 /* Product colors ---------------------*/
-$windows:             $royal !default;
-$siding:              $yellow !default;
-$doors:               $teal !default;
-$solar:               $green !default;
-$roofing:             $slate !default;
-$gutters:             $purple !default;
-$insulation:          $red !default;
+$product_1_background:  #003DB2 !default;
+$product_1_highlight:   #0057FF !default;
+$product_2_background:  #6000AC !default;
+$product_2_highlight:   #8200E9 !default;
+$product_3_background:  #B85C00 !default;
+$product_3_highlight:   #CE7500 !default;
+$product_4_background:  #007E8F !default;
+$product_4_highlight:   #00B9D2 !default;
+$product_5_background:  #760B24 !default;
+$product_5_highlight:   #B8032E !default;
+$product_6_background:  #008540 !default;
+$product_6_highlight:   #00A851 !default;
+$product_7_background:  #96006C !default;
+$product_7_highlight:   #CD0094 !default;
+$product_8_background:  #144075 !default;
+$product_8_highlight:   #1A569E !default;
+$product_9_background:  #fcc419 !default;
+$product_9_highlight:   #ffd43b !default;
+$product_10_background: #20c997 !default;
+$product_10_highlight:  #38d9a9 !default;
+$windows:               $product_1_background !default; // deprecated
+$siding:                $product_2_background !default; // deprecated
+$doors:                 $product_3_background !default; // deprecated
+$solar:                 $product_4_background !default; // deprecated
+$roofing:               $product_5_background !default; // deprecated
+$gutters:               $product_6_background !default; // deprecated
+$insulation:            $product_7_background !default; // deprecated
 $product_colors: (
-  windows:            $windows,
-  siding:             $siding,
-  doors:              $doors,
-  solar:              $solar,
-  roofing:            $roofing,
-  gutters:            $gutters,
-  insulation:         $insulation
-);
+  windows:                $windows,
+  siding:                 $siding,
+  doors:                  $doors,
+  solar:                  $solar,
+  roofing:                $roofing,
+  gutters:                $gutters,
+  insulation:             $insulation,
+  product_1_background:   $product_1_background,
+  product_1_highlight:    $product_1_highlight,
+  product_2_background:   $product_2_background,
+  product_2_highlight:    $product_2_highlight,
+  product_3_background:   $product_3_background,
+  product_3_highlight:    $product_3_highlight,
+  product_4_background:   $product_4_background,
+  product_4_highlight:    $product_4_highlight,
+  product_5_background:   $product_5_background,
+  product_5_highlight:    $product_5_highlight,
+  product_6_background:   $product_6_background,
+  product_6_highlight:    $product_6_highlight,
+  product_7_background:   $product_7_background,
+  product_7_highlight:    $product_7_highlight,
+  product_8_background:   $product_8_background,
+  product_8_highlight:    $product_8_highlight,
+  product_9_background:   $product_9_background,
+  product_9_highlight:    $product_9_highlight,
+  product_10_background:  $product_10_background,
+  product_10_highlight:   $product_10_highlight
+) !default;
 
 /* Category colors ---------------------*/
 $category_1:   $royal !default;

data/app/pb_kits/playbook/utilities/_colors.scss

@@ -1,3 +1,5 @@
+// Color Helper Utilities
+
 @function shade($color, $percentage) {
   @return mix($charcoal, $color, $percentage);
 }
@@ -14,9 +16,12 @@
   @return $text_color;
 }
 
+
+// Generate Color Helper Classes
+
 @mixin background-color($colors-list) {
   @each $name, $color in $colors-list {
-    .#{$name} {
+    .pb_web_#{$name} {
       background-color: $color !important;
     }
   }
@@ -28,15 +33,4 @@
       color: $color !important;
     }
   }
-}
-
-.bg_gradient {
-  background: $gradient_start;
-  background: -moz-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
-  background: -webkit-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
-  background: linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$gradient_start}', endColorstr='#{$gradient_end}',GradientType=1 );
-}
-
-@include text-color($text_colors);
-@include background-color($background_colors);
+}

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.11.0"
-  VERSION = "12.12.0"
+  PREVIOUS_VERSION = "12.13.0"
+  VERSION = "12.13.0.pre.alpha.addingProductTokens439"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.12.0
+  version: 12.13.0.pre.alpha.addingProductTokens439
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-03-30 00:00:00.000000000 Z
+date: 2023-04-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1843,9 +1843,9 @@ files:
 - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb
 - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb
 - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.test.js
-- app/pb_kits/playbook/pb_selectable_list/_item.jsx
-- app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
+- app/pb_kits/playbook/pb_selectable_list/_item.tsx
 - app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss
+- app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx
 - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb
 - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx
 - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb
@@ -1854,6 +1854,7 @@ files:
 - app/pb_kits/playbook/pb_selectable_list/docs/index.js
 - app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb
 - app/pb_kits/playbook/pb_selectable_list/selectable_list.rb
+- app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js
 - app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb
 - app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb
 - app/pb_kits/playbook/pb_source/_source.scss
@@ -2461,7 +2462,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2472,12 +2473,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Playbook Design System
 test_files: []

data/app/pb_kits/playbook/pb_selectable_list/_item.jsx

@@ -1,106 +0,0 @@
-/* @flow */
-
-import React, { Node, useState } from 'react'
-import classnames from 'classnames'
-
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Checkbox from '../pb_checkbox/_checkbox'
-import ListItem from '../pb_list/_list_item'
-import Radio from '../pb_radio/_radio'
-
-type SelectableListItemProps = {
-  aria?: object,
-  children: array<Node> | Node,
-  checked?: boolean,
-  className?: string,
-  data?: object,
-  defaultChecked?: boolean,
-  id?: string,
-  label?: string,
-  text?: string,
-  name?: string,
-  value?: string,
-  variant?: string,
-  onChange: (boolean)=>void,
-}
-
-const SelectableListItem = ({
-  aria = {},
-  checked = false,
-  children,
-  className,
-  data = {},
-  defaultChecked,
-  id,
-  label,
-  text = '',
-  name = '',
-  value = '',
-  variant = 'checkbox',
-  onChange = () => {},
-  ...props
-}: SelectableListItemProps) => {
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_selectable_list_item_kit'),
-    globalProps(props),
-    className
-  )
-
-  const initialCheckedState = checked
-  const [checkedState, setCheckedState] = useState(initialCheckedState)
-
-  const handleChecked = (event) => {
-    onChange(event)
-    setCheckedState(event.target.checked)
-  }
-
-  return (
-    <ListItem 
-        {...props}
-        className={classnames(checkedState ? "checked_item" : "", className)}
-    >
-      <div
-          {...ariaProps}
-          {...dataProps}
-          className={classes}
-      >
-        <Choose>
-          <When condition={variant == 'checkbox'}>
-            <Checkbox
-                checked={checkedState}
-                id={id}
-                name={name}
-                onChange={handleChecked}
-                // eslint suppressor, text is needed to display on screen
-                text={label || (text && false)}
-                type="checkbox"
-                value={value}
-                {...props}
-            />
-            {children}
-          </When>
-          <When condition={variant == 'radio'}>
-            <Radio
-                defaultChecked={defaultChecked}
-                id={id}
-                label={label}
-                name={name}
-                onChange={onChange}
-                type="radio"
-                value={value}
-                {...props}
-            />
-            {children}
-          </When>
-          <Otherwise>{children}</Otherwise>
-        </Choose>
-      </div>
-    </ListItem>
-  )
-}
-
-export default SelectableListItem