RubyGems - playbook_ui - Versions diffs - 6.1.0 → 7.0.0.pre.alpha2 - Mend

playbook_ui 6.1.0 → 7.0.0.pre.alpha2

Files changed (385) hide show

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

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 ADDED

@@ -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 ADDED

@@ -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 ADDED

@@ -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 ADDED

@@ -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 ADDED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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