playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_nav/docs/_subtle_no_highlight_nav.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("nav", props: {variant: "subtle", highlight: false}) do %>
+  <%= pb_rails("nav/item", props: { text: "Dashboard", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Statistics", link: "#", active: true  }) %>
+  <%= pb_rails("nav/item", props: { text: "Pages", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_subtle_no_highlight_nav.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+const SubtleNoHighlightNav = (props) => {
+  return (
+    <Nav
+        highlight={false}
+        variant="subtle"
+        {...props}
+    >
+      <NavItem
+          link="#"
+          text="Dashboard"
+          {...props}
+      />
+      <NavItem
+          active
+          link="#"
+          text="Statistics"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Pages"
+          {...props}
+      />
+    </Nav>
+  )
+}
+
+export default SubtleNoHighlightNav

data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("nav", props: {variant: "subtle"}) do %>
+  <%= pb_rails("nav/item", props: { icon_left: "city", text: "City", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "user-friends", text: "People", link: "#", icon_right: "angle-down" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "user-tie", text: "Business", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "theater-masks", text: "Entertainment", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "salad", text: "Food", link: "#", icon_right: "angle-down" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "sunglasses", text: "Style", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "child", text: "Childern", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+const SubtleWithIconsNav = (props) => {
+  return (
+    <Nav variant="subtle">
+      <NavItem
+          iconLeft="city"
+          link="#"
+          text="City"
+          {...props}
+      />
+      <NavItem
+          iconLeft="user-friends"
+          iconRight="angle-down"
+          link="#"
+          text="People"
+          {...props}
+      />
+      <NavItem
+          active
+          iconLeft="user-tie"
+          link="#"
+          text="Business"
+          {...props}
+      />
+      <NavItem
+          iconLeft="theater-masks"
+          link="#"
+          text="Entertainment"
+          {...props}
+      />
+      <NavItem
+          iconLeft="salad"
+          iconRight="angle-down"
+          link="#"
+          text="Food"
+          {...props}
+      />
+      <NavItem
+          iconLeft="sunglasses"
+          link="#"
+          text="Style"
+          {...props}
+      />
+      <NavItem
+          iconLeft="child"
+          link="#"
+          text="Childern"
+          {...props}
+      />
+    </Nav>
+  )
+}
+
+export default SubtleWithIconsNav

data/app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("nav", props: {title: "Browse", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { icon_left: "newspaper", text: "News Feed"  }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "comments-alt", link: "#", text: "Messages", active: true }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "calendar-check", icon_right: "angle-down", link: "#", text: "Events" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "users", link: "#", text: "Friends" }) %>
+  <%= pb_rails("nav/item", props: { icon_left: "users-class", icon_right: "angle-down", link: "#", text: "Groups" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+const WithIconsNav = (props) => {
+  return (
+    <Nav
+        link="#"
+        title="Browse"
+        {...props}
+    >
+      <NavItem
+          iconLeft="newspaper"
+          text="News Feed"
+          {...props}
+      />
+      <NavItem
+          active
+          iconLeft="comments-alt"
+          link="#"
+          text="Messages"
+          {...props}
+      />
+      <NavItem
+          iconLeft="calendar-check"
+          iconRight="angle-down"
+          link="#"
+          text="Events"
+          {...props}
+      />
+      <NavItem
+          iconLeft="users"
+          link="#"
+          text="Friends"
+          {...props}
+      />
+      <NavItem
+          iconLeft="users-class"
+          iconRight="angle-down"
+          link="#"
+          text="Groups"
+          {...props}
+      />
+    </Nav>
+  )
+}
+
+export default WithIconsNav

data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("nav", props: {title: "Browse", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { image_url: "https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png", text: "News Feed"  }) %>
+  <%= pb_rails("nav/item", props: { image_url: "https://p7.hiclipart.com/preview/928/339/723/messages-iphone-apple-imessage-iphone-thumbnail.jpg", link: "#", text: "Messages", active: true }) %>
+  <%= pb_rails("nav/item", props: { image_url: "https://www.clipartmax.com/png/middle/103-1038653_circle-icons-calendar-svg-event-icon.png", icon_right: "angle-down", link: "#", text: "Events" }) %>
+  <%= pb_rails("nav/item", props: { image_url: "https://www.pngitem.com/pimgs/m/228-2289227_find-friends-icon-png-image-iphone-find-my.png", link: "#", text: "Friends" }) %>
+  <%= pb_rails("nav/item", props: { image_url: "https://img.favpng.com/18/5/20/blue-human-behavior-silhouette-area-communication-png-favpng-wLT3QYknSwc68uu9GAUHGS5FY_t.jpg", icon_right: "angle-down", link: "#", text: "Groups" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+const WithImageNav = (props) => {
+  return (
+    <Nav
+        link="#"
+        title="Browse"
+        {...props}
+    >
+      <NavItem
+          imageUrl="https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png"
+          text="News Feed"
+          {...props}
+      />
+      <NavItem
+          active
+          imageUrl="https://p7.hiclipart.com/preview/928/339/723/messages-iphone-apple-imessage-iphone-thumbnail.jpg"
+          link="#"
+          text="Messages"
+          {...props}
+      />
+      <NavItem
+          iconRight="angle-down"
+          imageUrl="https://www.clipartmax.com/png/middle/103-1038653_circle-icons-calendar-svg-event-icon.png"
+          link="#"
+          text="Events"
+          {...props}
+      />
+      <NavItem
+          imageUrl="https://www.pngitem.com/pimgs/m/228-2289227_find-friends-icon-png-image-iphone-find-my.png"
+          link="#"
+          text="Friends"
+          {...props}
+      />
+      <NavItem
+          iconRight="angle-down"
+          imageUrl="https://img.favpng.com/18/5/20/blue-human-behavior-silhouette-area-communication-png-favpng-wLT3QYknSwc68uu9GAUHGS5FY_t.jpg"
+          link="#"
+          text="Groups"
+          {...props}
+      />
+    </Nav>
+  )
+}
+
+export default WithImageNav

data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.md

@@ -0,0 +1 @@
+Icon used needs to be square. Icon size is 24px by 24px.

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

@@ -0,0 +1,34 @@
+examples:
+  rails:
+  - default_nav: Default
+  - with_icons_nav: With Icons
+  - with_img_nav: With Custom Icon
+  - no_highlight_nav: No Highlight
+  - borderless_nav: No Borders
+  - subtle_nav: Subtle Variant
+  - subtle_with_icons_nav: Subtle With Icons
+  - subtle_no_highlight_nav: Subtle No Highlight
+  - bold_vertical_nav: Bold Variant
+  - horizontal_nav: Horizontal Nav
+  - subtle_horizontal_nav: Subtle Horizontal Nav
+  - bold_horizontal_nav: Bold Horizontal Nav
+  - block_nav: Block
+  - block_no_title_nav: Without Title
+  - new_tab: Open in a New Tab
+
+  react:
+  - default_nav: Default
+  - with_icons_nav: With Icons
+  - with_img_nav: With Custom Icon
+  - no_highlight_nav: No Highlight
+  - borderless_nav: No Borders
+  - subtle_nav: Subtle Variant
+  - subtle_with_icons_nav: Subtle With Icons
+  - subtle_no_highlight_nav: Subtle No Highlight
+  - bold_vertical_nav: Bold Variant
+  - horizontal_nav: Horizontal Nav
+  - subtle_horizontal_nav: Subtle Horizontal Nav
+  - bold_horizontal_nav: Bold Horizontal Nav
+  - block_nav: Block
+  - block_no_title_nav: Without Title
+  - new_tab: Open in a New Tab

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

@@ -0,0 +1,15 @@
+export { default as DefaultNav } from './_default_nav.jsx'
+export { default as HorizontalNav } from './_horizontal_nav.jsx'
+export { default as SubtleHorizontalNav } from './_subtle_horizontal_nav.jsx'
+export { default as BlockNav } from './_block_nav.jsx'
+export { default as BlockNoTitleNav } from './_block_no_title_nav.jsx'
+export { default as NoHighlightNav } from './_no_highlight_nav.jsx'
+export { default as BorderlessNav } from './_borderless_nav.jsx'
+export { default as SubtleNav } from './_subtle_nav.jsx'
+export { default as SubtleNoHighlightNav } from './_subtle_no_highlight_nav.jsx'
+export { default as WithIconsNav } from './_with_icons_nav.jsx'
+export { default as SubtleWithIconsNav } from './_subtle_with_icons_nav.jsx'
+export { default as WithImgNav } from './_with_img_nav.jsx'
+export { default as NewTab } from './_new_tab.jsx'
+export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
+export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'

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

@@ -0,0 +1 @@
+Online Status is a small indicator that lets the user know the status of a person or item.

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("online_status", props: { status: "offline" }) %>
+
+<br>
+
+<%= pb_rails("online_status", props: { status: "online" }) %>
+
+<br>
+
+<%= pb_rails("online_status", props: { status: "away" }) %>

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import OnlineStatus from '../_online_status'
+
+const OnlineStatusDefault = (props) => (
+  <>
+    <OnlineStatus
+        status="offline"
+        {...props}
+    />
+
+    <br />
+
+    <OnlineStatus
+        status="online"
+        {...props}
+    />
+
+    <br />
+
+    <OnlineStatus
+        status="away"
+        {...props}
+    />
+
+  </>
+)
+
+export default OnlineStatusDefault

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

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

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

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

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("pagination", props: { model: @users, view: self}) %>

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md

@@ -0,0 +1,6 @@
+<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div> 
+Our Pagination kit depends on the <a href="https://github.com/mislav/will_paginate" target="_blank"> will\_paginate library. </a> Please follow the basic will\_paginate setup.
+
+Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of `<%= will_paginate @users %>` in your view file.
+
+You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.

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

@@ -0,0 +1,6 @@
+examples:
+  
+  rails:
+  - pagination_default: Default
+  
+  

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb

@@ -0,0 +1,145 @@
+<%= pb_rails("passphrase", props: { label: "Passphrase", classname: "passphrase_breached" }) %>
+
+<%= pb_rails("progress_simple", props: { percent: 0, id: "bar_breached" }) %>
+
+<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
+
+    // variables for the kits you are targeting 
+    const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
+    const barVariant = document.getElementById("bar_breached")
+    const barPercent = document.getElementById("bar_breached").querySelector("div")
+    const caption = document.getElementById("caption_breached")
+
+    // hide the bar and captions
+    barVariant.style.display = 'none';
+    barPercent.style.display = 'none';
+    caption.style.display = 'none';
+
+
+  const handleStrengthCalculation = (settings) => {
+    const {
+        passphrase = "",
+        common = false,
+        isPwned = false,
+        averageThreshold = 2,
+        minLength = 12,
+        strongThreshold = 3,
+      } = settings
+
+    const resultByScore = {
+      0: {
+        variant: 'negative',
+        label: '',
+        percent: 0,
+      },
+      1: {
+        variant: 'negative',
+        label: 'This passphrase is too common',
+        percent: 25,
+      },
+      2: {
+        variant: 'negative',
+        label: 'Too weak',
+        percent: 25,
+      },
+      3: {
+        variant: 'warning',
+        label: 'Almost there, keep going!',
+        percent: 50,
+      },
+      4: {
+        variant: 'positive',
+        label: 'Success! Strong passphrase',
+        percent: 100,
+      }
+    }
+
+    const { score } = zxcvbn(passphrase);
+
+    const noPassphrase = passphrase.length <= 0
+    const commonPassphrase = common || isPwned
+    const weakPassphrase = passphrase.length < minLength || score < averageThreshold
+    const averagePassphrase = score < strongThreshold
+    const strongPassphrase = score >= strongThreshold
+
+    if (noPassphrase) {
+      return {...resultByScore[0], score}
+    } else if (commonPassphrase) {
+      return {...resultByScore[1], score}
+    } else if (weakPassphrase) {
+      return {...resultByScore[2], score}
+    } else if (averagePassphrase){
+      return {...resultByScore[3], score}
+    } else if (strongPassphrase) {
+      return {...resultByScore[4], score}
+    }
+  }
+
+    // event listeners attached to the input field
+    passphrase.addEventListener('input', (e) => {
+      const passphrase = e.target.value;
+
+      let pwndMatch = false
+
+      const checkHaveIBeenPwned = async function (passphrase) {
+        const buffer = new TextEncoder('utf-8').encode(passphrase)
+        const digest = await crypto.subtle.digest('SHA-1', buffer)
+        const hashArray = Array.from(new Uint8Array(digest))
+        const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
+      
+        const firstFive = hashHex.slice(0, 5)
+        const endOfHash = hashHex.slice(5)
+      
+        const resp = await fetch(`https://api.pwnedpasswords.com/range/${firstFive}`)
+        const text = await resp.text()
+    
+        if (passphrase.length < 5) {
+          pwndMatch = false
+        }
+        else {
+          pwndMatch = text.split('\n').some((line) => {
+          return line.split(':')[0] === endOfHash.toUpperCase()
+          })
+        }
+
+        // pass in passphrase and isPwnd match to the handleStrengthCalculation and set that equal to result variable
+        const result = handleStrengthCalculation({ passphrase: passphrase, isPwned: pwndMatch });
+
+
+        // conditional statment to show or hide progress_simple bar and caption if user has entered a password
+        if (passphrase) {
+          barVariant.style.display = 'block';
+
+          barPercent.style.display = 'block';
+
+          caption.style.display = 'block';
+        } else {
+          barVariant.style.display = 'none';
+
+          barPercent.style.display = 'none';
+
+          caption.style.display = 'none';
+        }
+
+        // set the width of the progress_simple kit
+        barPercent.style.width = result.percent.toString()+ "%"
+
+
+        // set the variant of the progress_simple kit
+        barVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
+
+
+        // set the text of the caption kit
+        caption.textContent = result.label
+      }
+
+      checkHaveIBeenPwned(passphrase)
+
+
+    });
+
+  })
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx

@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react'
+
+import { Caption, Passphrase, ProgressSimple } from '../..'
+import zxcvbn from 'zxcvbn'
+
+const PassphraseBreached = (props) => {
+  const [input, setInput] = useState('')
+  const [isPwned, setIsPwned] = useState(false)
+  const [checkStrength, setCheckStrength] = useState({
+    label: '',
+    percent: 0,
+    score: 0,
+    variant: ''
+  })
+
+
+  const handleChange = (e) => setInput(e.target.value)
+
+  const checkHaveIBeenPwned = async function (passphrase) {
+    const buffer = new TextEncoder('utf-8').encode(passphrase)
+    const digest = await crypto.subtle.digest('SHA-1', buffer)
+    const hashArray = Array.from(new Uint8Array(digest))
+    const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
+  
+    const firstFive = hashHex.slice(0, 5)
+    const endOfHash = hashHex.slice(5)
+  
+    const resp = await fetch(`https://api.pwnedpasswords.com/range/${firstFive}`)
+    const text = await resp.text()
+  
+    const match = text.split('\n').some((line) => {
+      //Each line is <sha-1-hash-suffix>:<count of incidents>
+      return line.split(':')[0] === endOfHash.toUpperCase()
+    })
+    return match
+  }
+
+  const handleStrengthCalculation = (settings) => {
+    const {
+        passphrase = "",
+        common = false,
+        isPwned = false,
+        averageThreshold = 2,
+        minLength = 12,
+        strongThreshold = 3,
+      } = settings
+
+    const resultByScore = {
+      0: {
+        variant: 'negative',
+        label: '',
+        percent: 0,
+      },
+      1: {
+        variant: 'negative',
+        label: 'This passphrase is too common',
+        percent: 25,
+      },
+      2: {
+        variant: 'negative',
+        label: 'Too weak',
+        percent: 25,
+      },
+      3: {
+        variant: 'warning',
+        label: 'Almost there, keep going!',
+        percent: 50,
+      },
+      4: {
+        variant: 'positive',
+        label: 'Success! Strong passphrase',
+        percent: 100,
+      }
+    }
+
+    const { score } = zxcvbn(passphrase);
+
+    const noPassphrase = passphrase.length <= 0
+    const commonPassphrase = common || isPwned
+    const weakPassphrase = passphrase.length < minLength || score < averageThreshold
+    const averagePassphrase = score < strongThreshold
+    const strongPassphrase = score >= strongThreshold
+
+    if (noPassphrase) {
+      return {...resultByScore[0], score}
+    } else if (commonPassphrase) {
+      return {...resultByScore[1], score}
+    } else if (weakPassphrase) {
+      return {...resultByScore[2], score}
+    } else if (averagePassphrase){
+      return {...resultByScore[3], score}
+    } else if (strongPassphrase) {
+      return {...resultByScore[4], score}
+    }
+  }
+
+  useEffect(
+    () => {
+      const delay = 400
+      const result = handleStrengthCalculation({ passphrase: input, isPwned: isPwned });
+    
+      setCheckStrength({ ...result })
+
+      // only check the API for passphrases above the minimum size
+      if (input.length < 5) {
+        setIsPwned(false)
+        return
+      }
+
+      const handler = setTimeout(() => {
+        checkHaveIBeenPwned(input)
+          .then((pwned) => setIsPwned(pwned))
+          .catch(() => setIsPwned(false))
+      }, delay)
+
+      return () => {
+        clearTimeout(handler)
+      }
+    },
+    [input, isPwned]
+  )
+
+  return (
+    <>
+      <div>
+        <br />
+        <Passphrase
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        {checkStrength.percent > 0 ? 
+          <>
+            <ProgressSimple
+                className={input.length === 0 ? "progress-empty-input" : null}
+                percent={checkStrength.percent}
+                variant={checkStrength.variant}
+            />
+            <Caption size='xs'
+                text={checkStrength.label} 
+            />
+          </>
+        : null}
+      </div>
+    </>
+  )
+}
+
+export default PassphraseBreached

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md

@@ -0,0 +1,12 @@
+Use <a href='https://haveibeenpwned.com/Passwords'>HaveIBeenPwned's</a> API to check for breached passwords.
+
+As the passphrase is typed, it is checked against more than half a billion breached passwords, to help ensure its not compromised.
+Should it fail, the feedback will express the passphrase is too common, prompting the user to change.
+
+This uses their k-Anonymity model, so only the first 5 characters of a hashed copy of the passphrase are sent.
+
+<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
+
+This example depends on the `zxcvbn` library and `haveibeenpwned` API. 
+
+You can use any library to achieve the same result, this example only intends to show how to add more features to the `Passphrase` kit.