playbook_ui 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924 → 12.31.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 34a695910f67fbd8f8a01279fe53bcfd4115ca6fc419a2a4f598b48464ade926
-  data.tar.gz: d17f2e8534379076372aa29bcf3daadbb83acc5fc47bb5be5bd3ff31a2541461
+  metadata.gz: 39c902d86406eacebfff3d633131660ecfdaf57e1d7b0f9480e1e9090e958501
+  data.tar.gz: a617f4fda7d3e3ed0b6de62504710c4962cdb70c3d59877057fe082262aec1f6
 SHA512:
-  metadata.gz: 82adeb777f4240ec21972169b4866a1b857597d02f63c30859b30e3a407abdd62427807e837beef23780136a9002c01513cc6478ca0c023c8fc5c564ea3ac52f
-  data.tar.gz: fdc73b9b2eed6973de5a14011ce0240cf3c84fcff6e9f8e454ceecf15de721a974958d349803d6657302b682cf8ed64ac4a1f87f97971f818c2607a20ce9b012
+  metadata.gz: 00f0e49f95ed90f0e6a1567cb4ff0448c48e77580f3c7ee02dcdbb060e3a472527007f9026f5486508c7ab3bb12d2a3b5d189605549ee1803c91c377a81ec671
+  data.tar.gz: b37a1a86dc19ff217a582a712161b34b6e4f7875c0b35a040b2c55030c61aa7076ee909555a9df9d4100e2441b9459ea0b391d0dabfec25cd89b191e96148d55

data/app/pb_kits/playbook/_playbook.scss

@@ -110,5 +110,7 @@
 @import './utilities/display';
 @import './utilities/flexbox';
 @import './utilities/focus';
+@import './utilities/border_radius';
+@import './utilities/hover';
 
 @import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -37,6 +37,11 @@
     border-radius: $pb_badge_height / 2;
   }
 
+  &[class*=_notification] {
+    background: $primary;
+    color: $white;
+  }
+
   &.dark {
     border-width: 0;
 

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -24,7 +24,7 @@ type BadgeProps = {
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
   text?: string,
-  variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
+  variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
 } & GlobalProps
 const Badge = (props: BadgeProps) => {
   const {

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -6,7 +6,7 @@ module Playbook
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[success warning error info neutral primary],
+                     values: %w[success warning error info neutral notification primary],
                      default: "neutral"
 
       def classname

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -93,3 +93,16 @@ test('displays success variant', () => {
     cleanup()
 
 })
+
+test('displays notification variant', () => {
+  render(
+    <Badge
+        data={{ testid: testId }}
+        text="1"
+        variant="notification"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`pb_badge_kit_notification`)
+  cleanup()
+})

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb

@@ -0,0 +1,12 @@
+<div>
+  <%= pb_rails("badge", props: {
+    text: "1",
+    variant: "notification",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "4",
+    variant: "notification"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Badge from '../_badge'
+
+const BadgeNotification = (props) => {
+  return (
+    <>
+      <Badge
+          rounded
+          text="1"
+          variant="notification"
+          {...props}
+      />
+
+      &nbsp;
+
+      <Badge
+          text="4"
+          variant="notification"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default BadgeNotification

data/app/pb_kits/playbook/pb_badge/docs/example.yml

@@ -3,9 +3,10 @@ examples:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
- 
+  - badge_notification: Notification
 
   react:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
+  - badge_notification: Notification

data/app/pb_kits/playbook/pb_badge/docs/index.js

@@ -1,3 +1,4 @@
 export { default as BadgeDefault } from './_badge_default'
 export { default as BadgeRounded } from './_badge_rounded'
 export { default as BadgeColors } from './_badge_colors'
+export { default as BadgeNotification } from './_badge_notification'

data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx

@@ -0,0 +1,40 @@
+import React from "react"
+import { Button } from "../../"
+
+const ButtonHover = (props) => (
+  <div>
+    <div>
+      <Button
+          hover={{ shadow: "deep" }}
+          marginRight='lg'
+          marginTop='xl'
+          onClick={() => alert("button clicked!")}
+          tabIndex={0}
+          text='Shadow Deep'
+          {...props}
+      />{" "}
+      <Button
+          hover={{ shadow: "deeper" }}
+          marginRight='lg'
+          marginTop='xl'
+          onClick={() => alert("button clicked!")}
+          tabIndex={0}
+          text='Shadow Deeper'
+          variant='secondary'
+          {...props}
+      />{" "}
+      <Button
+          hover={{ shadow: "deepest" }}
+          marginRight='lg'
+          marginTop='xl'
+          onClick={() => alert("button clicked!")}
+          tabIndex={0}
+          text='Shadow Deepest'
+          variant='link'
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default ButtonHover

data/app/pb_kits/playbook/pb_button/docs/example.yml

@@ -21,3 +21,4 @@ examples:
   - button_options: Button Additional Options (onClick)
   - button_size: Button Size
   - button_form: Button Form Attribute
+  - button_hover: Button Hover

data/app/pb_kits/playbook/pb_button/docs/index.js

@@ -8,3 +8,4 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'
 export { default as ButtonForm } from './_button_form.jsx'
+export { default as ButtonHover } from './_button_hover.jsx'

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

@@ -3,7 +3,6 @@
 
 [class^=pb_card_kit] {
   @include pb_card;
-  padding: $space_md;
 
   &[class*=_selected] {
     @include pb_card_selected;
@@ -26,7 +25,6 @@
     flex-shrink: 0;
     flex-basis: auto;
     min-height: 1px;
-    padding: $space_sm;
     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 {
@@ -59,7 +57,6 @@
     flex-basis: auto;
     min-height: 1px;
     border: 0;
-    padding: $space_md;
   }
 
   &[class*=_highlight] {

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

@@ -42,10 +42,10 @@ type CardBodyProps = {
 
 // Header component
 const Header = (props: CardHeaderProps) => {
-  const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
+  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)
+  const headerSpacing = globalProps(props, { padding })
 
   return (
     <div className={classnames(headerCSS, headerSpacing, className)}>
@@ -57,9 +57,9 @@ const Header = (props: CardHeaderProps) => {
 
 // Body component
 const Body = (props: CardBodyProps) => {
-  const { children, className } = props
+  const { children, padding = 'md', className } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-  const bodySpacing = globalProps(props)
+  const bodySpacing = globalProps(props, { padding })
 
   return (
     <div className={classnames(bodyCSS, bodySpacing, className)}>
@@ -80,6 +80,7 @@ const Card = (props: CardPropTypes) => {
     highlight = {},
     selected = false,
     tag = 'div',
+    padding = 'md',
   } = props
   const borderCSS = borderNone == true ? 'border_none' : ''
   const selectedCSS = selected == true ? 'selected' : 'deselected'
@@ -113,7 +114,7 @@ const Card = (props: CardPropTypes) => {
     <Tag
         {...ariaProps}
         {...dataProps}
-        className={classnames(cardCss, globalProps(props), className)}
+        className={classnames(cardCss, globalProps(props, { padding }), className)}
     >
       {subComponentTags('Header')}
       {nonHeaderChildren}

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -4,7 +4,9 @@
     class: object.classname,
     aria: object.aria,
     dark: object.dark) do %>
-    <%= content.presence %>
+  <%= pb_rails("card/card_body", props: { padding: object.body_padding, flex_direction: object.body_flex_direction, flex_wrap: object.body_flex_wrap, justify_content: object.body_justify_content, justify_self: object.body_justify_self, align_items: object.body_align_items, align_content: object.body_align_content, align_self: object.body_align_self, flex: object.body_flex, flex_grow: object.body_flex_grow, flex_shrink: object.body_flex_shrink, order: object.body_order }) do %>
+    <%= content %>
+  <% end if content.present? %>
 <% end %>
 
 

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

@@ -28,6 +28,102 @@ module Playbook
                            highlight_color_class)
       end
 
+      def body_padding
+        if padding.present?
+          ""
+        else
+          "p_md"
+        end
+      end
+
+      def body_flex_direction
+        if flex_direction.present?
+          "flex_direction_#{flex_direction}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_wrap
+        if flex_wrap.present?
+          "flex_wrap_#{flex_wrap}"
+        else
+          ""
+        end
+      end
+
+      def body_justify_content
+        if justify_content.present?
+          "justify_content_#{justify_content}"
+        else
+          ""
+        end
+      end
+
+      def body_justify_self
+        if justify_self.present?
+          "justify_self_#{justify_self}"
+        else
+          ""
+        end
+      end
+
+      def body_align_items
+        if align_items.present?
+          "align_items_#{align_items}"
+        else
+          ""
+        end
+      end
+
+      def body_align_content
+        if align_content.present?
+          "align_content_#{align_content}"
+        else
+          ""
+        end
+      end
+
+      def body_align_self
+        if align_self.present?
+          "align_self_#{align_self}"
+        else
+          ""
+        end
+      end
+
+      def body_flex
+        if flex.present?
+          "flex_#{flex}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_grow
+        if flex_grow.present?
+          "flex_grow_#{flex_grow}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_shrink
+        if flex_shrink.present?
+          "flex_shrink_#{flex_shrink}"
+        else
+          ""
+        end
+      end
+
+      def body_order
+        if order.present?
+          "order_#{order}"
+        else
+          ""
+        end
+      end
+
     private
 
       def selected_class

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

@@ -4,99 +4,7 @@ module Playbook
   module PbCard
     class CardBody < Playbook::KitBase
       def classname
-        generate_classname("pb_card_body_kit", flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
-      end
-
-      def body_padding
-        "" if padding.present?
-      end
-
-      def body_flex_direction
-        if flex_direction.present?
-          "flex_direction_#{flex_direction}"
-        else
-          ""
-        end
-      end
-
-      def body_flex_wrap
-        if flex_wrap.present?
-          "flex_wrap_#{flex_wrap}"
-        else
-          ""
-        end
-      end
-
-      def body_justify_content
-        if justify_content.present?
-          "justify_content_#{justify_content}"
-        else
-          ""
-        end
-      end
-
-      def body_justify_self
-        if justify_self.present?
-          "justify_self_#{justify_self}"
-        else
-          ""
-        end
-      end
-
-      def body_align_items
-        if align_items.present?
-          "align_items_#{align_items}"
-        else
-          ""
-        end
-      end
-
-      def body_align_content
-        if align_content.present?
-          "align_content_#{align_content}"
-        else
-          ""
-        end
-      end
-
-      def body_align_self
-        if align_self.present?
-          "align_self_#{align_self}"
-        else
-          ""
-        end
-      end
-
-      def body_flex
-        if flex.present?
-          "flex_#{flex}"
-        else
-          ""
-        end
-      end
-
-      def body_flex_grow
-        if flex_grow.present?
-          "flex_grow_#{flex_grow}"
-        else
-          ""
-        end
-      end
-
-      def body_flex_shrink
-        if flex_shrink.present?
-          "flex_shrink_#{flex_shrink}"
-        else
-          ""
-        end
-      end
-
-      def body_order
-        if order.present?
-          "order_#{order}"
-        else
-          ""
-        end
+        generate_classname("pb_card_body_kit", padding, flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss

@@ -1,9 +1,6 @@
 @import "./tokens/colors";
-@import "./tokens/spacing";
 
 [class^=pb_collapsible_kit] {
-  padding: $space_md;
-
   .toggle-content {
     display: none;
     height: 0;
@@ -21,11 +18,3 @@
       color: $primary
   }
 }
-
-[class^=pb_collapsible_main_kit] {
-  padding: $space_md;
-}
-
-[class^=pb_collapsible_content_kit] {
-  padding: $space_md;
-}

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -19,6 +19,7 @@ type CollapsibleProps = {
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
   iconSize?: typeof IconSizes
   id?: string,
+  padding?: string,
 }
 
 const useCollapsible = (initial = false) => {
@@ -39,6 +40,7 @@ const Collapsible = ({
   iconColor = 'default',
   iconSize,
   id,
+  padding = 'md',
   ...props
 }: CollapsibleProps) => {
   const [isCollapsed, collapse] = useCollapsible(collapsed)
@@ -57,7 +59,7 @@ const Collapsible = ({
   const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss('pb_collapsible_kit'),
-    globalProps(props),
+    globalProps(props, { padding }),
     className
   )
 

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -9,16 +9,18 @@ import CollapsibleContext from '../context'
 export type CollapsibleContentProps = {
   children?: React.ReactNode[] | React.ReactNode | string,
   className?: string,
+  padding?: string,
 }
 
 const CollapsibleContent = ({
   children,
   className,
+  padding = 'md',
   ...props
 }: CollapsibleContentProps) => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
-  const contentSpacing = globalProps(props)
+  const contentSpacing = globalProps(props, { padding })
 
   return (
     <AnimateHeight

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -31,6 +31,7 @@ const colorMap = {
 type CollapsibleMainProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
+  padding?: string,
   cursor?: string,
 
 }
@@ -62,11 +63,12 @@ const CollapsibleMain = ({
   children,
   className,
   cursor = 'pointer',
+  padding = 'md',
   ...props
 }: CollapsibleMainProps): React.ReactElement=> {
   const context: {[key: string]: IconColors | (() => void)} | boolean = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
-  const mainSpacing = globalProps(props, { cursor })
+  const mainSpacing = globalProps(props, { cursor, padding })
 
   return (
     <div className={classnames(mainCSS, className, mainSpacing)}>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Collapsible } from '../..'
 
 const CollapsibleDefault = () => (
-  <Collapsible >
+  <Collapsible>
     <Collapsible.Main>
       <div>{'Main Section'}</div>
     </Collapsible.Main>

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -263,18 +263,6 @@
 	}	
 }
 
-[class*="dialog_body"] {
-  padding: $space_sm;
-}
-
-[class*="dialog_header"] {
-  padding: $space_sm;
-}
-
-[class*="dialog_footer"] {
-  padding: $space_sm;
-}
-
 //styles specific to rails version of kit
 // rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
 .pb_dialog_wrapper_rails {

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx

@@ -11,9 +11,9 @@ type DialogBodyProps = {
 
 // Body component
 const DialogBody = (props: DialogBodyProps) => {
-  const { children, className } = props
+  const { children, padding = "sm", className } = props
   const bodyCSS = buildCss("dialog_body")
-  const bodySpacing = globalProps(props)
+  const bodySpacing = globalProps(props, { padding })
 
   return (
     <div className={classnames(bodyCSS, bodySpacing, className)}>

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx

@@ -25,13 +25,16 @@ type DialogFooterProps = {
 const DialogFooter = (props: DialogFooterProps) => {
   const {
     children,
+    padding = "sm",
+    paddingBottom = "sm",
+    paddingX = "sm",
     className,
     spacing = "between",
     separator = false,
   } = props
 
   const footerCSS = buildCss("dialog_footer")
-  const footerSpacing = globalProps(props)
+  const footerSpacing = globalProps(props, { padding, paddingBottom, paddingX })
 
   return (
     <>

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx

@@ -28,6 +28,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
     children,
     className,
     data = {},
+    padding = "sm",
     spacing = "between",
     closeable = true,
     separator = true,
@@ -37,7 +38,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
   const dataProps = buildDataProps(data)
   const api = useContext(DialogContext)
   const headerCSS = buildCss("dialog_header")
-  const headerSpacing = globalProps(props)
+  const headerSpacing = globalProps(props, { padding })
 
   /* eslint-disable react/jsx-handler-names */