playbook_ui 5.5.1.pre.alpha2 → 6.0.1

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

@@ -1,17 +1,7 @@
 @import "../tokens/spacing";
-@import "../pb_caption/caption";
-@import "../pb_body/body";
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
     margin-bottom: $space-xs/1.5;
   }
-  &[class*=_dark]  {
-    [class^=pb_caption_kit] {
-      color: $text_dk_light;
-    }
-    [class^=pb_body_kit] {
-      color: $text_dk_default;
-    }
-  }
 }

data/app/pb_kits/playbook/pb_label_value/docs/_description.md

@@ -1 +1,3 @@
-This kit can be very versatile when used to display text data. It includes the caption kit and the body text kit. 
+This kit can be very versatile when used to display text data.
+
+Variant `default` includes a label and text. However, variant `details` can be used if multiple elements are necessary in order to make it more descriptive. Variant `details` may include icon, light text, title and date, as well as the option to make it active (with link color) for clickability purposes.

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

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

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

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

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.md

@@ -0,0 +1 @@
+Variant `details` can pass icon, description, title, date, and active props.

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

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

@@ -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.html.erb

@@ -0,0 +1,72 @@
+<%= pb_rails("title", props: { text: "Patient Profile", tag: "h4", size: 4, margin_bottom: "sm" }) %> 
+
+<%= 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"
+    }) %>
+    <%= pb_rails("label_value", props: {
+      variant: "details",
+      label: "Weight",
+      icon: "weight",
+      title: "91 kg",
+    }) %>
+
+  <% end %>
+  <%= pb_rails("flex", props: {orientation: "column"}) do %>
+
+    <%= pb_rails("label_value", props: {
+      variant: "details",
+      label: "Blood",
+      icon: "tint",
+      title: "A +",
+      padding_bottom: "sm"
+    }) %>
+    <%= pb_rails("label_value", props: {
+      variant: "details",
+      label: "Height",
+      icon: "arrows-v",
+      title: "187 cm",
+    }) %>
+
+  <% end %>
+<% end %>
+
+<br><br><br>
+
+<%= pb_rails("title", props: { text: "Workout Schedule", tag: "h4", size: 4, margin_bottom: "sm" }) %> 
+
+<%= 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",
+  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",
+  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",
+  active: true
+}) %>

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