playbook_ui 6.2.0 → 7.0.0.pre.alpha3

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "user"
+}) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { IconCircle } from '../../'
+
+const IconCircleDark = () => {
+  return (
+    <div>
+      <IconCircle
+          dark
+          icon="rocket"
+          size="md"
+      />
+    </div>
+  )
+}
+
+export default IconCircleDark

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb

@@ -2,22 +2,22 @@
   icon: "comment",
   size: "xs"
 }) %>
-
+<br />
 <%= pb_rails("icon_circle", props: {
   icon: "comment",
   size: "sm"
 }) %>
-
+<br />
 <%= pb_rails("icon_circle", props: {
   icon: "comment",
   size: "md"
 }) %>
-
+<br />
 <%= pb_rails("icon_circle", props: {
   icon: "comment",
   size: "lg"
 }) %>
-
+<br />
 <%= pb_rails("icon_circle", props: {
   icon: "comment",
   size: "xl"

data/app/pb_kits/playbook/pb_icon_circle/docs/{_icon_circle_size.jsx → _icon_circle_sizes.jsx}

@@ -1,7 +1,7 @@
 import React from 'react'
 import { IconCircle } from '../..'
 
-const IconCircleSize = () => {
+const IconCircleSizes = () => {
   return (
     <div>
       <IconCircle
@@ -27,4 +27,4 @@ const IconCircleSize = () => {
   )
 }
 
-export default IconCircleSize
+export default IconCircleSizes

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.html.erb

@@ -0,0 +1,29 @@
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "comment",
+  size: "xs"
+}) %>
+<br />
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "comment",
+  size: "sm"
+}) %>
+<br />
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "comment",
+  size: "md"
+}) %>
+<br />
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "comment",
+  size: "lg"
+}) %>
+<br />
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "comment",
+  size: "xl"
+}) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { IconCircle } from '../..'
+
+const IconCircleSizesDark = () => {
+  return (
+    <div>
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="md"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="lg"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="xl"
+      />
+    </div>
+  )
+}
+
+export default IconCircleSizesDark

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

@@ -4,8 +4,15 @@ examples:
   - icon_circle_default: Default
   - icon_circle_sizes: Size
   - icon_circle_color: Color
+  - icon_circle_dark: Dark
+  - icon_circle_sizes_dark: Dark Size
+  - icon_circle_color_dark: Dark Color
+  
 
   react:
   - icon_circle_default: Default
-  - icon_circle_size: Size
+  - icon_circle_sizes: Size
   - icon_circle_color: Color
+  - icon_circle_dark: Dark
+  - icon_circle_sizes_dark: Dark Size
+  - icon_circle_color_dark: Dark Color

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

@@ -1,3 +1,6 @@
 export { default as IconCircleColor } from './_icon_circle_color.jsx'
 export { default as IconCircleDefault } from './_icon_circle_default.jsx'
-export { default as IconCircleSize } from './_icon_circle_size.jsx'
+export { default as IconCircleSizes } from './_icon_circle_sizes.jsx'
+export { default as IconCircleDark } from './_icon_circle_dark.jsx'
+export { default as IconCircleColorDark } from './_icon_circle_color_dark.jsx'
+export { default as IconCircleSizesDark } from './_icon_circle_sizes_dark.jsx'

data/app/pb_kits/playbook/pb_icon_value/_icon_value.html.erb

@@ -1,8 +1,9 @@
 <%= content_tag(:div,
-  id: object.id,
+  aria: object.aria,
+  class: object.classname,
   data: object.data,
-  class: object.classname) do %>
-    <%= pb_rails("body", props: { color: "light" }) do %>
+  id: object.id) do %>
+    <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
       <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
       <%= object.text %>
     <% end %>

data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx

@@ -12,6 +12,7 @@ type IconValueProps = {
   align?: "left" | "center" | "right",
   aria?: object,
   className?: string,
+  dark?: boolean,
   data?: object,
   icon: string,
   id?: number,
@@ -23,6 +24,7 @@ const IconValue = (props: IconValueProps) => {
     align = 'left',
     aria = {},
     className,
+    dark,
     data = {},
     icon,
     id,
@@ -30,17 +32,21 @@ const IconValue = (props: IconValueProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const pbCss = buildCss('pb_icon_value_kit', align)
+  const classes = classnames(buildCss('pb_icon_value_kit', align), className, globalProps(props))
 
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(className, pbCss, globalProps(props))}
+        className={classes}
         id={id}
     >
-      <Body color="light">
+      <Body
+          color="light"
+          dark={dark}
+      >
         <Icon
+            dark={dark}
             fixedWidth
             icon={icon}
         />

data/app/pb_kits/playbook/pb_icon_value/_icon_value.scss

@@ -18,6 +18,9 @@
       margin-right: $space-xs !important;
       flex-shrink: 0;
     }
+    &.dark {
+      
+    }
   }
 
   &[class*=_left] {

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

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

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_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,15 +3,17 @@
 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,
   data?: object,
+  date?: date,
   id?: string,
   label: string,
   value?: string,
@@ -19,8 +21,6 @@ type LabelValueProps = {
   icon?: string,
   description?: string,
   title?: string,
-  date?: date,
-  active?: boolean
 }
 
 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}