playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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