playbook_ui 12.14.0 → 12.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a42d45fa9c0cb3563d9253c5c676edcd535e813873bca8f31162258372554bb9
-  data.tar.gz: 162a8abeed8d622e81d218e90c6a1d693a17d068d489234cbd0fb39f2c50ac7e
+  metadata.gz: '03281cc1b427fa58d12d5fdda8a4c4d2cc8084c2bb8b57d1f8eab0666b833571'
+  data.tar.gz: 6b12d9e8c14770af46560d1c47600ae8866973a96dbde010998f86de8fad929d
 SHA512:
-  metadata.gz: de1b0f03c8ca91aedae5581617fab0920bde4bfbaa034137021a0f3fe87932a6cb963231f9add0470a606046341d3c5a0b8d3819803ae7eb34af9415f4c340b6
-  data.tar.gz: e5f9702e6a3f812e3ae0080cc604406fbc7f115f2b1fcf7f83e2537e9502a833d93436abe3f3c9c0795d013791f62ba43631be32298891143a8fbf58728f2ef4
+  metadata.gz: 9711f9bbac20056a5d7e66a5f2ce1385c520ab8a25d7d4505f23ab04e015d251f7eda1f561d7e9becaf8eefd9d04d9cf35dd5fabba5711397240f79318ce39ca
+  data.tar.gz: d8d4f3c94fe38322ebbf9c14e607cb35f0834bd064795a235664551c56ee593b5ee5d9a0f1d175a826f93a50e5733e18ebef507281015c1e3eb88010ced4942c

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -67,7 +67,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
       >
         { canShowImage && (
           <Image
-              alt={imageAlt}
+              alt={imageAlt ? imageAlt : name}
               onError={handleError}
               url={imageUrl}
           />

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria) do %>
   <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
-    <%= pb_rails("image", props: { alt: object.image_alt, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
+    <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
   <% end %>
   <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
 <% end %>

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -25,6 +25,10 @@ module Playbook
         { status: status, classname: "size_#{size}" }
       end
 
+      def alt_text
+        image_alt.present? ? image_alt : name
+      end
+
       def handle_img_error
         "this.style.display = 'none'"
       end

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -28,3 +28,17 @@ test('loads the given image url and name', () => {
   expect(image).toHaveAttribute('src', imageUrl)
   expect(image).toHaveAttribute('alt', imageAlt)
 })
+
+test('uses the name prop as the alt property if no imageAlt prop is passed in', () => {
+  render(
+    <Avatar
+        data={{ testid: testId }}
+        imageUrl={imageUrl}
+        name={name}
+    />
+  )
+
+  const image    = screen.getByAltText(name)
+
+  expect(image).toHaveAttribute('alt', name)
+})

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb

@@ -1,7 +1,6 @@
 <%= pb_rails("avatar", props: {
     name: "Terry Johnson",
     size: "xxs",
-    image_alt: "Terry Johnson Standing",
     image_url: "https://randomuser.me/api/portraits/men/44.jpg",
     status: "away"
   }) %>

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -33,6 +33,19 @@
         color: lightenText($color_value);
       }
     }
+    @each $color_name, $color_value in $pb_card_header_colors {
+      &[class*=_#{$color_name}_striped] {
+        @if ((type-of($color_value) == color)) {
+          background: repeating-linear-gradient(
+            45deg,
+            $color_value,
+            $color_value 10px,
+            lighten( $color_value, 5% ) 10px,
+            lighten( $color_value, 5% ) 20px
+          );
+        }
+      }
+    }
     &[class*=_white] {
       border-bottom: 1px solid $border_light;
     }

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -28,6 +28,7 @@ type CardPropTypes = {
 
 type CardHeaderProps = {
   headerColor?: BackgroundColors | ProductColors | CategoryColors | "none",
+  headerColorStriped?: boolean,
   children: React.ReactChild[] | React.ReactChild,
   className?: string,
   padding?: string,
@@ -41,8 +42,8 @@ type CardBodyProps = {
 
 // Header component
 const Header = (props: CardHeaderProps) => {
-  const { children, className, headerColor = 'category_1', padding = 'sm' } = props
-  const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`)
+  const { children, className, headerColor = 'category_1', headerColorStriped = false, padding = 'sm' } = props
+  const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`, headerColorStriped ? 'striped' : '')
 
   const headerSpacing = globalProps(props, { padding })
 

data/app/pb_kits/playbook/pb_card/card_header.rb

@@ -5,9 +5,17 @@ module Playbook
     class CardHeader < Playbook::KitBase
       prop :header_color, type: Playbook::Props::String,
                           default: "category_1"
+      prop :header_color_striped, type: Playbook::Props::Boolean,
+                                  default: false
 
       def classname
-        generate_classname("pb_card_header_kit", header_color)
+        generate_classname("pb_card_header_kit", header_color, color_striped_classname)
+      end
+
+    private
+
+      def color_striped_classname
+        header_color_striped ? "striped" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -57,3 +57,14 @@
     Body
   <% end %>
 <% end %>
+
+<%= pb_rails("title", props: { text: "Striped 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: "category_1", header_color_striped: true }) do %>
+    <%= pb_rails("body", props: { text: "Striped Category 1", dark: true }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
+    Body
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -1,158 +1,188 @@
 import React from 'react'
-
 import Card from '../_card'
 import Title from '../../pb_title/_title'
 import Body from '../../pb_body/_body'
 
 const CardHeader = (props) => {
-  return (
-    <div>
-      <Title
-          {...props}
-          marginBottom='sm'
-          size={4}
-          tag="h4"
-          text="Category Colors"
-      />
+    return (
+        <>
+            <Title
+                {...props}
+                marginBottom='sm'
+                size={4}
+                tag="h4"
+                text="Category Colors"
+            />
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header headerColor="category_1" >
+                    <Body
+                        dark
+                        text="Category 1"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
+
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="category_3"
+                >
+                    <Body text="Category 3" />
+                </Card.Header>
+                <Card.Body
+                    padding="md"
+                >
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
 
-      <Card
-          {...props}
-          marginBottom='sm'
-          padding="none"
-      >
-        <Card.Header headerColor="category_1" >
-          <Body
-              dark
-              text="Category 1"
-          />
-        </Card.Header>
-        <Card.Body>
-          <Body
-              {...props}
-              text="Body"
-          />
-        </Card.Body>
-      </Card>
 
-      <Card
-          {...props}
-          marginBottom='sm'
-          padding="none"
-      >
-        <Card.Header
-            headerColor="category_3"
-        >
-          <Body text="Category 3" />
-        </Card.Header>
-        <Card.Body
-            padding="md"
-        >
-          <Body
-              {...props}
-              text="Body"
-          />
-        </Card.Body>
-      </Card>
+            <Title
+                {...props}
+                marginBottom='sm'
+                size={4}
+                tag="h4"
+                text="Product Colors"
+            />
 
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="product_2_background"
+                >
+                    <Body
+                        {...props}
+                        dark
+                        text="Product 2 Background"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
 
-      <Title
-          {...props}
-          marginBottom='sm'
-          size={4}
-          tag="h4"
-          text="Product Colors"
-      />
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header headerColor="product_6_background" >
+                    <Body
+                        {...props}
+                        dark
+                        text="Product 6 Background"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
 
-      <Card
-          {...props}
-          marginBottom='sm'
-          padding="none"
-      >
-        <Card.Header
-            headerColor="product_2_background"
-        >
-          <Body
-              {...props}
-              dark
-              text="Product 2 Background"
-          />
-        </Card.Header>
-        <Card.Body>
-          <Body
-              {...props}
-              text="Body"
-          />
-        </Card.Body>
-      </Card>
 
-      <Card
-          {...props}
-          marginBottom='sm'
-          padding="none"
-      >
-        <Card.Header headerColor="product_6_background" >
-          <Body
-              {...props}
-              dark
-              text="Product 6 Background"
-          />
-        </Card.Header>
-        <Card.Body>
-          <Body
-              {...props}
-              text="Body"
-          />
-        </Card.Body>
-      </Card>
+            <Title
+                {...props}
+                marginBottom='sm'
+                size={4}
+                tag="h4"
+                text="Background Colors"
+            />
 
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="white"
+                >
+                    <Body text="White" />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
 
-      <Title
-          {...props}
-          marginBottom='sm'
-          size={4}
-          tag="h4"
-          text="Background Colors"
-      />
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="dark"
+                >
+                    <Body
+                        dark
+                        text="Dark"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
 
-      <Card
-          {...props}
-          marginBottom='sm'
-          padding="none"
-      >
-        <Card.Header
-            headerColor="white"
-        >
-          <Body text="White" />
-        </Card.Header>
-        <Card.Body>
-          <Body
-              {...props}
-              text="Body"
-          />
-        </Card.Body>
-      </Card>
+            <Title
+                {...props}
+                marginBottom='sm'
+                size={4}
+                tag="h4"
+                text="Striped Colors"
+            />
 
-      <Card
-          {...props}
-          padding="none"
-      >
-        <Card.Header
-            headerColor="dark"
-        >
-          <Body
-              dark
-              text="Dark"
-          />
-        </Card.Header>
-        <Card.Body>
-          <Body
-              {...props}
-              text="Body"
-          />
-        </Card.Body>
-      </Card>
-    </div>
-  )
+            <Card
+                {...props}
+                marginBottom='sm'
+                padding="none"
+            >
+                <Card.Header
+                    headerColor="category_1"
+                    headerColorStriped
+                >
+                    <Body
+                        dark
+                        text="Striped Category 1"
+                    />
+                </Card.Header>
+                <Card.Body>
+                    <Body
+                        {...props}
+                        text="Body"
+                    />
+                </Card.Body>
+            </Card>
+        </>
+    )
 }
 
 export default CardHeader

data/app/pb_kits/playbook/pb_star_rating/{_star_rating.jsx → _star_rating.tsx}

@@ -1,14 +1,12 @@
-/* @flow */
+import React from "react"
+import classnames from "classnames"
 
-import React from 'react'
-import classnames from 'classnames'
+import { buildAriaProps, buildDataProps } from "../utilities/props"
 
-import { buildAriaProps, buildDataProps } from '../utilities/props'
-
-import Icon from '../pb_icon/_icon'
+import Icon from "../pb_icon/_icon"
 
 type StarRatingProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
   data?: object,
   fixedWidth?: boolean,
@@ -16,7 +14,7 @@ type StarRatingProps = {
   icon?: string,
   id?: string,
   rating: number,
-}
+};
 
 const StarRating = ({
   aria = {},
@@ -29,15 +27,15 @@ const StarRating = ({
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames([
-    'pb_star_rating_kit', className,
+    "pb_star_rating_kit", className,
   ])
 
   const starCount = () => (
-    [...Array(parseInt(rating))]
+    [...Array(Math.floor(rating))]
   )
 
   const hasHalfStar = () => (
-    parseFloat(rating) % 1 !== 0
+    rating % 1 !== 0
   )
 
   return (
@@ -47,12 +45,11 @@ const StarRating = ({
         className={css}
         id={id}
     >
-      <If condition={!hideRating}>
-        <div className="pb_star_rating_number">
-          {rating}
-        </div>
-      </If>
-
+    {!hideRating && (
+      <div className="pb_star_rating_number">
+        {rating}
+      </div>
+    )}
       <div className="pb_star_rating_wrapper">
         <div className="pb_star_rating_highlight">
           {starCount().map((_, index) => (
@@ -62,13 +59,12 @@ const StarRating = ({
                 key={index}
             />
           ))}
-
-          <If condition={hasHalfStar()}>
+          {hasHalfStar() && (
             <Icon
-                fixedWidth={false}
-                icon="star-half"
+              fixedWidth={false}
+              icon="star-half"
             />
-          </If>
+          )}
         </div>
 
         <div className="pb_star_rating_base">

data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+
+import StarRating from "./_star_rating";
+
+const testId = "star-rating-kit";
+
+describe("Star Rating Kit", () => {
+  test("Expects to have correct classname", () => {
+    render(
+      <StarRating
+          data={{ testid: testId }}
+          rating={2}
+      />
+    );
+
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_star_rating_kit");
+
+  });
+
+  test('should render aria-label', () => {
+    render(
+      <StarRating
+          aria={{ label: testId }}
+          data={{ testid: testId }}
+          rating={2}
+      />
+    );
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+  });
+
+  test("Displays two highlighted stars", () => {
+    render(
+      <StarRating
+          data={{ testid: testId }}
+          rating={2}
+      />
+    );
+
+
+    const kit = screen.getByTestId(testId);
+    const highlight = kit.querySelector(".pb_star_rating_highlight");
+    const stars = highlight.querySelectorAll(".far.fa-star");
+    const count = stars.length;
+
+    expect(count).toBe(2);
+  });
+
+  test("Displays three highlighted stars and a half star", () => {
+    render(
+      <StarRating
+          data={{ testid: testId }}
+          rating={3.5}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const highlight = kit.querySelector(".pb_star_rating_highlight");
+    const stars = highlight.querySelectorAll(".far.fa-star");
+    const halfStars = highlight.querySelectorAll(".far.fa-star-half");
+    const starCount = stars.length;
+    const halfStarCount = halfStars.length;
+
+    expect(starCount).toBe(3);
+    expect(halfStarCount).toBe(1);
+  });
+});

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

@@ -1,3 +1,143 @@
+.cursor_default {
+  cursor: default;
+}
+
+.cursor_context_menu {
+  cursor: context-menu;
+}
+
+.cursor_help {
+  cursor: help;
+}
+
 .cursor_pointer {
   cursor: pointer;
-}
+}
+
+.cursor_progress {
+  cursor: progress;
+}
+
+.cursor_wait {
+  cursor: wait;
+}
+
+.cursor_cell {
+  cursor: cell;
+}
+
+.cursor_crosshair {
+  cursor: crosshair;
+}
+
+.cursor_text {
+  cursor: text;
+}
+
+.cursor_vertical_text {
+  cursor: vertical-text;
+}
+
+.cursor_alias {
+  cursor: alias;
+}
+
+.cursor_copy {
+  cursor: copy;
+}
+
+.cursor_move {
+  cursor: move;
+}
+
+.cursor_no_drop {
+  cursor: no-drop;
+}
+
+.cursor_not_allowed {
+  cursor: not-allowed;
+}
+
+.cursor_all_scroll {
+  cursor: all-scroll;
+}
+
+.cursor_col_resize {
+  cursor: col-resize;
+}
+
+.cursor_row_resize {
+  cursor: row-resize;
+}
+
+.cursor_n_resize {
+  cursor: n-resize;
+}
+
+.cursor_e_resize {
+  cursor: e-resize;
+}
+
+.cursor_s_resize {
+  cursor: s-resize;
+}
+
+.cursor_w_resize {
+  cursor: w-resize;
+}
+
+.cursor_ne_resize {
+  cursor: ne-resize;
+}
+
+.cursor_nw_resize {
+  cursor: nw-resize;
+}
+
+.cursor_se_resize {
+  cursor: se-resize;
+}
+
+.cursor_sw_resize {
+  cursor: sw-resize;
+}
+
+.cursor_ew_resize {
+  cursor: ew-resize;
+}
+
+.cursor_ns_resize {
+  cursor: ns-resize;
+}
+
+.cursor_nsew_resize {
+  cursor: nsew-resize;
+}
+
+.cursor_nwes_resize {
+  cursor: nwes-resize;
+}
+
+.cursor_zoom_in {
+  cursor: zoom-in;
+}
+
+.cursor_zoom_out {
+  cursor: zoom-out;
+}
+
+.cursor_grab {
+  cursor: grab;
+}
+
+.cursor_grabbing {
+  cursor: grabbing;
+}
+
+.cursor_none {
+  cursor: none;
+}
+
+.cursor_auto {
+  cursor: auto;
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -29,7 +29,10 @@ type BorderRadius = {
 }
 
 type Cursor = {
-  cursor?: "pointer",
+  cursor?: "auto" | "default" | "none" | "contextMenu" | "help" | "pointer" | "progress" | "wait" | "cell" |
+  "crosshair" | "text" | "verticalText" | "alias" | "copy" | "move" | "noDrop" | "notAllowed" | "grab" |
+  "grabbing" | "eResize" | "nResize" | "neResize" | "nwResize" | "sResize" | "seResize" | "swResize" | "wResize" |
+  "ewResize" | "nsResize" | "neswResize" | "nwseResize" | "colResize" | "rowResize" | "allScroll" | "zoomIn" | "zoomOut",
 }
 
 type Dark = {
@@ -209,7 +212,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
   },
   cursorProps: ({ cursor }: Cursor) => {
     let css = ''
-    css += cursor ? `cursor_${cursor} ` : ''
+    css += cursor ? `cursor_${camelToSnakeCase(cursor)}` : ''
     return css
   },
   alignContentProps: ({ alignContent }: AlignContent) => {

data/lib/playbook/cursor.rb

@@ -12,7 +12,7 @@ module Playbook
 
       selected_props.map do |k|
         cursor_value = send(k)
-        "cursor_#{cursor_value}" if cursor_values.include? cursor_value
+        "cursor_#{cursor_value.underscore}" if cursor_values.include? cursor_value
       end.compact.join(" ")
     end
 
@@ -23,7 +23,7 @@ module Playbook
     end
 
     def cursor_values
-      %w[pointer]
+      %w[auto default none contextMenu help pointer progress wait cell crosshair text verticalText alias copy move noDrop notAllowed grab grabbing eResize nResize neResize nwResize sResize seResize swResize wResize ewResize nsResize neswResize nwseResize colResize rowResize allScroll zoomIn zoomOut]
     end
   end
 end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.13.0"
-  VERSION = "12.14.0"
+  PREVIOUS_VERSION = "12.14.0"
+  VERSION = "12.15.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.14.0
+  version: 12.15.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-04-06 00:00:00.000000000 Z
+date: 2023-04-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1873,8 +1873,8 @@ files:
 - app/pb_kits/playbook/pb_source/source.html.erb
 - app/pb_kits/playbook/pb_source/source.rb
 - app/pb_kits/playbook/pb_source/source.test.js
-- app/pb_kits/playbook/pb_star_rating/_star_rating.jsx
 - app/pb_kits/playbook/pb_star_rating/_star_rating.scss
+- app/pb_kits/playbook/pb_star_rating/_star_rating.tsx
 - app/pb_kits/playbook/pb_star_rating/docs/_description.md
 - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb
 - app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx
@@ -1884,6 +1884,7 @@ files:
 - app/pb_kits/playbook/pb_star_rating/docs/index.js
 - app/pb_kits/playbook/pb_star_rating/star_rating.html.erb
 - app/pb_kits/playbook/pb_star_rating/star_rating.rb
+- app/pb_kits/playbook/pb_star_rating/star_rating.test.js
 - app/pb_kits/playbook/pb_stat_change/_stat_change.scss
 - app/pb_kits/playbook/pb_stat_change/_stat_change.tsx
 - app/pb_kits/playbook/pb_stat_change/docs/_description.md