playbook_ui 6.1.0.pre.alpha4 → 6.3.0

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "heart",
+  text: "93"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "comment",
+  text: "5",
+  align: "center"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "clock",
+  text: "15m",
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { IconValue } from '../../'
+
+const IconValueAlignDark = () => {
+  return (
+    <div>
+      <IconValue
+          dark
+          icon="heart"
+          text="93"
+      />
+
+      <br />
+
+      <IconValue
+          align="center"
+          dark
+          icon="comment"
+          text="5"
+      />
+
+      <br />
+
+      <IconValue
+          align="right"
+          dark
+          icon="clock"
+          text="15min"
+      />
+    </div>
+  )
+}
+
+export default IconValueAlignDark

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "heart",
+  text: "93"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "comment",
+  text: "5"
+}) %>
+
+<br>
+
+<%= pb_rails("icon_value", props: {
+  dark: true,
+  icon: "clock",
+  text: "15m"
+}) %>

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { IconValue } from '../../'
+
+const IconValueDark = () => {
+  return (
+    <div>
+      <IconValue
+          dark
+          icon="clipboard"
+          text="33-123456"
+      />
+
+      <br />
+
+      <IconValue
+          dark
+          icon="heart"
+          text="93"
+      />
+
+      <br />
+
+      <IconValue
+          dark
+          icon="clock"
+          text="15min"
+      />
+    </div>
+  )
+}
+
+export default IconValueDark

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

@@ -3,7 +3,12 @@ examples:
   rails:
   - icon_value_default: Default
   - icon_value_align: Align
+  - icon_value_dark: Dark
+  - icon_value_align_dark: Align Dark
 
 
   react:
   - icon_value_default: Default
+  - icon_value_align: Align
+  - icon_value_dark: Dark
+  - icon_value_align_dark: Align Dark

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

@@ -1 +1,4 @@
 export { default as IconValueDefault } from './_icon_value_default.jsx'
+export { default as IconValueAlign } from './_icon_value_align.jsx'
+export { default as IconValueDark } from './_icon_value_dark.jsx'
+export { default as IconValueAlignDark } from './_icon_value_align_dark.jsx'

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -6,12 +6,12 @@ import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 type ImageProps = {
-  alt?: String,
+  alt?: string,
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  url: String,
+  id?: string,
+  url: string,
 }
 
 const Image = (props: ImageProps) => {

data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx

@@ -10,11 +10,11 @@ import { Caption, Pill } from '../'
 
 type LabelPillProps = {
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  label?: String,
-  pillValue?: String,
+  id?: string,
+  label?: string,
+  pillValue?: string,
   variant: "error" | "info" | "neutral" | "primary" | "success" | "warning",
 }
 

data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb

@@ -23,4 +23,4 @@
     <% else %>
         <%= pb_rails("body", props: { text: object.value, dark: object.dark }) if object.value.present? %>
     <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx

@@ -3,24 +3,24 @@
 import React from 'react'
 import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 import { Body, Caption, Flex, Icon, Title } from '../'
 
 type LabelValueProps = {
+  active?: boolean,
   aria?: object,
-  className?: String,
-  dark?: Boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  id?: String,
-  label: String,
-  value?: String,
+  date?: date,
+  id?: string,
+  label: string,
+  value?: string,
   variant?: "default" | "details",
-  icon?: String,
-  description?: String,
-  title?: String,
-  date?: Date,
-  active?: Boolean
+  icon?: string,
+  description?: string,
+  title?: string,
 }
 
 const dateString = (value: DateTime) => {
@@ -50,18 +50,14 @@ const LabelValue = (props: LabelValueProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const formattedDate = new DateTime({ value: date })
-  const themeStyle = dark === true ? '_dark' : ''
-  const css = classnames(
-    ['pb_label_value_kit' + themeStyle, className],
-    globalProps(props)
-  )
+  const variantClass = variant === 'details' ? 'details' : ''
+  const classes = classnames(buildCss('pb_label_value_kit', variantClass), globalProps(props), className)
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={css}
-        dark={dark}
+        className={classes}
         description={description}
         icon={icon}
         id={id}

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -4,4 +4,4 @@
   [class^=pb_caption_kit]  {
     margin-bottom: $space-xs/1.5;
   }
-}
+}

data/app/pb_kits/playbook/pb_label_value/label_value.rb

@@ -9,7 +9,6 @@ module Playbook
 
       prop :label, required: true
       prop :value
-      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default details],
                      default: "default"
@@ -21,7 +20,7 @@ module Playbook
 
 
       def classname
-        generate_classname("pb_label_value_kit", variant_class, dark_class)
+        generate_classname("pb_label_value_kit", variant_class)
       end
 
       def date_element
@@ -30,10 +29,6 @@ module Playbook
 
     private
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def variant_class
         variant == "details" ? "details" : nil
       end

data/app/pb_kits/playbook/pb_layout/_layout.jsx

@@ -8,38 +8,38 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type LayoutPropTypes = {
   aria?: object,
-  children?: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  children?: array<React.ReactNode> | React.ReactNode,
+  className?: string,
   collapse?: "xs" | "sm" | "md" | "lg" | "xl",
-  dark?: Boolean,
+  dark?: boolean,
   data?: object,
-  full?: Boolean,
+  full?: boolean,
   position?: "left" | "right",
-  responsive?: Boolean,
+  responsive?: boolean,
   size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
   variant?: "light" | "dark" | "gradient",
-  transparent?: Boolean,
+  transparent?: boolean,
   layout?: "sidebar" | "collection" | "kanban" | "content",
 }
 
 type LayoutSideProps = {
-  children: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
 }
 
 type LayoutBodyProps = {
-  children: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
 }
 
 type LayoutHeaderProps = {
-  children: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
 }
 
 type LayoutFooterProps = {
-  children: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
 }
 
 // Side component

data/app/pb_kits/playbook/pb_legend/_legend.jsx

@@ -9,7 +9,7 @@ import { Body, Title } from '../'
 
 type LegendProps = {
   aria?: object,
-  className?: String,
+  className?: string,
   color?: | "data_1"
     | "data_2"
     | "data_3"
@@ -17,11 +17,11 @@ type LegendProps = {
     | "data_5"
     | "data_6"
     | "data_7",
-  dark?: Boolean,
+  dark?: boolean,
   data?: object,
-  id?: String,
-  prefixText?: String,
-  text: String,
+  id?: string,
+  prefixText?: string,
+  text: string,
 }
 
 const Legend = (props: LegendProps) => {
@@ -38,17 +38,17 @@ const Legend = (props: LegendProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const darkClass = dark ? 'dark' : 'light'
-  const bodyCSS = classnames(
-    buildCss('pb_legend_kit', color, darkClass), className,
-    globalProps(props)
+  const bodyCss = classnames(
+    buildCss('pb_legend_kit', color),
+    globalProps(props),
+    className
   )
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={bodyCSS}
+        className={bodyCss}
         id={id}
     >
       <Body color={dark ? 'lighter' : 'light'}>

data/app/pb_kits/playbook/pb_legend/legend.rb

@@ -10,12 +10,7 @@ module Playbook
       prop :color, type: Playbook::Props::Enum,
                    values: (1..7).map { |n| "data_#{n}" },
                    default: "data_1"
-
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-
       prop :prefix_text
-
       prop :text, required: true
 
       def body_color
@@ -23,7 +18,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_legend_kit", color, dark ? "dark" : "light")
+        generate_classname("pb_legend_kit", color)
       end
     end
   end

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx

@@ -6,24 +6,24 @@ import { globalProps } from '../utilities/globalProps.js'
 import { pbChart } from '../'
 
 type LineGraphProps = {
-  axisTitle?: String,
-  xAxisCategories: Array,
-  yAxisMin: Number,
-  yAxisMax: Number,
-  className?: String,
-  chartData: Array<{
-      name: String,
-      data: Array<Number>,
+  axisTitle?: string,
+  xAxisCategories: array,
+  yAxisMin: number,
+  yAxisMax: number,
+  className?: string,
+  chartData: array<{
+      name: string,
+      data: array<number>,
   }>,
-  gradient?: Boolean,
-  id: String,
-  pointStart: Number,
-  subTitle?: String,
-  title: String,
-  type?: String,
-  legend?: Boolean,
-  toggleLegendClick?: Boolean,
-  height?: String,
+  gradient?: boolean,
+  id: string,
+  pointStart: number,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
 }
 
 export default class LineGraph extends React.Component<LineGraphProps> {

data/app/pb_kits/playbook/pb_list/_list.jsx

@@ -7,18 +7,18 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type ListProps = {
   aria?: object,
-  borderless: Boolean,
-  className?: String,
-  children: Array<Node> | Node,
-  dark: Boolean,
+  borderless: boolean,
+  className?: string,
+  children: array<Node> | Node,
+  dark: boolean,
   data?: object,
-  id?: String,
+  id?: string,
   layout: "" | "left" | "right",
-  ordered: Boolean,
-  role?: String,
-  tabIndex?: String,
-  size?: String,
-  xpadding: Boolean,
+  ordered: boolean,
+  role?: string,
+  tabIndex?: string,
+  size?: string,
+  xpadding: boolean,
 }
 
 const List = (props: ListProps) => {