playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

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

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

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

@@ -1,20 +0,0 @@
-<%= 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

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

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

@@ -1,7 +0,0 @@
- <%= 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

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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_value/docs/_description.md

@@ -1 +0,0 @@
-Icon Value leverages our icon kit, to display a value of some sort in the interface. Typically, this includes a numerical value. 

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.html.erb

@@ -1,20 +0,0 @@
-<%= pb_rails("icon_value", props: {
-  icon: "heart",
-  text: "93"
-}) %>
-
-<br>
-
-<%= pb_rails("icon_value", props: {
-  icon: "comment",
-  text: "5",
-  align: "center"
-}) %>
-
-<br>
-
-<%= pb_rails("icon_value", props: {
-  icon: "clock",
-  text: "15m",
-  align: "right"
-}) %>

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-
-import IconValue from '../_icon_value'
-
-const IconValueAlign = (props) => {
-  return (
-    <div>
-      <IconValue
-          icon="heart"
-          text="93"
-          {...props}
-      />
-
-      <br />
-
-      <IconValue
-          align="center"
-          icon="comment"
-          text="5"
-          {...props}
-      />
-
-      <br />
-
-      <IconValue
-          align="right"
-          icon="clock"
-          text="15min"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default IconValueAlign

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_default.html.erb

@@ -1,18 +0,0 @@
-<%= pb_rails("icon_value", props: {
-  icon: "heart",
-  text: "93"
-}) %>
-
-<br>
-
-<%= pb_rails("icon_value", props: {
-  icon: "comment",
-  text: "5"
-}) %>
-
-<br>
-
-<%= pb_rails("icon_value", props: {
-  icon: "clock",
-  text: "15m"
-}) %>

data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_default.jsx

@@ -1,33 +0,0 @@
-import React from 'react'
-
-import IconValue from '../_icon_value'
-
-const IconValueDefault = (props) => {
-  return (
-    <div>
-      <IconValue
-          icon="clipboard"
-          text="33-123456"
-          {...props}
-      />
-
-      <br />
-
-      <IconValue
-          icon="heart"
-          text="93"
-          {...props}
-      />
-
-      <br />
-
-      <IconValue
-          icon="clock"
-          text="15min"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default IconValueDefault

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

@@ -1,9 +0,0 @@
-examples:
-
-  rails:
-  - icon_value_default: Default
-  - icon_value_align: Align
-
-  react:
-  - icon_value_default: Default
-  - icon_value_align: Align

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

@@ -1,2 +0,0 @@
-export { default as IconValueDefault } from './_icon_value_default.jsx'
-export { default as IconValueAlign } from './_icon_value_align.jsx'

data/app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb

@@ -1,76 +0,0 @@
-<style>
-  .image-error:before {
-    content: "Sorry, the image below seems to be broken.";
-    display: block;
-    margin-bottom: 10px;
-  }
-  .image-error {
-    margin: 5px;
-    padding: 5px;
-    outline: 1px solid red;
-  }
-</style>
-
-<%= pb_rails("body",
-  props: {
-    text: "Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time."
-  }
-) %>
-
-<br>
-<br>
-
-<%= pb_rails("body",
-  props: {
-    text: "Alter the display when the image fails to load:"
-  }
-) %>
-
-<%= pb_rails("image",
-  props: {
-    alt: "This is the alt text!",
-    on_error: "this.style.color = 'red'",
-    rounded: true,
-    size: "xs",
-    url: "not_a_picture"
-  }
-) %>
-
-<br>
-<br>
-
-<%= pb_rails("body",
-  props: {
-    text: "Give it an error class:"
-  }
-) %>
-
-<%= pb_rails("image",
-  props: {
-    alt: "This is the alt text!",
-    on_error: "this.classList.add('image-error')",
-    padding_x: "none",
-    rounded: true,
-    size: "xs",
-    url: "not_a_picture"
-  }
-) %>
-
-<br>
-<br>
-
-<%= pb_rails("body",
-  props: {
-   text: "Or hide it completely:"
-  }
-) %>
-
-<%= pb_rails("image",
-  props: {
-    alt: "This is the alt text!",
-    on_error: "this.style.display = 'none'",
-    rounded: true,
-    size: "xs",
-    url: "not_a_picture",
-  }
-) %>

data/app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx

@@ -1,58 +0,0 @@
-import React from 'react'
-
-import Image from '../_image'
-
-import Body from '../../pb_body/_body'
-
-const CustomErrorImage = (props) => {
-  return (
-    <>
-      <Body text="Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time." />
-      <br />
-      <Body text="Alter the display when the image fails to load:" />
-      <Image
-          alt="This is the alt text!"
-          onError={(e) => e.target.style.color = 'red'}
-          rounded
-          size="xs"
-          url="not_a_valid_url"
-          {...props}
-      />
-      <br />
-      <br />
-      <Body text="Give it an error class:" />
-      <Image
-          alt="This is the alt text!"
-          onError={(e) => e.target.classList.add('image-error')}
-          rounded
-          size="sm"
-          url="not_a_valid_url"
-          {...props}
-      />
-      <br />
-      <br />
-      <Body text="Set an inline style" />
-      <Image
-          alt="This is the alt text!"
-          onError={(e) => e.target.style.outline = '1px solid red'}
-          rounded
-          size="md"
-          url="not_a_valid_url"
-          {...props}
-      />
-      <br />
-      <br />
-      <Body text="Hide it completely!" />
-      <Image
-          alt="This is the alt text!"
-          onError={(e) => e.target.style.display = 'none'}
-          rounded
-          size="md"
-          url="not_a_valid_url"
-          {...props}
-      />
-    </>
-  )
-}
-
-export default CustomErrorImage

data/app/pb_kits/playbook/pb_image/docs/_default_image.html.erb

@@ -1,13 +0,0 @@
-
-<br/>
-<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
-<br/>
-<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
-<br/>
-<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "md", url: "https://unsplash.it/500/400/?image=634" }) %>
-<br/>
-<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "lg", url: "https://unsplash.it/500/400/?image=634" }) %>
-<br/>
-<%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
-<br/>
-<%= pb_rails("image", props: { alt: "picture of a misty forest", url: "https://unsplash.it/500/400/?image=634" }) %>

data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx

@@ -1,60 +0,0 @@
-import React from 'react'
-
-import Image from '../_image'
-
-const DefaultImage = (props) => {
-  return (
-    <>
-      <br />
-      <div>
-        <Image
-            alt="picture of a misty forest"
-            size="xs"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-      </div>
-      <div>
-        <Image
-            alt="picture of a misty forest"
-            size="sm"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-      </div>
-      <div>
-        <Image
-            alt="picture of a misty forest"
-            size="md"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-      </div>
-      <div>
-        <Image
-            alt="picture of a misty forest"
-            size="lg"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-      </div>
-      <div>
-        <Image
-            alt="picture of a misty forest"
-            size="xl"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-      </div>
-      <div>
-        <Image
-            alt="picture of a misty forest"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-      </div>
-    </>
-  )
-}
-
-export default DefaultImage

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

@@ -1 +0,0 @@
-A responsive image component.

data/app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb

@@ -1,17 +0,0 @@
-<%= pb_rails("image", props: { alt: "", rounded: true, size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
-
-<br>
-
-<%= pb_rails("image", props: { alt: "", rounded: true, size: "sm", url: "https://unsplash.it/500/400/?image=634" }) %>
-
-<br>
-
-<%= pb_rails("image", props: { alt: "", rounded: true, size: "md", url: "https://unsplash.it/500/400/?image=634" }) %>
-
-<br>
-
-<%= pb_rails("image", props: { alt: "", rounded: true, size: "lg", url: "https://unsplash.it/500/400/?image=634" }) %>
-
-<br>
-
-<%= pb_rails("image", props: { alt: "", rounded: true, size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>

data/app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx

@@ -1,58 +0,0 @@
-import React from 'react'
-
-import Image from '../_image'
-
-const RoundedImage = (props) => {
-  return (
-    <>
-      <br />
-      <div>
-        <Image
-            alt=""
-            rounded
-            size="xs"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-      </div>
-      <div>
-        <Image
-            alt=""
-            rounded
-            size="sm"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-      </div>
-      <div>
-        <Image
-            alt=""
-            rounded
-            size="md"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-      </div>
-      <div>
-        <Image
-            alt=""
-            rounded
-            size="lg"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-      </div>
-      <div>
-        <Image
-            alt=""
-            rounded
-            size="xl"
-            url="https://unsplash.it/500/400/?image=634"
-            {...props}
-        />
-      </div>
-    </>
-  )
-}
-
-export default RoundedImage

data/app/pb_kits/playbook/pb_image/docs/_transition_image.html.erb

@@ -1,54 +0,0 @@
-<%= pb_rails("flex") do %>
-  <%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %>
-    <%= pb_rails("select", props: {
-    id: "transition-dropdown",
-    label: "",
-    blank_selection: "Select a Transition...",
-    options: [
-        {
-          value: 'fade',
-        },
-        {
-          value: 'blur',
-        },
-        {
-          value: 'scale',
-        },
-    ]
-    }) %>
-  <% end %>
-    <%= pb_rails("flex/flex_item") do %>
-      <%= pb_rails("button", props: {classname: "button", text: "Load Image", margin_left: "sm", margin_top: "xs", disabled: true }) %>
-    <% end %>
-<% end %>
-<%= pb_rails("image",  props: { classname: "transition-image", alt: "picture of a misty forest", url: "", on_error: "this.style.display = 'none'" }) %>
-
-<script>
-    window.addEventListener('DOMContentLoaded', () => {
-        const button = document.querySelector(".button")
-        const transitionDropdown = document.querySelector("#transition-dropdown")
-        var option = ''
-
-        transitionDropdown.addEventListener('change', function() {
-          if (this.value === '') {
-            button.className = button.className + ' _disabled'
-          } else {
-            button.removeAttribute("disabled");
-            button.className = button.className.replace(/\_disabled/gi, '')
-            option = this.value
-          }
-        });
-
-        const updateTransition = (transition) => {
-          const imageTransition = document.querySelector('.transition-image')
-            imageTransition.removeAttribute("style")
-            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
-            imageTransition.classList.add(transition, "lazyload")
-            imageTransition.src = "https://unsplash.it/500/400/?image=634"
-        }
-      
-        button.addEventListener('click', function() {
-          updateTransition(option)
-        })
-    });
-</script>