playbook_ui 8.1.0.pre.alpha1 → 8.1.0

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb

@@ -1,11 +1,9 @@
 <div class="pb--doc-demo-row">
   
   <%= pb_rails("avatar_action_button", props: {
-      link_aria_label: "Alert Sophia Carden",
       name: "Sophia Carden",
       id: "clickable",
       link_url: "http://www.google.com",
-      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
   }) %>
 

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb

@@ -1,33 +1,25 @@
 <div class="pb--doc-demo-row">
   
   <%= pb_rails("avatar_action_button", props: {
-      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
-      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       placement: "bottom_left"
   }) %>
 
   <%= pb_rails("avatar_action_button", props: {
-      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
-      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       placement: "bottom_right"
   }) %>
 
     <%= pb_rails("avatar_action_button", props: {
-      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
-      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       placement: "top_left"
   }) %>
 
     <%= pb_rails("avatar_action_button", props: {
-      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
-      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       placement: "top_right"
   }) %>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx

@@ -4,33 +4,25 @@ import { AvatarActionButton } from '../../'
 const AvatarActionButtonPlacement = (props) => (
   <div className="pb--doc-demo-row">
     <AvatarActionButton
-        imageAlt="Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
-        linkAriaLabel="Sophia Carden"
         name="Sophia Carden"
         placement="bottom_left"
         {...props}
     />
     <AvatarActionButton
-        imageAlt="Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
-        linkAriaLabel="Sophia Carden"
         name="Sophia Carden"
         placement="bottom_right"
         {...props}
     />
     <AvatarActionButton
-        imageAlt="Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
-        linkAriaLabel="Sophia Carden"
         name="Sophia Carden"
         placement="top_left"
         {...props}
     />
     <AvatarActionButton
-        imageAlt="Sophia Carden"
         imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
-        linkAriaLabel="Sophia Carden"
         name="Sophia Carden"
         placement="top_right"
         {...props}

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb

@@ -1,10 +1,8 @@
 <div class="pb--doc-demo-row">
   
   <%= pb_rails("avatar_action_button", props: {
-      link_aria_label: "Sophia Carden",
       name: "Sophia Carden",
       link_url: "http://www.google.com",
-      image_alt: "Sophia Carden",
       image_url: "https://randomuser.me/api/portraits/women/8.jpg",
       tooltip_text: "Tooltip Text",
       tooltip_id: "avatar_1",

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

@@ -3,7 +3,6 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
-import { Icon } from '../'
 
 import {
   buildAriaProps,
@@ -14,15 +13,8 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: string,
-  closeProps?: {
-    onClick?: EventHandler,
-    onMouseDown?: EventHandler,
-    onTouchEnd?: EventHandler,
-  },
   data?: object,
   id?: string,
-  removeIcon?: Boolean,
-  removeOnClick?: EventHandler,
   rounded?: boolean,
   text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
@@ -31,11 +23,8 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
-    closeProps = {},
     data = {},
     id,
-    removeIcon = false,
-    removeOnClick = () => {},
     rounded = false,
     text,
     variant = 'neutral',
@@ -55,21 +44,7 @@ const Badge = (props: BadgeProps) => {
         className={css}
         id={id}
     >
-      <span>
-        <If condition={removeIcon}>
-          <span
-              onClick={removeOnClick}
-              style={{ cursor: 'pointer' }}
-              {...closeProps}
-          >
-            <Icon
-                fixedWidth
-                icon="times"
-            />
-          </span>
-        </If>
-        {text}
-      </span>
+      <span>{text}</span>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -2,7 +2,6 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 import Icon from '../pb_icon/_icon.jsx'
@@ -14,7 +13,6 @@ type ButtonPropTypes = {
   },
   children?: array<React.ReactChild>,
   className?: string | array<string>,
-  data?: object,
   disabled?: boolean,
   fixedWidth?: boolean,
   fullWidth?: boolean,
@@ -71,7 +69,6 @@ const Button = (props: ButtonPropTypes) => {
   const {
     children,
     className,
-    data = {},
     disabled,
     icon = null,
     id,
@@ -85,7 +82,6 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const dataProps = buildDataProps(data)
   const css = classnames(
     buttonClassName(props),
     globalProps(props),
@@ -115,7 +111,6 @@ const Button = (props: ButtonPropTypes) => {
     <If condition={link !== null}>
       <a
           {...buttonAria}
-          {...dataProps}
           className={css}
           href={link}
           id={id}
@@ -127,7 +122,6 @@ const Button = (props: ButtonPropTypes) => {
       <Else />
       <button
           {...buttonAria}
-          {...dataProps}
           className={css}
           disabled={disabled}
           id={id}

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

@@ -30,6 +30,7 @@ const ButtonDefault = (props) => (
         {...props}
     />
   </div>
+
 )
 
 export default ButtonDefault

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -12,7 +12,7 @@ type CaptionProps = {
   data?: object,
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
-  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div",
   text?: string,
   variant?: null | "link",
 }
@@ -29,8 +29,7 @@ const Caption = (props: CaptionProps) => {
     text,
     variant = null,
   } = props
-  const tagOptions = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div', 'caption']
-  const Tag = tagOptions.includes(tag) ? tag : 'div'
+  const Tag = `${tag}`
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -7,7 +7,7 @@ module Playbook
                   values: %w[xs sm md base lg xl],
                   default: "md"
       prop :tag, type: Playbook::Props::Enum,
-                 values: %w[h1 h2 h3 h4 h5 h6 p span div caption],
+                 values: %w[h1 h2 h3 h4 h5 h6 p span div],
                  default: "div"
       prop :text
       prop :variant, type: Playbook::Props::Enum,

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

@@ -3,16 +3,14 @@
 import React from 'react'
 import { get } from 'lodash'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type CardPropTypes = {
-  aria?: object,
   borderNone?: boolean,
   borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded",
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
-  data?: object,
   highlight?: {
     position?: "side" | "top",
     color?: string,
@@ -20,7 +18,6 @@ type CardPropTypes = {
   padding?: string,
   selected?: boolean,
   shadow?: "none" | "deep" | "deeper" | "deepest",
-  tag?: "div" | "section" | "footer" | "header" | "article" | "aside" | "main" | "nav",
 }
 
 type CardHeaderProps = {
@@ -65,16 +62,13 @@ const Body = (props: CardBodyProps) => {
 
 const Card = (props: CardPropTypes) => {
   const {
-    aria = {},
     borderNone = false,
     borderRadius = 'md',
     children,
     className,
-    data = {},
     highlight = {},
     selected = false,
     shadow = 'none',
-    tag = 'div',
     padding = 'md',
   } = props
   const borderCSS = borderNone == true ? 'border_none' : ''
@@ -84,8 +78,6 @@ const Card = (props: CardPropTypes) => {
     [`highlight_${highlight.position}`]: highlight.position,
     [`highlight_${highlight.color}`]: highlight.color,
   })
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
 
   // coerce to array
   const cardChildren =
@@ -101,18 +93,11 @@ const Card = (props: CardPropTypes) => {
 
   const nonHeaderChildren = cardChildren.filter((child) => (get(child, 'type.displayName') !== 'Header'))
 
-  const tagOptions = ['div', 'section', 'footer', 'header', 'article', 'aside', 'main', 'nav']
-  const Tag = tagOptions.includes(tag) ? tag : 'div'
-
   return (
-    <Tag
-        {...ariaProps}
-        {...dataProps}
-        className={classnames(cardCss, globalProps(props, { padding }), className)}
-    >
+    <div className={classnames(cardCss, globalProps(props, { padding }), className)}>
       {subComponentTags('Header')}
       {nonHeaderChildren}
-    </Tag>
+    </div>
   )
 }
 

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

@@ -1,4 +1,4 @@
-<%= content_tag(object.tag,
+<%= content_tag(:div,
     id: object.id,
     data: object.data,
     class: object.classname,

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

@@ -9,9 +9,6 @@ module Playbook
                     default: "none"
       prop :highlight, type: Playbook::Props::Hash,
                        default: {}
-      prop :tag, type: Playbook::Props::Enum,
-                 values: %w[div section footer header article aside main nav],
-                 default: "div"
       prop :border_none, type: Playbook::Props::Boolean,
                          default: false
       prop :border_radius, type: Playbook::Props::Enum,

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

@@ -4,7 +4,6 @@ examples:
   - card_highlight: Highlight Cards
   - card_header: Header Cards
   - card_selected: Selected
-  - card_tag: HTML Tag
   - card_padding: Padding Size
   - card_shadow: Shadow Size
   - card_content: Content Size
@@ -16,7 +15,6 @@ examples:
   - card_highlight: Highlight Cards
   - card_header: Header Cards
   - card_selected: Selected
-  - card_tag: HTML Tag
   - card_padding: Padding Size
   - card_shadow: Shadow Size
   - card_content: Content Size

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

@@ -2,7 +2,6 @@ export { default as CardLight } from './_card_light.jsx'
 export { default as CardHighlight } from './_card_highlight.jsx'
 export { default as CardHeader } from './_card_header.jsx'
 export { default as CardSelected } from './_card_selected.jsx'
-export { default as CardTag } from './_card_tag.jsx'
 export { default as CardPadding } from './_card_padding.jsx'
 export { default as CardShadow } from './_card_shadow.jsx'
 export { default as CardContent } from './_card_content.jsx'

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/_colors.scss'
+import typography from '../tokens/_typography.scss'
 
 const dataColors = [
   colors.data_1,

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/_colors.scss'
+import typography from '../tokens/_typography.scss'
 
 import Highcharts from 'highcharts'
 

data/app/pb_kits/playbook/pb_form/_form.scss

@@ -1,12 +1,8 @@
 .pb-form {
   .pb-form-actions {
     list-style: none;
-    margin: 0;
+    margin: 8px;
     padding: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex-direction: row;
 
     > li {
       display: inline-flex;

data/app/pb_kits/playbook/pb_form/form_builder.rb

@@ -19,11 +19,9 @@ module Playbook
         prepend(CollectionSelectField)
         prepend(CheckboxField)
         prepend(DatePickerField)
-      end
 
-      def actions
-        @template.send(:view_context).content_tag :ol, class: "pb-form-actions" do
-          yield ActionArea.new(@template, submit_default_value)
+        def actions(&block)
+          @template.render_component ActionArea.new(submit_default_value: submit_default_value, children: block)
         end
       end
     end

data/app/pb_kits/playbook/pb_form/form_builder/action_area.html.erb

@@ -0,0 +1,3 @@
+<ol class="pb-form-actions">
+  <%= instance_exec(self, &children) %>
+</ol>

data/app/pb_kits/playbook/pb_form/form_builder/action_area.rb

@@ -3,29 +3,22 @@
 module Playbook
   module PbForm
     module FormBuilder
-      class ActionArea
-        def initialize(view_context, submit_default_value)
-          self.view_context = view_context
-          self.submit_default_value = submit_default_value
-        end
+      class ActionArea < Playbook::KitBase
+        prop :submit_default_value, type: Playbook::Props::String
 
         def submit(value = nil, props: {})
           props[:type] ||= "submit"
-          props[:text] ||= value || submit_default_value
-
           button(value, props: props)
         end
 
         def button(value = nil, props:)
-          view_context.content_tag(:li) do
-            view_context.pb_rails("button", props: props)
+          props[:text] ||= value || submit_default_value
+
+          content_tag(:li) do
+            pb_rails("button", props: props)
           end
         end
-
-      private
-
-        attr_accessor :view_context, :submit_default_value
       end
     end
   end
-end
+end