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

playbook_ui 7.0.0 → 7.0.1.pre.alpha1

Files changed (442) hide show

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx CHANGED Viewed

@@ -101,7 +101,7 @@ const Gauge = (props: GaugeProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(css, globalProps(props), className)}
+        className={classnames(css, className, globalProps(props))}
         id={id}
     />
   )

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx CHANGED Viewed

@@ -27,7 +27,7 @@ const Highlight = (props: HighlightProps) => {
     <Highlighter
         autoEscape
         data={data}
-        highlightClassName={classnames(globalProps(props), className)}
+        highlightClassName={classnames(className, globalProps(props))}
         highlightTag="span"
         id={id}
         searchWords={highlightedText}

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx CHANGED Viewed

@@ -40,12 +40,12 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
   const classes = (className, dark) =>
     classnames(
+      className,
       {
         'pb_home_address_street': !dark,
         'pb_home_address_street_dark': dark,
       },
-      globalProps(props),
-      className
+      globalProps(props)
     )
   return (
     <div className={classes(className, dark)}>

data/app/pb_kits/playbook/pb_icon/_icon.jsx CHANGED Viewed

@@ -56,6 +56,7 @@ const Icon = (props: IconProps) => {
     spin = false,
   } = props
   const classes = classnames(
+    className,
     flipMap[flip],
     'pb_icon_kit',
     'far',
@@ -71,8 +72,7 @@ const Icon = (props: IconProps) => {
       [`fa-pull-${pull}`]: pull,
       [`fa-rotate-${rotation}`]: rotation,
     },
-    globalProps(props),
-    className
+    globalProps(props)
   )
   return (

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb CHANGED Viewed

@@ -1,3 +1 @@
-<%= pb_rails("body", props: { dark: true }) do %>
-    <%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
-<% end %>
+<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx CHANGED Viewed

@@ -1,15 +1,13 @@
 import React from 'react'
-import { Body, Icon } from '../../'
+import { Icon } from '../../'
 const IconDefaultDark = () => {
   return (
     <div>
-      <Body dark>
-        <Icon
-            fixedWidth
-            icon="user"
-        />
-      </Body>
+      <Icon
+          fixedWidth
+          icon="user"
+      />
     </div>
   )
 }

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

@@ -32,11 +32,7 @@ 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 classes = classnames(buildCss('pb_icon_value_kit', align), className, globalProps(props))
   return (
     <div

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

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

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