playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import { Background } from '../..'
+import { Flex } from '../..'
+
+const BackgroundCategory = (props) => (
+  <Flex
+      gap="md"
+      justify="center"
+      wrap
+  >
+    <Background
+        backgroundColor="category_1"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_2"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_3"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_4"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_5"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_6"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_7"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_8"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_9"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_10"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_11"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_12"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_13"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_14"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_15"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_16"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_17"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_18"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_19"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_20"
+        padding="xl"
+        {...props}
+    />
+    <Background
+        backgroundColor="category_21"
+        padding="xl"
+        {...props}
+    />
+  </Flex>
+)
+
+export default BackgroundCategory

data/app/pb_kits/playbook/pb_background/docs/_background_category.md

@@ -0,0 +1 @@
+Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("background", props: { background_color: "gradient", padding: "xl" }) do %> 
+
+<% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Background } from '../..'
+
+const BackgroundGradient = (props) => (
+  <Background
+      backgroundColor="gradient"
+      padding="xl"
+      {...props}
+  />
+)
+
+export default BackgroundGradient

data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb

@@ -0,0 +1,61 @@
+<%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", padding: "lg" }) do %>
+  <%= pb_rails("flex", props: { horizontal: "center", orientation: "column", margin_bottom: "xl" }) do %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("title", props: { dark: true, size: 1, text: "Background Kit Image" })%>
+    <% end %>
+    <%= pb_rails("flex/flex_item", props: { padding: "lg" }) do %>
+      <%= pb_rails("card", props: { shadow: "deepest" }) do %>
+        We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own.
+        -Cesar Chavez
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+
+<%= pb_rails("flex", props: { margin_top: "lg" }) 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 %>
+<% end %> 
+
+<script>
+    window.addEventListener('DOMContentLoaded', () => {
+        const transitionDropdown = document.querySelector("#transition-dropdown")
+        var option = ''
+
+        transitionDropdown.addEventListener('change', function() {
+          if (this.value === '') {
+            (transitionDropdown).className = (transitionDropdown).className + ' _disabled'
+          } else {
+            (transitionDropdown).removeAttribute("disabled");
+            (transitionDropdown).className = (transitionDropdown)
+            option = this.value
+          }
+        });
+
+        const updateTransition = (transition) => {
+          const imageTransition = document.querySelector('.background-image')
+            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
+            imageTransition.classList.add(transition, "lazyload")   
+        } 
+        (transitionDropdown).addEventListener('change', function() {
+          updateTransition(option)
+        })
+    });
+</script>

data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react'
+import { Background } from '../..'
+import { Card, Flex, FlexItem, Select, Title } from '../..'
+
+const BackgroundImage = (props) => {
+  const [transition, setTransition] = useState('')
+
+  const handleTransition = ({ target }) => {
+    setTransition(target.value)
+  }
+
+  const options = [
+    {
+      value: 'fade',
+    },
+    {
+      value: 'blur',
+    },
+    {
+      value: 'scale',
+    },
+  ]
+
+  return (
+    <>
+      <Background
+          alt="colorful background"
+          className="background lazyload"
+          imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+          transition={transition}
+          {...props}
+      >
+        <Flex
+            orientation="column"
+            vertical="center"
+            {...props}
+        >
+          <FlexItem>
+            <Title
+                dark
+                padding="lg"
+                size={1}
+                text="Background Kit Image"
+                {...props}
+            />
+          </FlexItem>
+          <FlexItem
+              padding="lg"
+              {...props}
+          >
+            <Card
+                shadow="deepest"
+                {...props}
+            >
+              {
+                'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'
+              }
+            </Card>
+          </FlexItem>
+        </Flex>
+      </Background>
+      <Flex marginTop="xl">
+        <FlexItem fixedSize="250px">
+          <Select
+              blankSelection="Select a Transition..."
+              label=""
+              name="dropdown"
+              onChange={handleTransition}
+              options={options}
+              transition={transition}
+              {...props}
+          />
+        </FlexItem>
+      </Flex>
+    </>
+  )
+}
+
+export default BackgroundImage

data/app/pb_kits/playbook/pb_background/docs/_background_image.md

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

data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
+
+<% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Background } from '../..'
+
+const BackgroundLight = (props) => (
+  <Background
+      backgroundColor="light"
+      padding="xl"
+      {...props}
+  />
+)
+
+export default BackgroundLight

data/app/pb_kits/playbook/pb_background/docs/_background_size.html.erb

@@ -0,0 +1,5 @@
+ <%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_size: "auto", padding: "xl" }) %>
+ <br/>
+ <%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_size: "cover", padding: "xl" }) %>
+ <br/>
+ <%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_repeat: "no-repeat", background_size: "contain", padding: "xl" }) %>

data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx

@@ -0,0 +1,36 @@
+import React, { Fragment as F } from 'react'
+import { Background } from '../..'
+
+const BackgroundSize = (props) => (
+  <F>
+    <Background
+        alt="colorful background"
+        backgroundSize="auto"
+        className="background lazyload"
+        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+        padding="xl"
+        {...props}
+    />
+    <br/>
+    <Background
+        alt="colorful background"
+        backgroundSize="cover"
+        className="background lazyload"
+        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+        padding="xl"
+        {...props}
+    />
+    <br/>
+    <Background
+        alt="colorful background"
+        backgroundRepeat="no-repeat"
+        backgroundSize="contain"
+        className="background lazyload"
+        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+        padding="xl"
+        {...props}
+    />
+  </F>
+)
+
+export default BackgroundSize

data/app/pb_kits/playbook/pb_background/docs/_background_size.md

@@ -0,0 +1,3 @@
+Background size can be passed into the background kit. Values `auto`, `cover`, and `contain` are accepted. 
+
+💡 *Note:* When using `contain` you might not want to have a repeating background as this will not always look pleasant. To prevent this, you may pass `no-repeat` to the `backgroundRepeat` prop. 

data/app/pb_kits/playbook/pb_background/docs/_background_status.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("flex", props: {gap: "md", justify: "center", wrap: true}) do %>
+  <%= pb_rails("background", props: { background_color: "success", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "success_secondary", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "warning", padding: "xl" }) do %> <% end %>
+  <br>
+   <%= pb_rails("background", props: { background_color: "warning_secondary", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "error", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "error_secondary", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "info", padding: "xl" }) do %> <% end %>
+  <br>
+    <%= pb_rails("background", props: { background_color: "info_secondary", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "neutral", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "neutral_secondary", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "primary", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "primary_secondary", padding: "xl" }) do %> <% end %>
+<%end%>

data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { Background } from '../..'
+import { Flex } from '../..'
+
+const BackgroundStatus = (props) => (
+<Flex
+    gap="md"
+    justify="center"
+    wrap
+>
+    <Background
+        backgroundColor="success"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="success_secondary"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="warning"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="warning_secondary"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="error"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="error_secondary"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="info"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="info_secondary"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="neutral"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="neutral_secondary"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="primary"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="primary_secondary"
+        padding="xl"
+        {...props}
+    />
+  </Flex>
+)
+
+export default BackgroundStatus

data/app/pb_kits/playbook/pb_background/docs/_background_status.md

@@ -0,0 +1 @@
+Status colors can be passed into the background kit. `success`, `success_secondary`, `warning`, `warning_secondary`, `error`, `error_secondary`, `info`, `info_secondary`, `neutral`, `neutral_secondary`, `primary`, and `primary_secondary`

data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("flex", props: {gap: "md", justify: "center", wrap: true}) do %>
+  <%= pb_rails("background", props: { background_color: "success_subtle", padding: "xl" }) do %> <% end %>
+  <br>
+   <%= pb_rails("background", props: { background_color: "warning_subtle", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "error_subtle", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "info_subtle", padding: "xl" }) do %> <% end %>
+  <br>
+  <%= pb_rails("background", props: { background_color: "neutral_subtle", padding: "xl" }) do %> <% end %>
+<%end%>

data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Background } from '../..'
+import { Flex } from '../..'
+
+const BackgroundStatusSubtle = (props) => (
+<Flex
+    gap="md"
+    justify="center"
+    wrap
+>
+    <Background
+        backgroundColor="success_subtle"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="warning_subtle"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="error_subtle"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="info_subtle"
+        padding="xl"
+        {...props}
+    />
+    <br />
+    <Background
+        backgroundColor="neutral_subtle"
+        padding="xl"
+        {...props}
+    />
+    <br />
+  </Flex>
+)
+
+export default BackgroundStatusSubtle

data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.md

@@ -0,0 +1 @@
+Status Subtle colors can be passed into the background kit. `success_subtle`, `warning_subtle`,`error_subtle`, `info_subtle` and `neutral_subtle`

data/app/pb_kits/playbook/pb_background/docs/_background_white.html.erb

@@ -0,0 +1,3 @@
+  <%= pb_rails("background", props: { background_color: "white", padding: "xl" }) do %>
+    
+  <% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Background } from '../..'
+
+const BackgroundWhite = (props) => (
+  <div>
+    <Background
+        backgroundColor="white"
+        padding="xl"
+        {...props}
+    />
+  </div>
+
+)
+
+export default BackgroundWhite

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

@@ -0,0 +1,3 @@
+The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, white, status colors, product colors, and category colors.
+
+The `custom_color` prop allows you to pass a hex value (ex. "#e43718") in place of `background_color`. It is not case sensitive, but needs to start with `#`. This prop exists primarily for use in microsites and very specific situations. Avoid using unless absolutely necessary to maintain continuity.

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

@@ -0,0 +1,21 @@
+examples:
+
+  rails:
+  - background_light: Light
+  - background_white: White
+  - background_gradient: Gradient
+  - background_image: Image
+  - background_status: Status
+  - background_status_subtle: Status Subtle
+  - background_category: Category
+  - background_size: Size
+
+  react:
+  - background_light: Light
+  - background_white: White
+  - background_gradient: Gradient
+  - background_image: Image
+  - background_status: Status
+  - background_status_subtle: Status Subtle
+  - background_category: Category
+  - background_size: Size

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

@@ -0,0 +1,8 @@
+export { default as BackgroundLight } from './_background_light.jsx'
+export { default as BackgroundWhite } from './_background_white.jsx'
+export { default as BackgroundGradient } from './_background_gradient.jsx'
+export { default as BackgroundImage } from './_background_image.jsx'
+export { default as BackgroundStatus } from './_background_status.jsx'
+export { default as BackgroundStatusSubtle } from './_background_status_subtle.jsx'
+export { default as BackgroundCategory } from './_background_category.jsx'
+export { default as BackgroundSize } from './_background_size.jsx'