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

playbook_ui 12.19.0.pre.alpha.PLAY699zindexresponsive650 → 12.19.0.pre.alpha.movemarkdown637

Files changed (1468) hide show

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb DELETED Viewed

@@ -1,323 +0,0 @@
-<%= pb_rails("passphrase", props: { label: "Default Settings", classname: "def_passphrase" }) %>
-<%= pb_rails("progress_simple", props: { percent: 0, id: "def_bar" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "def_caption" }) %>
-<%= pb_rails("text_input", props: { label: "Calculated Strength", value: "0", disabled: true, id: "calc_strength" }) %>
-<%= pb_rails("passphrase", props: { label: "Min length = 5", classname: "min_5" }) %>
-<%= pb_rails("progress_simple", props: { percent: 0, id: "min_5_bar" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "min_5_caption" }) %>
-<%= pb_rails("passphrase", props: { label: "Min length = 30", classname: "min_30" }) %>
-<%= pb_rails("progress_simple", props: { percent: 0, id: "min_30_bar" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "min_30_caption" }) %>
-<%= pb_rails("passphrase", props: { label: "Average Threshold = 1", classname: "avg_1" }) %>
-<%= pb_rails("progress_simple", props: { percent: 0, id: "avg_1_bar" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "avg_1_caption" }) %>
-<%= pb_rails("passphrase", props: { label: "Strong Threshold = 4", classname: "strong_4" }) %>
-<%= pb_rails("progress_simple", props: { percent: 0, id: "strong_4_bar" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "strong_4_caption" }) %>
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
-    // variables for the passphrase kits you are targeting
-    const defPassphrase = document.querySelector(".def_passphrase").querySelector("input")
-    const min5 = document.querySelector(".min_5").querySelector("input")
-    const min30 = document.querySelector(".min_30").querySelector("input")
-    const avg1 = document.querySelector(".avg_1").querySelector("input")
-    const strong4 = document.querySelector(".strong_4").querySelector("input")
-    // variable for the text_input kit you are targeting
-    const calcStrength = document.querySelector("#calc_strength")
-    // variables for the progress_simple kits you are targeting
-    const defBarVariant = document.getElementById("def_bar")
-    const defBarPercent = document.getElementById("def_bar").querySelector("div")
-    const min5BarVariant = document.getElementById("min_5_bar")
-    const min5BarPercent = document.getElementById("min_5_bar").querySelector("div")
-    const min30BarVariant = document.getElementById("min_30_bar")
-    const min30BarPercent = document.getElementById("min_30_bar").querySelector("div")
-    const avg1BarVariant = document.getElementById("avg_1_bar")
-    const avg1BarPercent = document.getElementById("avg_1_bar").querySelector("div")
-    const strong4BarVariant = document.getElementById("strong_4_bar")
-    const strong4BarPercent = document.getElementById("strong_4_bar").querySelector("div")
-    // hide all the progress_simple bars
-    defBarVariant.style.display = 'none';
-    defBarPercent.style.display = 'none';
-    min5BarVariant.style.display = 'none';
-    min5BarPercent.style.display = 'none';
-    min30BarVariant.style.display = 'none';
-    min30BarPercent.style.display = 'none';
-    avg1BarVariant.style.display = 'none';
-    avg1BarPercent.style.display = 'none';
-    strong4BarVariant.style.display = 'none';
-    strong4BarPercent.style.display = 'none';
-    // variables for the caption kits you are targeting
-    const defCaption = document.getElementById("def_caption")
-    const min5Caption = document.getElementById("min_5_caption")
-    const min30Caption = document.getElementById("min_30_caption")
-    const avg1Caption = document.getElementById("avg_1_caption")
-    const strong4Caption = document.getElementById("strong_4_caption")
-    // hide all the captions
-    defCaption.style.display = 'none';
-    min5Caption.style.display = 'none';
-    min30Caption.style.display = 'none';
-    avg1Caption.style.display = 'none';
-    strong4Caption.style.display = 'none';
-    // funtion that determines strenght of user passowrd using zxcvbn
-    const handleStrengthCalculation = (settings) => {
-      // define the settings object with its defaults
-      const {
-        passphrase = "",
-        common = false,
-        isPwned = false,
-        averageThreshold = 2,
-        minLength = 12,
-        strongThreshold = 3,
-      } = settings
-      // define the resultsByScore objects, these return an object with a variant and percentage,
-      // depending on the score of the password
-      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
-      // conditional that returns the score of the password, along with the resultByScore object
-      // so we can change the percantage and variant of the progress_simple kit
-      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
-    min5.addEventListener('input', (e) => {
-      const passphrase = e.target.value;
-      // defining setting object to spread into handleStrengthCalculation
-      setting = {
-        minLength: 5,
-      }
-      // pass in passphrase and setting object to handleStrengthCalculation and set that equal to result variable
-      const result = handleStrengthCalculation({passphrase, ...setting})
-      // set the value of the text_input to the score
-      calcStrength.value = result.score
-      // conditional statment to show or hide progress_simple bar and caption if user has entered a password
-      if (passphrase) {
-        min5BarVariant.style.display = 'block';
-        min5BarPercent.style.display = 'block';
-        min5Caption.style.display = 'block';
-      } else {
-        min5BarVariant.style.display = 'none';
-        min5BarPercent.style.display = 'none';
-        min5Caption.style.display = 'none';
-      }
-      // set the width of the progress_simple kit
-      min5BarPercent.style.width = result.percent.toString()+ "%"
-      // set the variant of the progress_simple kit
-      min5BarVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
-      // set the text of the caption kit
-      min5Caption.textContent = result.label
-    });
-    defPassphrase.addEventListener('input', (e) => {
-      const passphrase = e.target.value;
-      const result = handleStrengthCalculation({passphrase})
-      calcStrength.value = result.score
-      if (passphrase) {
-        defBarVariant.style.display = 'block';
-        defBarPercent.style.display = 'block';
-        defCaption.style.display = 'block';
-      } else {
-        defBarVariant.style.display = 'none';
-        defBarPercent.style.display = 'none';
-        defCaption.style.display = 'none';
-      }
-      defBarPercent.style.width = result.percent.toString()+ "%"
-      defBarVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
-      defCaption.textContent = result.label
-    });
-    min30.addEventListener('input', (e) => {
-      const passphrase = e.target.value;
-      setting = {
-        minLength: 30,
-      }
-      const result = handleStrengthCalculation({passphrase, ...setting})
-      calcStrength.value = result.score
-      if (passphrase) {
-        min30BarVariant.style.display = 'block';
-        min30BarPercent.style.display = 'block';
-        min30Caption.style.display = 'block';
-      } else {
-        min30BarVariant.style.display = 'none';
-        min30BarPercent.style.display = 'none';
-        min30Caption.style.display = 'none';
-      }
-      min30BarPercent.style.width = result.percent.toString()+ "%"
-      min30BarVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
-      min30Caption.textContent = result.label
-    });
-    avg1.addEventListener('input', (e) => {
-      const passphrase = e.target.value;
-      setting =   {
-        averageThreshold: 1,
-      }
-      const result = handleStrengthCalculation({passphrase, ...setting})
-      calcStrength.value = result.score
-      if (passphrase) {
-        avg1BarVariant.style.display = 'block';
-        avg1BarPercent.style.display = 'block';
-        avg1Caption.style.display = 'block';
-      } else {
-        avg1BarVariant.style.display = 'none';
-        avg1BarPercent.style.display = 'none';
-        avg1Caption.style.display = 'none';
-      }
-      avg1BarPercent.style.width = result.percent.toString()+ "%"
-      avg1BarVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
-      avg1Caption.textContent = result.label
-    });
-    strong4.addEventListener('input', (e) => {
-      const passphrase = e.target.value;
-      setting =   {
-        strongThreshold: 4,
-      }
-      const result = handleStrengthCalculation({passphrase, ...setting})
-      calcStrength.value = result.score
-      if (passphrase) {
-        strong4BarVariant.style.display = 'block';
-        strong4BarPercent.style.display = 'block';
-        strong4Caption.style.display = 'block';
-      } else {
-        strong4BarVariant.style.display = 'none';
-        strong4BarPercent.style.display = 'none';
-        strong4Caption.style.display = 'none';
-      }
-      strong4BarPercent.style.width = result.percent.toString()+ "%"
-      strong4BarVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
-      strong4Caption.textContent = result.label
-    });
-  })
-<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx DELETED Viewed

@@ -1,157 +0,0 @@
-import React, { useState } from 'react'
-import { Body, Caption, Passphrase, ProgressSimple, TextInput } from '../..'
-import zxcvbn from 'zxcvbn'
-const PassphraseMeterSettings = (props) => {
-  const [input, setInput] = useState('')
-  const [result, setResult] = useState({})
-  const [calculatedStrength, setCalculatedStrength] = useState(0)
-  const meterSettings = [
-    {
-      label: "Default settings"
-    },
-    {
-      minLength: 5,
-      label: "Min length = 5",
-    },
-    {
-      minLength: 30,
-      label: "Min length = 30",
-    },
-    {
-      label: "Average threshold = 1",
-      averageThreshold: 1,
-    },
-    {
-      label: "Strong Threshold = 4",
-      strongThreshold: 4,
-    },
-  ]
-  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}
-    }
-  }
-  const handleChange = (e) => {
-    const passphrase = e.target.value;
-    setInput(passphrase)
-    const calculated = []
-    meterSettings.forEach((setting, index) => {
-      const results = handleStrengthCalculation({passphrase, ...setting})
-      if (index == 0) setCalculatedStrength(results.score)
-      calculated.push(results)
-    })
-    setResult(calculated)
-  }
-  return (
-    <>
-      <div>
-        <Body>
-          {
-            "These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings."
-          }
-        </Body>
-        <Passphrase
-            label={"Type your passphrase"}
-            onChange={handleChange}
-            value={input}
-            {...props}
-        />
-        <TextInput
-            disabled
-            label="Calculated Strength"
-            readOnly
-            value={calculatedStrength}
-        />
-        {meterSettings.map((settings, index) => (
-          <div key={index}>
-            <Passphrase
-                label={settings.label}
-                onChange={handleChange}
-                value={input}
-                {...props}
-            />
-            {input.length > 0 && (
-              <>
-                <ProgressSimple
-                    percent={result[index].percent}
-                    variant={result[index].variant}
-                />
-                <Caption size='xs'
-                    text={result[index].label}
-                />
-              </>
-            )}
-          </div>
-        ))}
-      </div>
-    </>
-  );
-}
-export default PassphraseMeterSettings

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md DELETED Viewed

@@ -1,15 +0,0 @@
-This example shows how to enhance the passphrase strenght by setting diferent thresholds and lengths.
-The `meterSettings` array contains different settings for each rendered input. The `handleStrengthCalculation` handles the strength calculation using those settings, showing different results for the same `passphrase` input.
-By default, `minLength` is 12. Try typing any value in the `Default Example` input. Notice that the bar won't change from red until the minimum is met.
-Adjust these props to tune the sensitivity of the bar.
-Note: minimum length trumps strength and will set the bar to a red color, despite whatever strength is calculated.
-<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.
-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.

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb DELETED Viewed

@@ -1,123 +0,0 @@
-<%= pb_rails("passphrase", props: { label: "Passphrase", classname: "passphrase_change" }) %>
-<%= pb_rails("progress_simple", props: { percent: 0, id: "bar_change" }) %>
-<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_change" }) %>
-<%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
-    // variables for the kits you are targeting
-    const passphrase = document.querySelector(".passphrase_change").querySelector("input")
-    const calcStrength = document.querySelector("#calc_strength_change")
-    const barVariant = document.getElementById("bar_change")
-    const barPercent = document.getElementById("bar_change").querySelector("div")
-    const caption = document.getElementById("caption_change")
-    // 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;
-      // pass in passphrase to the handleStrengthCalculation and set that equal to result variable
-      const result = handleStrengthCalculation({passphrase: passphrase})
-      // set the value of the text_input to the score
-      calcStrength.value = result.score
-      // 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
-    });
-  })
-<% end %>