playbook_ui 6.2.1 → 6.3.0

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -52,7 +52,10 @@ $pb_icon_circle_sizes: (
   @each $color_name, $color_value in $colors {
     &[class*=_#{$color_name}] {
       color: $color_value;
-      background: rgba($color_value, $opacity-1);
+      background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+      &.dark {
+        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_5);
+      }
     }
   }
 }

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

@@ -0,0 +1,42 @@
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "comment",
+  variant: "royal",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "archive",
+  variant: "blue",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "arrow-alt-right",
+  variant: "purple",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "cloud",
+  variant: "teal",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "award",
+  variant: "red",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "bolt",
+  variant: "yellow",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "calendar",
+  variant: "green",
+  size: "sm"
+}) %>

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

@@ -0,0 +1,59 @@
+import React from 'react'
+import { IconCircle } from '../../'
+
+const IconCircleColorDark = () => {
+  return (
+    <div>
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="royal"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="blue"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="purple"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="teal"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="red"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="yellow"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="green"
+      />
+    </div>
+  )
+}
+
+export default IconCircleColorDark

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"
+}) %>