RubyGems - playbook_ui - Versions diffs - 12.18.0 → 12.19.0.pre.alpha.movemarkdown637 - Mend

playbook_ui 12.18.0 → 12.19.0.pre.alpha.movemarkdown637

Files changed (1469) hide show

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_image/docs/_transition_image.jsx DELETED Viewed

@@ -1,77 +0,0 @@
-import React, { useState } from 'react'
-import Image from '../_image'
-import Select from '../../pb_select/_select'
-import FlexItem from '../../pb_flex/_flex_item'
-import Flex from '../../pb_flex/_flex'
-import Button from '../../pb_button/_button'
-const TransitionImage = (props) => {
-  const [transition, setTransition] = useState('')
-  const [apply, setApply] = useState({
-    url: '',
-    transition: '',
-  })
-  const loadImage = () => {
-    document.querySelector('.image').classList.remove(transition, 'lazyloaded')
-    setApply({
-      url: 'https://unsplash.it/500/400/?image=634',
-      transition: transition,
-    },
-    document.querySelector('.image').classList.add(transition, 'lazyload')
-    )
-  }
-  const handleTransition = ({ target }) => {
-    setTransition(target.value)
-  }
-  const options = [
-    {
-      value: 'fade',
-    },
-    {
-      value: 'blur',
-    },
-    {
-      value: 'scale',
-    },
-  ]
-  return (
-    <>
-      <Flex>
-        <FlexItem fixedSize="250px">
-          <Select
-              blankSelection="Select a Transition..."
-              label=""
-              onChange={handleTransition}
-              options={options}
-              {...props}
-          />
-        </FlexItem>
-        <FlexItem>
-          <Button
-              disabled={transition === '' ? true : false}
-              marginLeft="sm"
-              onClick={loadImage}
-              text="Load Image"
-              {...props}
-          />
-        </FlexItem>
-      </Flex>
-      <div style={{ display: apply.url === '' ? 'none' : 'block' }}>
-        <Image
-            alt="picture of a misty forest"
-            className="image"
-            transition={apply.transition}
-            url={apply.url}
-            {...props}
-        />
-      </div>
-    </>
-  )
-}
-export default TransitionImage

data/app/pb_kits/playbook/pb_image/docs/_transition_image.md DELETED Viewed

	@@ -1 +0,0 @@
1	- To add a transition, simply use the `transition` prop and one of the three string options `"fade"`, `"blur"`, or `"scale"`.

data/app/pb_kits/playbook/pb_image/docs/example.yml DELETED Viewed

@@ -1,11 +0,0 @@
-examples:
-  rails:
-  - default_image: Default
-  - rounded_image: Rounded
-  - custom_error_image: Error Handling
-  - transition_image: Transition
-  react:
-  - default_image: Default
-  - rounded_image: Rounded
-  - custom_error_image: Error Handling
-  - transition_image: Transition

data/app/pb_kits/playbook/pb_image/docs/index.js DELETED Viewed

@@ -1,4 +0,0 @@
-export { default as DefaultImage } from './_default_image'
-export { default as RoundedImage } from './_rounded_image'
-export { default as CustomErrorImage } from './_custom_error_image'
-export { default as TransitionImage } from './_transition_image'

data/app/pb_kits/playbook/pb_label_pill/docs/_description.md DELETED Viewed

	@@ -1 +0,0 @@
1	- This kit combines the caption and pill kit with all its variants.

data/app/pb_kits/playbook/pb_label_pill/docs/_footer.md DELETED Viewed

	@@ -1,2 +0,0 @@
1	- ## Things to Avoid
2	- Don’t overuse this kit. Try to keep it to a single use per row if implemented on a table. Make sure it’s not used in a way that may confuse the user to think it’s a button or clickable.

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.html.erb DELETED Viewed

@@ -1,40 +0,0 @@
-<%= pb_rails("label_pill", props: {
-  label: "Service Needed",
-  pill_value: "76",
-}) %>
-<%= pb_rails("label_pill", props: {
-  label: "Waiting",
-  pill_value: "69",
-  variant: "success"
-}) %>
-<%= pb_rails("label_pill", props: {
-  label: "In Service",
-  pill_value: "28",
-  variant: "error"
-}) %>
-<%= pb_rails("label_pill", props: {
-  label: "Fully Serviced",
-  pill_value: "101",
-  variant: "warning"
-}) %>
-<%= pb_rails("label_pill", props: {
-  label: "Inbox",
-  pill_value: "197",
-  variant: "info"
-}) %>
-<%= pb_rails("label_pill", props: {
-  label: "Outbox",
-  pill_value: "13",
-  variant: "neutral"
-}) %>
-<%= pb_rails("label_pill", props: {
-  label: "Inbox",
-  pill_value: "218",
-  variant: "primary"
-}) %>

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.jsx DELETED Viewed

@@ -1,58 +0,0 @@
-import React from 'react'
-import LabelPill from '../_label_pill'
-const LabelPillDefault = (props) => (
-  <>
-    <LabelPill
-        label="Service Needed"
-        pillValue="76"
-        {...props}
-    />
-    <LabelPill
-        label="Waiting"
-        pillValue="69"
-        variant="success"
-        {...props}
-    />
-    <LabelPill
-        label="In Service"
-        pillValue="28"
-        variant="error"
-        {...props}
-    />
-    <LabelPill
-        label="Fully Serviced"
-        pillValue="101"
-        variant="warning"
-        {...props}
-    />
-    <LabelPill
-        label="Inbox"
-        pillValue="197"
-        variant="info"
-        {...props}
-    />
-    <LabelPill
-        label="Outbox"
-        pillValue="13"
-        variant="neutral"
-        {...props}
-    />
-    <LabelPill
-        label="Inbox"
-        pillValue="218"
-        variant="primary"
-        {...props}
-    />
-  </>
-)
-export default LabelPillDefault

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Use this kit to display a label and a value with a certain status or color to highlight its significance or meaning. It can be a good design use to highlight the value incase it is important.

data/app/pb_kits/playbook/pb_label_pill/docs/example.yml DELETED Viewed

@@ -1,8 +0,0 @@
-examples:
-  rails:
-  - label_pill_default: Default
-  react:
-  - label_pill_default: Default

data/app/pb_kits/playbook/pb_label_pill/docs/index.js DELETED Viewed

	@@ -1 +0,0 @@
1	- export { default as LabelPillDefault } from './_label_pill_default.jsx'

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

@@ -1,3 +0,0 @@
-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/_footer.md DELETED Viewed

	@@ -1,2 +0,0 @@
1	- ## Things to Avoid
2	- Try not to use this kit without padding as it will make text illegible if placed right next to the same kit or other kits.