RubyGems - playbook_ui - Versions diffs - 7.7.0 → 7.8.0 - Mend

playbook_ui 7.7.0 → 7.8.0

Files changed (108) hide show

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx ADDED

@@ -0,0 +1,105 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { Body, Caption, Flex, IconCircle, Title } from '../'
+import { globalProps } from '../utilities/globalProps.js'
+type IconStatValueProps = {
+  aria?: object,
+  className?: string,
+  data?: object,
+  icon: string,
+  id?: string,
+  orientation?: "vertical" | "horizontal",
+  size?: "sm" | "md" | "lg",
+  text?: string,
+  unit?: string,
+  value: number,
+  variant?: "default"
+    | "royal"
+    | "blue"
+    | "purple"
+    | "teal"
+    | "red"
+    | "yellow"
+    | "green",
+}
+const IconStatValue = (props: IconStatValueProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    icon,
+    id,
+    orientation = 'horizontal',
+    size = 'sm',
+    text = '',
+    unit = '',
+    value = 0,
+    variant = 'default',
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
+    className
+  )
+  const titleSize = function(size) {
+    if (size == 'lg') {
+      return (
+        <Title
+            size={1}
+            text={`${value}`}
+        />
+      )
+    } else if (size == 'md') {
+      return (
+        <Title
+            size={2}
+            text={`${value}`}
+        />
+      )
+    } else {
+      return (
+        <Title
+            size={3}
+            text={`${value}`}
+        />
+      )
+    }
+  }
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <IconCircle
+          icon={icon}
+          size={size}
+          variant={variant}
+      />
+      <div>
+        <Flex
+            vertical="bottom"
+        >
+          {titleSize(size)}
+          &nbsp;
+          <Body
+              text={unit}
+          />
+        </Flex>
+        <Caption text={text} />
+      </div>
+    </div>
+  )
+}
+export default IconStatValue

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss ADDED

@@ -0,0 +1,64 @@
+@import "../pb_title/title";
+@import "../pb_caption/caption";
+@import "../tokens/spacing";
+@import "../pb_icon_circle/icon_circle";
+[class^=pb_icon_stat_value_kit]{
+  display: flex;
+  align-items: baseline;
+  &[class*=_vertical]  {
+    flex-direction: column;
+    &[class*=_center]  {
+      align-items: center;
+      [class^=pb_title],
+      [class^=pb_body],
+      [class^=pb_caption] {
+        text-align: center;
+      }
+    }
+    &[class*=_right]  {
+      align-items: flex-end;
+      [class^=pb_title],
+      [class^=pb_body],
+      [class^=pb_caption] {
+        text-align: right;
+      }
+    }
+    [class^=pb_icon_circle] {
+      margin-bottom: $space-xs;
+    }
+  }
+  &[class*=_horizontal]  {
+    align-items: center;
+    &[class*=_center]  {
+      justify-content: center;
+    }
+    &[class*=_right]  {
+      justify-content: flex-end;
+    }
+    [class^=pb_icon_circle] {
+      margin-right: $space-sm;
+    }
+  }
+  [class^=pb_title_kit_1] + [class^=pb_body_kit] {
+    font-size: 36px;
+  }
+  [class^=pb_title_kit_2] + [class^=pb_body_kit] {
+    font-size: 24px
+  }
+  [class^=pb_title_kit_3] + [class^=pb_body_kit] {
+    font-size: 20px;
+  }
+}

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb ADDED

@@ -0,0 +1,49 @@
+ <%= pb_rails("icon_stat_value", props: { icon: "globe-europe",
+                                          text: "Mercury",
+                                          unit: "AU",
+                                          value: 0.39,
+                                          variant:"blue"
+ }) %>
+ <br>
+ <%= pb_rails("icon_stat_value", props: { icon: "planet-ringed",
+                                          text: "Venus",
+                                          unit: "AU",
+                                          value: 0.723,
+                                          variant:"royal"
+ }) %>
+ <br>
+ <%= pb_rails("icon_stat_value", props: { icon: "planet-moon",
+                                          text: "Earth",
+                                          unit: "AU",
+                                          value: 1.0,
+                                          variant:"purple"
+ }) %>
+ <br>
+ <%= pb_rails("icon_stat_value", props: { icon: "solar-system",
+                                          text: "Mars",
+                                          unit: "AU",
+                                          value: 1.524,
+                                          variant:"teal"
+ }) %>
+ <br>
+ <%= pb_rails("icon_stat_value", props: { icon: "globe-americas",
+                                          text: "Jupitar",
+                                          unit: "AU",
+                                          value: 5.203,
+                                          variant:"red"
+ }) %>
+ <br>
+ <%= pb_rails("icon_stat_value", props: { icon: "globe-africa",
+                                          text: "Saturn",
+                                          unit: "AU",
+                                          value: 9.539,
+                                          variant:"yellow"
+ }) %>
+ <br>
+ <%= pb_rails("icon_stat_value", props: { icon: "globe",
+                                          text: "Uranus",
+                                          unit: "AU",
+                                          value: 19.18,
+                                          variant:"green"
+ }) %>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx ADDED

@@ -0,0 +1,67 @@
+import React from 'react'
+import { IconStatValue } from '../../'
+const IconStatValueColor = () => {
+  return (
+    <div>
+      <IconStatValue
+          icon="globe-europe"
+          text="Mercury"
+          unit="AU"
+          value={0.39}
+          variant="blue"
+      />
+      <br />
+      <IconStatValue
+          icon="planet-ringed"
+          text="Venus"
+          unit="AU"
+          value={0.723}
+          variant="royal"
+      />
+      <br />
+      <IconStatValue
+          icon="planet-moon"
+          text="Earth"
+          unit="AU"
+          value={1.0}
+          variant="purple"
+      />
+      <br />
+      <IconStatValue
+          icon="solar-system"
+          text="Mars"
+          unit="AU"
+          value={1.524}
+          variant="teal"
+      />
+      <br />
+      <IconStatValue
+          icon="globe-americas"
+          text="Jupitar"
+          unit="AU"
+          value={5.203}
+          variant="red"
+      />
+      <br />
+      <IconStatValue
+          icon="globe-africa"
+          text="Saturn"
+          unit="AU"
+          value={9.539}
+          variant="yellow"
+      />
+      <br />
+      <IconStatValue
+          icon="globe"
+          text="Uranus"
+          unit="AU"
+          value={19.18}
+          variant="green"
+      />
+    </div>
+  )
+}
+export default IconStatValueColor

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.html.erb ADDED

@@ -0,0 +1,11 @@
+<%= pb_rails("icon_stat_value", props: { icon: "lightbulb-on",
+                                         text: "Electric",
+                                         unit: "kw",
+                                         value: 64.18
+ }) %>
+<br>
+ <%= pb_rails("icon_stat_value", props: { icon: "calendar",
+                                          text: "deadline",
+                                          unit: "days",
+                                          value: 24
+ }) %>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx ADDED

@@ -0,0 +1,25 @@
+import React from 'react'
+import { IconStatValue } from '../../'
+const IconStatValueDefault = () => {
+  return (
+    <div>
+      <IconStatValue
+          icon="lightbulb-on"
+          text="Electric"
+          unit="kw"
+          value={64.18}
+      />
+      <br />
+      <IconStatValue
+          icon="calendar"
+          text="deadline"
+          unit="days"
+          value={24}
+      />
+    </div>
+  )
+}
+export default IconStatValueDefault

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.html.erb ADDED

@@ -0,0 +1,20 @@
+<%= pb_rails("icon_stat_value", props: { icon: "car",
+                                         size: "sm",
+                                         text: "distance driven",
+                                         unit: " mi",
+                                         value: 158.3
+ }) %>
+ <br>
+ <%= pb_rails("icon_stat_value", props: { icon: "car",
+                                         size: "md",
+                                         text: "distance driven",
+                                         unit: " mi",
+                                         value: 158.3
+ }) %>
+<br>
+ <%= pb_rails("icon_stat_value", props: { icon: "car",
+                                         size: "lg",
+                                         text: "distance driven",
+                                         unit: " mi",
+                                         value: 158.3
+ }) %>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx ADDED

@@ -0,0 +1,35 @@
+import React from 'react'
+import { IconStatValue } from '../../'
+const IconStatValueSizes = () => {
+  return (
+    <div>
+      <IconStatValue
+          icon="car"
+          size="sm"
+          text="distance driven"
+          unit="mi"
+          value={158.3}
+      />
+      <br />
+      <IconStatValue
+          icon="car"
+          size="md"
+          text="distance driven"
+          unit="mi"
+          value={158.3}
+      />
+      <br />
+      <IconStatValue
+          icon="car"
+          size="lg"
+          text="distance driven"
+          unit="mi"
+          value={158.3}
+      />
+    </div>
+  )
+}
+export default IconStatValueSizes

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.html.erb ADDED

@@ -0,0 +1,7 @@
+ <%= pb_rails("icon_stat_value", props: { icon: "broadcast-tower",
+                                          orientation: "vertical",
+                                          size: "sm",
+                                          text: "Radio",
+                                          unit: "wkz",
+                                          value: 102.5
+ }) %>

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx ADDED

@@ -0,0 +1,19 @@
+import React from 'react'
+import { IconStatValue } from '../../'
+const IconStatValueVertical = () => {
+  return (
+    <div>
+      <IconStatValue
+          icon="broadcast-tower"
+          orientation="vertical"
+          text="Radio"
+          unit="wkz"
+          value={102.5}
+      />
+    </div>
+  )
+}
+export default IconStatValueVertical

data/app/pb_kits/playbook/pb_icon_stat_value/docs/example.yml ADDED

@@ -0,0 +1,15 @@
+examples:
+  rails:
+  - icon_stat_value_default: Default
+  - icon_stat_value_sizes: Size
+  - icon_stat_value_vertical: Vertical
+  - icon_stat_value_color: Color
+  react:
+  - icon_stat_value_default: Default
+  - icon_stat_value_sizes: Size
+  - icon_stat_value_vertical: Vertical
+  - icon_stat_value_color: Color

data/app/pb_kits/playbook/pb_icon_stat_value/docs/index.js ADDED

@@ -0,0 +1,4 @@
+export { default as IconStatValueDefault } from './_icon_stat_value_default.jsx'
+export { default as IconStatValueSizes } from './_icon_stat_value_sizes.jsx'
+export { default as IconStatValueVertical } from './_icon_stat_value_vertical.jsx'
+export { default as IconStatValueColor } from './_icon_stat_value_color.jsx'

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb ADDED

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+module Playbook
+  module PbIconStatValue
+    class IconStatValue
+      include Playbook::Props
+      include ActionView::Helpers::NumberHelper
+      partial "pb_icon_stat_value/icon_stat_value"
+      prop :icon, required: true
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[sm md lg],
+                  default: "sm"
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default royal blue purple teal red yellow green],
+                     default: "default"
+      prop :orientation, type: Playbook::Props::Enum,
+                         values: %w[vertical horizontal],
+                         default: "horizontal"
+      prop :unit, type: Playbook::Props::String,
+                  default: ""
+      prop :text, type: Playbook::Props::String,
+                  default: ""
+      prop :value, type: Playbook::Props::Numeric
+      def classname
+        generate_classname("pb_icon_stat_value_kit", orientation, size, variant)
+      end
+      def value_string
+        value.to_s
+      end
+      def title_size
+        if size == "lg"
+          1
+        elsif size == "md"
+          2
+        else
+          3
+        end
+      end
+    end
+  end
+end