playbook_ui 5.5.1 → 6.0.1.pre.alpha5

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { Flex, LabelValue, Title } from '../../'
+
+const LabelValueDetailsExamples = () => {
+  return (
+    <div>
+      <Title
+          marginBottom="sm"
+          size={4}
+          text="Patient Profile"
+      />
+
+      <Flex>
+        <Flex
+            marginRight="lg"
+            orientation="column"
+        >
+          <LabelValue
+              icon="user"
+              label="Age"
+              paddingBottom="sm"
+              title="24 yrs old"
+              variant="details"
+          />
+          <LabelValue
+              icon="weight"
+              label="Weight"
+              title="91 kg"
+              variant="details"
+          />
+        </Flex>
+        <Flex
+            orientation="column"
+        >
+          <LabelValue
+              icon="tint"
+              label="Blood"
+              paddingBottom="sm"
+              title="A +"
+              variant="details"
+          />
+          <LabelValue
+              icon="arrows-v"
+              label="Height"
+              title="187 cm"
+              variant="details"
+          />
+        </Flex>
+      </Flex>
+
+      <br />
+      <br />
+      <br />
+
+      <Title
+          marginBottom="sm"
+          size={4}
+          text="Workout Schedule"
+      />
+
+      <LabelValue
+          active
+          description="6 sets • 8 reps • 40-100 kg"
+          icon="dumbbell"
+          label="Chest"
+          paddingBottom="sm"
+          title="Bench Press"
+          variant="details"
+      />
+      <LabelValue
+          active
+          description="5 sets • 12 reps • 20-40 kg"
+          icon="dumbbell"
+          label="Biceps"
+          paddingBottom="sm"
+          title="Barbell Curl"
+          variant="details"
+      />
+      <LabelValue
+          active
+          description="8 sets • 8 reps • 40-120 kg"
+          icon="dumbbell"
+          label="Back"
+          paddingBottom="sm"
+          title="Back Squat"
+          variant="details"
+      />
+    </div>
+  )
+}
+
+export default LabelValueDetailsExamples

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

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

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.jsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { Flex, LabelValue, Title } from '../../'
+
+const LabelValueDetailsExamplesDark = () => {
+  return (
+    <div>
+      <Title
+          dark
+          marginBottom="sm"
+          size={4}
+          text="Patient Profile"
+      />
+
+      <Flex>
+        <Flex
+            marginRight="lg"
+            orientation="column"
+        >
+          <LabelValue
+              dark
+              icon="user"
+              label="Age"
+              paddingBottom="sm"
+              title="24 yrs old"
+              variant="details"
+          />
+          <LabelValue
+              dark
+              icon="weight"
+              label="Weight"
+              title="91 kg"
+              variant="details"
+          />
+        </Flex>
+        <Flex
+            orientation="column"
+        >
+          <LabelValue
+              dark
+              icon="tint"
+              label="Blood"
+              paddingBottom="sm"
+              title="A +"
+              variant="details"
+          />
+          <LabelValue
+              dark
+              icon="arrows-v"
+              label="Height"
+              title="187 cm"
+              variant="details"
+          />
+        </Flex>
+      </Flex>
+
+      <br />
+      <br />
+      <br />
+
+      <Title
+          dark
+          marginBottom="sm"
+          size={4}
+          text="Workout Schedule"
+      />
+
+      <LabelValue
+          active
+          dark
+          description="6 sets • 8 reps • 40-100 kg"
+          icon="dumbbell"
+          label="Chest"
+          paddingBottom="sm"
+          title="Bench Press"
+          variant="details"
+      />
+      <LabelValue
+          active
+          dark
+          description="5 sets • 12 reps • 20-40 kg"
+          icon="dumbbell"
+          label="Biceps"
+          paddingBottom="sm"
+          title="Barbell Curl"
+          variant="details"
+      />
+      <LabelValue
+          active
+          dark
+          description="8 sets • 8 reps • 40-120 kg"
+          icon="dumbbell"
+          label="Back"
+          paddingBottom="sm"
+          title="Back Squat"
+          variant="details"
+      />
+    </div>
+  )
+}
+
+export default LabelValueDetailsExamplesDark

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

@@ -2,9 +2,18 @@ examples:
   
   rails:
   - label_value_default: Default
+  - label_value_details: Details
+  - label_value_details_examples: Other Examples
   - label_value_dark: Dark
+  - label_value_details_dark: Details Dark
+  - label_value_details_examples_dark: Other Examples Dark
   
   
   react:
   - label_value_default: Default
+  - label_value_details: Details
+  - label_value_details_examples: Other Examples
   - label_value_dark: Dark
+  - label_value_details_dark: Details Dark
+  - label_value_details_examples_dark: Other Examples Dark
+

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

@@ -1,2 +1,7 @@
 export { default as LabelValueDefault } from './_label_value_default.jsx'
+export { default as LabelValueDetails } from './_label_value_details.jsx'
+export { default as LabelValueDetailsExamples } from './_label_value_details_examples.jsx'
+
 export { default as LabelValueDark } from './_label_value_dark.jsx'
+export { default as LabelValueDetailsDark } from './_label_value_details_dark.jsx'
+export { default as LabelValueDetailsExamplesDark } from './_label_value_details_examples_dark.jsx'

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

@@ -8,11 +8,24 @@ module Playbook
       partial "pb_label_value/label_value"
 
       prop :label, required: true
-      prop :value, required: true
+      prop :value
       prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default details],
+                     default: "default"
+      prop :icon
+      prop :description
+      prop :title
+      prop :date
+      prop :active, type: Playbook::Props::Boolean, default: false
+
 
       def classname
-        generate_classname("pb_label_value_kit", dark_class)
+        generate_classname("pb_label_value_kit", variant_class, dark_class)
+      end
+
+      def date_element
+        "· #{date.strftime('%m/%d')}".html_safe
       end
 
     private
@@ -20,6 +33,10 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
+
+      def variant_class
+        variant == "details" ? "details" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx

@@ -14,6 +14,7 @@ type ProgressSimpleProps = {
   muted: Boolean,
   percent: String,
   value: Number,
+  variant?: "default" | "positive" | "negative",
   width: String,
 }
 
@@ -26,12 +27,15 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
     muted = false,
     percent = '',
     value,
+    variant = 'default',
     width = '100%',
   } = props
   const styles = {
     width: width,
   }
 
+  const variantStyle = variant == 'default' ? '' : variant
+
   const valueStyles = {
     width: percent ? `${percent}%` : `${(value * 100) / max}%`,
   }
@@ -44,7 +48,7 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
 
   const kitClass = classnames(
     className,
-    buildCss('pb_progress_simple_kit', align, { muted: muted })
+    buildCss('pb_progress_simple_kit', { muted: muted }, variantStyle, align)
   )
 
   return (

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -1,5 +1,6 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
+@import "../tokens/colors";
 
 $pb_progress_simple_height: 4px;
 
@@ -22,8 +23,18 @@ $pb_progress_simple_height: 4px;
   height: $pb_progress_simple_height;
   border-radius: $pb_progress_simple_height/2;
   background: rgba($primary, $opacity-1);
+    &[class*=_positive] {
+      .progress_simple_value {
+        background: $success;
+      }
+    }
+    &[class*=_negative] {
+      .progress_simple_value {
+        background: $error;
+      }
+    }
 
-  .progress_simple_value {
+  [class^=progress_simple_value] {
     width: 0%;
     height: 100%;
     border-radius: $pb_progress_simple_height/2;

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("progress_simple", props: { percent: 64.9, variant: "default" }) %>
+
+<br>
+
+<%= pb_rails("progress_simple", props: { percent: 90, variant: "positive" }) %>
+
+<br>
+
+<%= pb_rails("progress_simple", props: { percent: 10, variant: "negative" }) %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { ProgressSimple } from '../..'
+
+const ProgressSimpleVariants = () => {
+  return (
+    <div>
+      <ProgressSimple percent={64.5} />
+
+      <br />
+
+      <ProgressSimple
+          percent={90}
+          variant="positive"
+      />
+
+      <br />
+
+      <ProgressSimple
+          percent={10}
+          variant="negative"
+      />
+    </div>
+  )
+}
+
+export default ProgressSimpleVariants

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md

@@ -0,0 +1 @@
+Progress Simple can pass colors - primary, green and red. Variants names are `default`, `positive`, and `negative` respectively.

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

@@ -4,6 +4,7 @@ examples:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
   - progress_simple_width: Progress Bar Width
+  - progress_simple_variants: Variants
   - progress_simple_muted: Muted
   - progress_simple_align: Align
 
@@ -12,6 +13,7 @@ examples:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
   - progress_simple_width: Progress Bar Width
+  - progress_simple_variants: Variants
   - progress_simple_muted: Muted
   - progress_simple_align: Align