playbook_ui 7.6.2.pre.alpha1 → 7.8.1

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { FormGroup, SelectableCard } from '../../'
 
-const FormGroupSelectableCard = () => {
+const FormGroupSelectableCard = (props) => {
   const [value, setValue] = useState('')
 
   const handleSelect = (event) => {
@@ -18,6 +18,7 @@ const FormGroupSelectableCard = () => {
             name="animal"
             onChange={handleSelect}
             value="cat"
+            {...props}
         >
           {'Cat'}
         </SelectableCard>
@@ -29,6 +30,7 @@ const FormGroupSelectableCard = () => {
             name="animal"
             onChange={handleSelect}
             value="dog"
+            {...props}
         >
           {'Dog'}
         </SelectableCard>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card_icon.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { FormGroup, SelectableCardIcon } from '../../'
 
-const FormGroupSelectableCardIcon = () => {
+const FormGroupSelectableCardIcon = (props) => {
   const [selectedFormat, toggleFormat] = useState(null)
 
   return (
@@ -15,6 +15,7 @@ const FormGroupSelectableCardIcon = () => {
             onChange={() => toggleFormat('basketball')}
             titleText="Basketball"
             value="basketball"
+            {...props}
         />
         <SelectableCardIcon
             checked={selectedFormat === 'football'}
@@ -24,6 +25,7 @@ const FormGroupSelectableCardIcon = () => {
             onChange={() => toggleFormat('football')}
             titleText="Football"
             value="football"
+            {...props}
         />
       </FormGroup>
     </div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.html.erb

@@ -1,14 +1,42 @@
 <div>
   <%= pb_rails("form_group") do %>
-    <%= pb_rails("typeahead", props: {
-      label: "Products",
-      options: [
+    <%
+      options = [
         { label: 'Windows', value: 'windows' },
         { label: 'Roof', value: 'roof' },
         { label: 'Siding', value: 'siding' },
         { label: 'Doors', value: 'doors' },
       ]
+    %>
+    <%= pb_rails("typeahead", props: {
+      default_options: [options.first],
+      id: "form-group-typeahead-example",
+      label: "Products",
+      options: options,
+    }) %>
+    <%= pb_rails("button", props: {
+      id: "form-group-button",
+      text: "Add",
+      variant: "secondary"
     }) %>
-    <%= pb_rails("button", props: { text: "Add", variant: "secondary" }) %>
   <% end %>
 </div>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-form-group-kit-form-group-typeahead-example-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-form-group-kit-form-group-typeahead-example-result-option-remove", function(event) {
+    console.log('Option removed')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-form-group-kit-form-group-typeahead-example-result-option-clear", function() {
+    console.log('All options cleared')
+  })
+
+  document.querySelector('#form-group-button').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-form-group-kit-form-group-typeahead:clear'))
+  })
+<% end %>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.jsx

@@ -15,6 +15,7 @@ const FormGroupTypeahead = (props) => {
         <Typeahead
             label="Products"
             options={options}
+            {...props}
         />
         <Button
             onClick={() => alert('Button Clicked!')}

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

@@ -4,7 +4,7 @@ examples:
   - form_group_default: Default
   - form_group_button: Button
   - form_group_date_picker: Date Picker
-  - form_group_typeahead: Typeahead
+  # - form_group_typeahead: Typeahead
   - form_group_select: Select
   - form_group_selectable_card: Selectable Card
   - form_group_selectable_card_icon: Selectable Card Icon
@@ -14,7 +14,7 @@ examples:
   - form_group_default: Default
   - form_group_button: Button
   - form_group_date_picker: Date Picker
-  - form_group_typeahead: Typeahead
+  # - form_group_typeahead: Typeahead
   - form_group_select: Select
   - form_group_selectable_card: Selectable Card
   - form_group_selectable_card_icon: Selectable Card Icon

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

@@ -1,7 +1,7 @@
 export { default as FormGroupDefault } from './_form_group_default.jsx'
 export { default as FormGroupButton } from './_form_group_button.jsx'
 export { default as FormGroupDatePicker } from './_form_group_date_picker.jsx'
-export { default as FormGroupTypeahead } from './_form_group_typeahead.jsx'
+// export { default as FormGroupTypeahead } from './_form_group_typeahead.jsx'
 export { default as FormGroupSelect } from './_form_group_select.jsx'
 export { default as FormGroupSelectableCard } from './_form_group_selectable_card.jsx'
 export { default as FormGroupSelectableCardIcon } from './_form_group_selectable_card_icon.jsx'

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.html.erb

@@ -0,0 +1,24 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+
+    <%= pb_rails "icon_circle", props: {
+      icon: object.icon,
+      size: object.size,
+      variant: object.variant } %>
+
+      <div>
+        <%= pb_rails("flex", props: { vertical: "bottom" }) do %>
+            <%= pb_rails "title", props: {
+                text: object.value_string,
+                size: object.title_size } %>
+                &nbsp;
+            <%= pb_rails "body", props: {
+                text: object.unit } %>
+        <% end %>
+            <%= pb_rails "caption", props: {
+                text: object.text } %>
+      </div>
+<% end %>

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

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

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

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

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