RubyGems - playbook_ui - Versions diffs - 9.4.0.pre.alpha1 → 9.6.0 - Mend

playbook_ui 9.4.0.pre.alpha1 → 9.6.0

Files changed (57) hide show

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss ADDED Viewed

@@ -0,0 +1,73 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/screen_sizes";
+.pb_passphrase {
+  margin-bottom: $space_sm;
+  label {
+    display: inline;
+  }
+  a.dark {
+    color: $white;
+  }
+  a {
+    &[class*=show-below-] {
+      display: none;
+    }
+    @each $breakpoint_name, $breakpoint in $breakpoints {
+      &.show-below-#{$breakpoint_name} {
+        @include break_at($breakpoint) {
+          display: inline;
+        }
+      }
+    }
+  }
+  .passphrase-label {
+    margin-right: ($space_xs/2);
+  }
+  .passphrase-text-input-wrapper {
+    position: relative;
+    .pb_text_input_kit_label {
+      margin-bottom: ($space_xs/2);
+    }
+    .passphrase-text-input input {
+      padding-right: 42px;
+    }
+    .passphrase-text-input .text_input_wrapper {
+      margin-bottom: 0;
+    }
+    .show-passphrase-icon {
+      position: absolute;
+      right: 11px;
+      top: 11px;
+      cursor: pointer;
+      @media (hover:hover) {
+        &:hover .pb_body_kit_light {
+          color: $primary;
+        }
+      }
+      .hide-icon {
+        display: none;
+      }
+    }
+  }
+  .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
+    margin-bottom: ($space_xs/2);
+    &.progress-empty-input {
+      visibility: hidden;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { Body, Passphrase } from '../../'
+const PassphraseCommon = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+  const COMMON_PASSPHRASES = ['passphrase', 'apple', 'password', 'p@55w0rd']
+  const commonCheck = (passphrase) => {
+    if (COMMON_PASSPHRASES.includes(passphrase))
+      return true
+    return false
+  }
+  return (
+    <>
+      <div>
+        <Body text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(' ')}`} />
+        <br />
+        <Passphrase
+            common={commonCheck(input)}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+export default PassphraseCommon

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.html.erb ADDED Viewed

@@ -0,0 +1,3 @@
+<%= pb_rails("passphrase") %>
+<%= pb_rails("passphrase", props: { confirmation: true}) %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.jsx ADDED Viewed

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { Passphrase } from '../../'
+const PassphraseDefault = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+  const [confoInput, setConfoInput] = useState('')
+  const handleConfoChange = (e) => setConfoInput(e.target.value)
+  return (
+    <>
+      <div>
+        <Passphrase
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            confirmation
+            onChange={handleConfoChange}
+            value={confoInput}
+            {...props}
+        />
+        <span>{input === confoInput ? 'They match!' : 'They don\'t match!'}</span>
+      </div>
+    </>
+  )
+}
+export default PassphraseDefault

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Use the `confirmation` prop to only include the label and show/hide icon.

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.html.erb ADDED Viewed

@@ -0,0 +1,16 @@
+<%= pb_rails("passphrase", props: {
+  input_props: {
+    disabled: true,
+    id: "my-disabled-passphrase",
+    name: "my-disabled-field",
+  },
+  label: "Input props passed directly to input kit"
+}) %>
+<%= pb_rails("passphrase", props: {
+  input_props: {
+    id: "my-custome-id",
+    name: "my-value-name",
+  },
+  label: "Set name, id, etc for use in forms"
+}) %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.jsx ADDED Viewed

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import { Passphrase } from '../../'
+const PassphraseInputProps = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+  return (
+    <>
+      <div>
+        <Passphrase
+            inputProps={{
+              name: 'my-disabled-field',
+              id: 'my-value-id',
+              disabled: true,
+            }}
+            label="Pass props directly to input kit"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            inputProps={{
+              children: (
+                <input
+                    onChange={handleChange}
+                    type="password"
+                    value={input}
+                />),
+            }}
+            label="Custom input"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            inputProps={{ name: 'my-value-name', id: 'my-value-id' }}
+            label="Set name and ID for use in form libraries"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            confirmation
+            inputProps={{ name: 'my-value-confirmation-name', id: 'my-value-confirmation-id' }}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+export default PassphraseInputProps

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ `inputProps` is passed directly to an underlying Text Input kit. See the specific docs <a href="/kits/text_input/react" target="_blank">here</a> for more details.

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

@@ -0,0 +1,10 @@
+<%= pb_rails("passphrase", props: { label: "Default Settings"}) %>
+<%= pb_rails("passphrase", props: { label: "Min length = 5", min_length: 5}) %>
+<%= pb_rails("passphrase", props: { label: "Min length = 30", min_length: 30}) %>
+<%= pb_rails("passphrase", props: { average_threshold: 1, label: "Average Threshold = 1"}) %>
+<%= pb_rails("passphrase", props: { label: "Strong Threshold = 4", strong_threshold: 4}) %>

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import { Body, Passphrase, TextInput } from '../../'
+const PassphraseMeterSettings = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+  const [strength, setStrength] = useState(0)
+  const handleStrengthChange = (str) => setStrength(str)
+  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>
+        <br />
+        <TextInput
+            disabled
+            label="Calculated Strength"
+            readOnly
+            value={strength}
+        />
+        <Passphrase
+            label="Default settings"
+            onChange={handleChange}
+            onStrengthChange={handleStrengthChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Min length = 5"
+            minLength={5}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Min length = 30"
+            minLength={30}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            averageThreshold={1}
+            label="Average threshold = 1"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Strong Threshold = 4"
+            onChange={handleChange}
+            strongThreshold={4}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+export default PassphraseMeterSettings

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

@@ -0,0 +1,9 @@
+By default, the minimum length is 12 and the strength meter will show a strength of 1 if not met. Notice the bar won't change from red until the minimum is met
+Use the `minLength` prop to adjust.
+The meter also response to `averageThreshold` and `strongTreshold` props. `averageThresold` defaults to 2, and `strongThreshold` defaults to 3.
+This means that the bar will turn yellow when the strength of the passphrase is calculated to be 2 on a 0-4 scale, and green when 3.
+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.

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { Passphrase, TextInput } from '../../'
+const PassphraseStrengthChange = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+  const [strength, setStrength] = useState(0)
+  const handleStrengthChange = (str) => setStrength(str)
+  return (
+    <>
+      <div>
+        <Passphrase
+            label="Passphrase"
+            onChange={handleChange}
+            onStrengthChange={handleStrengthChange}
+            value={input}
+            {...props}
+        />
+        <TextInput
+            disabled
+            label="Passphrase Strength"
+            readOnly
+            value={strength}
+        />
+      </div>
+    </>
+  )
+}
+export default PassphraseStrengthChange

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md ADDED Viewed

@@ -0,0 +1,3 @@
+As the strength of the entered passphrase changes, the optional `onStrengthChange` callback is called with the new strength value. This exposes the calculated strength.
+Strength is calculated on a 0-4 scale by the <a href="https://github.com/dropbox/zxcvbn" target="_blank"> Zxcvbn package</a>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.html.erb ADDED Viewed

@@ -0,0 +1,26 @@
+<%= pb_rails("passphrase", props: {
+  label: "Pass an array of strings to the tips prop",
+  tips: ['And the info icon will appear.', 'Each string will be displayed as its own tip'],
+}) %>
+<%= pb_rails("passphrase", props: {
+  label: "Omit the prop to hide the icon"
+}) %>
+<%= pb_rails("passphrase", props: {
+  label: "Only show tips at small screen size",
+  show_tips_below: "sm",
+  tips: ['Make the password longer', 'Type more things', 'Use something else'],
+}) %>
+<%= pb_rails("passphrase", props: {
+  label: "Only show tips at medium screen size",
+  show_tips_below: "md",
+  tips: ['Make the password longer', 'Type more things', 'Use something else'],
+}) %>
+<%= pb_rails("passphrase", props: {
+  label: "Only show tips at large screen size",
+  show_tips_below: "lg",
+  tips: ['Make the password longer', 'Type more things', 'Use something else'],
+}) %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.jsx ADDED Viewed

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import { Passphrase } from '../../'
+const PassphraseTips = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+  return (
+    <>
+      <div>
+        <Passphrase
+            label="Pass an array of strings to the tips prop"
+            onChange={handleChange}
+            tips={['And the info icon will appear.', 'Each string will be displayed as its own tip']}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Omit the prop to hide the icon"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Only show tips at small screen size"
+            onChange={handleChange}
+            showTipsBelow="xs"
+            tips={['Make the password longer', 'Type more things', 'Use something else']}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Only show tips at medium screen size"
+            onChange={handleChange}
+            showTipsBelow="md"
+            tips={['Make the password longer', 'Type more things', 'Use something else']}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Only show tips at large screen size"
+            onChange={handleChange}
+            showTipsBelow="lg"
+            tips={['Make the password longer', 'Type more things', 'Use something else']}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+export default PassphraseTips

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ `showTipsBelow`(react) / `show_tips_below`(rails) takes 'xs', 'sm', 'md', 'lg', 'xl' and only show the tips below the given screen size. Similar to the <a href="/kits/table/react" target="_blank">responsive table breakpoints.</a> Omit this prop to always show.