RubyGems - playbook_ui - Versions diffs - 6.8.2.pre.alpha1 → 7.0.0.pre.alpha1 - Mend

playbook_ui 6.8.2.pre.alpha1 → 7.0.0.pre.alpha1

Files changed (627) hide show

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

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

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

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

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

@@ -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/example.yml CHANGED Viewed

@@ -4,15 +4,8 @@ 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_sizes: Size
+  - icon_circle_size: 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 Viewed

@@ -1,6 +1,3 @@
 export { default as IconCircleColor } from './_icon_circle_color.jsx'
 export { default as IconCircleDefault } from './_icon_circle_default.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'
+export { default as IconCircleSize } from './_icon_circle_size.jsx'

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

@@ -1,9 +1,8 @@
 <%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
+  id: object.id,
   data: object.data,
-  id: object.id) do %>
-    <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
+  class: object.classname) do %>
+    <%= pb_rails("body", props: { color: "light" }) 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 Viewed

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

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

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

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

@@ -3,12 +3,7 @@ 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 Viewed

@@ -1,4 +1 @@
 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 Viewed

@@ -25,11 +25,7 @@ const Image = (props: ImageProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(
-    buildCss('pb_image lazyload blur_up'),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, globalProps(props))
   const dataProps = buildDataProps(data)
   return (

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

@@ -30,11 +30,7 @@ const LabelPill = (props: LabelPillProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const css = classnames(
-    'pb_label_pill_kit',
-    globalProps(props),
-    className
-  )
+  const css = classnames(['pb_label_pill_kit', className], globalProps(props))
   return (
     <div

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

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

@@ -3,17 +3,15 @@
 import React from 'react'
 import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { buildAriaProps, 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,
@@ -21,6 +19,8 @@ type LabelValueProps = {
   icon?: string,
   description?: string,
   title?: string,
+  date?: date,
+  active?: boolean
 }
 const dateString = (value: DateTime) => {
@@ -50,14 +50,18 @@ const LabelValue = (props: LabelValueProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const formattedDate = new DateTime({ value: date })
-  const variantClass = variant === 'details' ? 'details' : ''
-  const classes = classnames(buildCss('pb_label_value_kit', variantClass), globalProps(props), className)
+  const themeStyle = dark === true ? '_dark' : ''
+  const css = classnames(
+    ['pb_label_value_kit' + themeStyle, className],
+    globalProps(props)
+  )
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classes}
+        className={css}
+        dark={dark}
         description={description}
         icon={icon}
         id={id}

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

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

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_dark.html.erb ADDED Viewed

@@ -0,0 +1,24 @@
+<%= pb_rails("label_value", props: {
+  label: "Role",
+  value: "Administrator, Moderator",
+  dark: true
+}) %>
+<br>
+<%= pb_rails("label_value", props: {
+  label: "Email",
+  value: "anna.black@powerhrg.com",
+  dark: true
+}) %>
+<br>
+<%= pb_rails("label_value", props: {
+  label: "Bio",
+  value: "Proin pulvinar feugiat massa in luctus. Donec urna nulla,
+    elementum sit amet tincidunt nec, mattis nec urna. Cras viverra
+    lorem odio, id pretium dui interdum ut. Nullam dignissim nisl vitae
+    orci vehicula condimentum.",
+  dark: true
+}) %>

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_dark.jsx ADDED Viewed

@@ -0,0 +1,35 @@
+import React from 'react'
+import { LabelValue } from '../../'
+const LabelValueDark = () => {
+  return (
+    <div>
+      <LabelValue
+          dark
+          label="Role"
+          value="Administrator, Moderator"
+      />
+      <br />
+      <LabelValue
+          dark
+          label="Email"
+          value="anna.black@powerhrg.com"
+      />
+      <br />
+      <LabelValue
+          dark
+          label="Bio"
+          value="Proin pulvinar feugiat massa in luctus. Donec urna nulla,
+            elementum sit amet tincidunt nec, mattis nec urna. Cras viverra
+            lorem odio, id pretium dui interdum ut. Nullam dignissim nisl vitae
+            orci vehicula condimentum"
+      />
+    </div>
+  )
+}
+export default LabelValueDark

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.html.erb ADDED Viewed

@@ -0,0 +1,43 @@
+<%= pb_rails("label_value", props: {
+  variant: "details",
+  label: "Installer",
+  icon: "truck",
+  title: "JD Installations LLC",
+  dark: true
+}) %>
+<br>
+<%= pb_rails("label_value", props: {
+  variant: "details",
+  label: "Project",
+  icon: "home",
+  description: "33-12345",
+  title: "Jefferson-Smith",
+  dark: true
+}) %>
+<br>
+<%= pb_rails("label_value", props: {
+  variant: "details",
+  label: "Project",
+  icon: "home",
+  description: "33-12345",
+  title: "Jefferson-Smith",
+  date: Date.new(2019, 11, 18),
+  dark: true
+}) %>
+<br>
+<%= pb_rails("label_value", props: {
+  variant: "details",
+  label: "Project",
+  icon: "home",
+  description: "33-12345",
+  title: "Jefferson-Smith",
+  date: Date.new(2019, 11, 18),
+  dark: true,
+  active: true
+}) %>

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.jsx ADDED Viewed

@@ -0,0 +1,54 @@
+import React from 'react'
+import { LabelValue } from '../../'
+const LabelValueDetailsDark = () => {
+  return (
+    <div>
+      <LabelValue
+          dark
+          icon="truck"
+          label="Installer"
+          title="JD Installations LLC"
+          variant="details"
+      />
+      <br />
+      <LabelValue
+          dark
+          description="33-12345"
+          icon="home"
+          label="Project"
+          title="Jefferson-Smith"
+          variant="details"
+      />
+      <br />
+      <LabelValue
+          dark
+          date={new Date('18 Nov 2019')}
+          description="33-12345"
+          icon="home"
+          label="Project"
+          title="Jefferson-Smith"
+          variant="details"
+      />
+      <br />
+      <LabelValue
+          active
+          dark
+          date={new Date('18 Nov 2019')}
+          description="33-12345"
+          icon="home"
+          label="Project"
+          title="Jefferson-Smith"
+          variant="details"
+      />
+    </div>
+  )
+}
+export default LabelValueDetailsDark

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.html.erb ADDED Viewed

@@ -0,0 +1,80 @@
+<%= pb_rails("title", props: { text: "Patient Profile", tag: "h4", size: 4, margin_bottom: "sm", dark: true }) %>
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex", props: {orientation: "column", margin_right: "lg" }) do %>
+    <%= pb_rails("label_value", props: {
+      variant: "details",
+      label: "Age",
+      icon: "user",
+      title: "24 yrs old",
+      padding_bottom: "sm",
+      dark: true
+    }) %>
+    <%= pb_rails("label_value", props: {
+      variant: "details",
+      label: "Weight",
+      icon: "weight",
+      title: "91 kg",
+      dark: true
+    }) %>
+  <% end %>
+  <%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("label_value", props: {
+      variant: "details",
+      label: "Blood",
+      icon: "tint",
+      title: "A +",
+      padding_bottom: "sm",
+      dark: true
+    }) %>
+    <%= pb_rails("label_value", props: {
+      variant: "details",
+      label: "Height",
+      icon: "arrows-v",
+      title: "187 cm",
+      dark: true
+    }) %>
+  <% end %>
+<% end %>
+<br><br><br>
+<%= pb_rails("title", props: { text: "Workout Schedule", tag: "h4", size: 4, margin_bottom: "sm", dark: true }) %>
+<%= pb_rails("label_value", props: {
+  variant: "details",
+  label: "Chest",
+  icon: "dumbbell",
+  description: "6 sets • 8 reps • 40-100 kg",
+  title: "Bench Press",
+  padding_bottom: "sm",
+  dark: true,
+  active: true
+}) %>
+<%= pb_rails("label_value", props: {
+  variant: "details",
+  label: "Biceps",
+  icon: "dumbbell",
+  description: "5 sets • 12 reps • 20-40 kg",
+  title: "Barbell Curl",
+  padding_bottom: "sm",
+  dark: true,
+  active: true
+}) %>
+<%= pb_rails("label_value", props: {
+  variant: "details",
+  label: "Back",
+  icon: "dumbbell",
+  description: "8 sets • 8 reps • 40-120 kg",
+  title: "Back Squat",
+  padding_bottom: "sm",
+  dark: true,
+  active: true
+}) %>