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

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

@@ -0,0 +1,112 @@
+import React, { useState } from 'react'
+import { useEffect } from 'react'
+
+import { Caption, Passphrase, ProgressSimple, TextInput} from '../..'
+import zxcvbn from 'zxcvbn'
+
+const PassphraseStrengthChange = (props) => {
+  const [input, setInput] = useState('')
+  const [checkStrength, setCheckStrength] = useState({
+    label: '',
+    percent: 0,
+    score: 0,
+    variant: ''
+  })
+
+  const handleChange = (e) => setInput(e.target.value)
+
+  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 result = handleStrengthCalculation({ passphrase: input })
+     setCheckStrength({...result})
+    },[input])
+
+  return (
+    <>
+      <Passphrase
+          label="Passphrase"
+          onChange={handleChange}
+          value={input}
+          {...props}
+      /> 
+      {input.length > 0 && (
+        <>
+          <ProgressSimple
+              percent={checkStrength.percent}
+              variant={checkStrength.variant}
+          />
+          <Caption size='xs'
+              text={checkStrength.label} 
+          />
+        </>
+      )}
+      <TextInput
+          disabled
+          label="Passphrase Strength"
+          marginTop="xl"
+          readOnly
+          value={checkStrength.score}
+      />
+    </>
+  )
+}
+
+export default PassphraseStrengthChange

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

@@ -0,0 +1,7 @@
+Strength is calculated on a 0-4 scale by the <a href="https://github.com/dropbox/zxcvbn" target="_blank"> Zxcvbn package</a>. 
+
+<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_tips.html.erb

@@ -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

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+
+import Passphrase from '../_passphrase'
+
+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

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

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

@@ -0,0 +1,21 @@
+examples:
+
+  rails:
+  - passphrase_default: Default
+  - passphrase_confirmation: Confirmation
+  - passphrase_meter_settings: Meter Settings
+  - passphrase_input_props: Input Props
+  - passphrase_tips: Tips
+  - passphrase_strength_change: Strength Change
+  - passphrase_common: Common Passphrases
+  - passphrase_breached: Breached Passphrases
+
+  react:
+  - passphrase_default: Default
+  - passphrase_confirmation: Confirmation
+  - passphrase_meter_settings: Meter Settings
+  - passphrase_input_props: Input Props
+  - passphrase_tips: Tips
+  - passphrase_strength_change: Strength Change
+  - passphrase_common: Common Passphrases
+  - passphrase_breached: Breached Passphrases

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

@@ -0,0 +1,8 @@
+export { default as PassphraseDefault } from './_passphrase_default.jsx'
+export { default as PassphraseConfirmation } from './_passphrase_confirmation.jsx'
+export { default as PassphraseMeterSettings } from './_passphrase_meter_settings'
+export { default as PassphraseInputProps } from './_passphrase_input_props'
+export { default as PassphraseTips } from './_passphrase_tips'
+export { default as PassphraseStrengthChange } from './_passphrase_strength_change'
+export { default as PassphraseCommon } from './_passphrase_common'
+export { default as PassphraseBreached } from './_passphrase_breached'

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

@@ -0,0 +1 @@
+This kit is broken down into a first name last name format with normal and bold weighted text.

data/app/pb_kits/playbook/pb_person/docs/_footer.md

@@ -0,0 +1,3 @@
+## Things To Avoid
+• Avoid using this kit just for it’s design, it should only be used for displaying people names ONLY.
+• Do not change the style and format. Keep the colors true to the original kit.

data/app/pb_kits/playbook/pb_person/docs/_person_default.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("person", 
+    props: { 
+      first_name: "Kyle", 
+      last_name: "Fadigan" 
+      }) %>

data/app/pb_kits/playbook/pb_person/docs/_person_default.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import Person from '../_person'
+
+const PersonDefault = (props) => {
+  return (
+    <Person
+        firstName="Kyle"
+        lastName="Fadigan"
+        {...props}
+    />
+  )
+}
+
+export default PersonDefault

data/app/pb_kits/playbook/pb_person/docs/_person_default.md

@@ -0,0 +1 @@
+Use this kit to display users, homeowners, or person of contact.

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - person_default: Default
+  
+  
+  react:
+  - person_default: Default
+  

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

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

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

@@ -0,0 +1 @@
+This kit can be used to display a person contact information. It includes multiples kits like: Person,  contact and caption kit. Use this kit for both Nitro users and Homeowners.

data/app/pb_kits/playbook/pb_person_contact/docs/_footer.md

@@ -0,0 +1,3 @@
+## Thing To Avoid
+• Don’t unstack the contacts: email & phone.
+• Keep the fonts exact in size and weight, don’t change the color variations.

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.html.erb

@@ -0,0 +1,17 @@
+<%= pb_rails("person_contact", props: {
+  first_name: "Pauline",
+  last_name: "Smith",
+  contacts: [
+    {
+      contact_type: "email",
+      contact_value: "email@example.com"
+    },
+    {
+      contact_value: 5555555555
+    },
+    {
+      contact_type: "work",
+      contact_value: "3245627482"
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import PersonContact from '../_person_contact'
+
+const PersonContactDefault = (props) => {
+  return (
+    <div>
+      <PersonContact
+          contacts={[
+          {
+            contactType: 'email',
+            contactValue: 'email@example.com',
+          },
+          {
+            contactValue: '5555555555',
+          },
+          {
+            contactType: 'work',
+            contactValue: '3245627482',
+          },
+        ]}
+          firstName="Pauline"
+          lastName="Smith"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PersonContactDefault

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_multiple.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("person_contact", props: {
+  first_name: "Harvey",
+  last_name: "Walters",
+  contacts: [
+    {
+      contact_type: "email",
+      contact_value: "email@example.com"
+    },
+    {
+      contact_value: 5555555555,
+    },
+    {
+      contact_type: "work",
+      contact_value: "3245627482"
+    }
+  ]
+}) %>
+
+<%= pb_rails("person_contact", props: {
+  first_name: "Brenda",
+  last_name: "Walters",
+  contacts: [
+    {
+      contact_value: 5555555555,
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_multiple.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import PersonContact from '../_person_contact'
+
+const PersonContactMultiple = (props) => {
+  return (
+    <div>
+      <PersonContact
+          contacts={[
+          {
+            contactType: 'email',
+            contactValue: 'email@example.com',
+          },
+          {
+            contactValue: '5555555555',
+          },
+          {
+            contactType: 'work',
+            contactValue: '3245627482',
+          },
+        ]}
+          firstName="Harvey"
+          lastName="Walters"
+          {...props}
+      />
+      <PersonContact
+          contacts={[
+          {
+            contactValue: '5555555555',
+          },
+        ]}
+          firstName="Brenda"
+          lastName="Walters"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PersonContactMultiple

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("person_contact", props: {
+  first_name: "Harvey",
+  last_name: "Walters",
+  contacts: [
+    {
+      contact_type: "email",
+      contact_value: "email@example.com"
+    },
+    {
+      contact_value: 5555555555,
+      contact_detail: "Home"
+    },
+    {
+      contact_type: "work",
+      contact_value: "3245627482",
+      contact_detail: "Work"
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import PersonContact from '../_person_contact'
+
+const PersonContactWithDetail = (props) => {
+  return (
+    <div>
+      <PersonContact
+          contacts={[
+          {
+            contactType: 'email',
+            contactValue: 'email@example.com',
+          },
+          {
+            contactValue: '5555555555',
+            contactDetail: 'Home',
+          },
+          {
+            contactType: 'work',
+            contactValue: '3245627482',
+            contactDetail: 'Work',
+          },
+        ]}
+          firstName="Harvey"
+          lastName="Walters"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default PersonContactWithDetail

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("person_contact", props: {
+  first_name: "Pauline",
+  last_name: "Smith",
+  contacts: [
+    {
+      contact_type: "email",
+      contact_value: "email@example.com",
+    },
+    {
+      contact_value: 5555555555
+    },
+    {
+      contact_type: "wrong-phone",
+      contact_value: "3245627482",
+    },
+    {
+      contact_type: "phone",
+      contact_value: "3048615385",
+    },
+  ]
+}) %>

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import PersonContact from '../_person_contact'
+
+const PersonContactWithWrongNumbers = (props) => {
+  return (
+    <>
+      <PersonContact
+          contacts={[
+            {
+              contactType: 'email',
+              contactValue: 'email@example.com',
+            },
+            {
+              contactValue: '5555555555',
+            },
+            {
+              contactType: 'wrong-phone',
+              contactValue: '3245627482',
+            },
+            {
+              contactType: 'phone',
+              contactValue: '3048615385',
+            },
+          ]}
+          firstName="Pauline"
+          key="person-contact-1"
+          lastName="Smith"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default PersonContactWithWrongNumbers

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

@@ -0,0 +1,14 @@
+examples:
+
+  rails:
+  - person_contact_default: Default
+  - person_contact_multiple: Multiple People
+  - person_contact_with_detail: With Detail
+  - person_contact_with_wrong_numbers: With Wrong Numbers
+
+  react:
+  - person_contact_default: Default
+  - person_contact_multiple: Multiple People
+  - person_contact_with_detail: With Detail
+  - person_contact_with_wrong_numbers: With Wrong Numbers
+

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

@@ -0,0 +1,4 @@
+export { default as PersonContactDefault } from './_person_contact_default.jsx'
+export { default as PersonContactMultiple } from './_person_contact_multiple.jsx'
+export { default as PersonContactWithDetail } from './_person_contact_with_detail.jsx'
+export { default as PersonContactWithWrongNumbers } from './_person_contact_with_wrong_numbers.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("phone_number_input", props: {
+    id: "hello"
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { PhoneNumberInput } from '../../'
+
+const PhoneNumberInputDefault = (props) => (
+    <>
+        <PhoneNumberInput
+            id='default'
+            {...props} />
+    </>
+)
+
+export default PhoneNumberInputDefault

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md

@@ -0,0 +1 @@
+NOTE: Error state is handled by default, validating length (too long or too short) relative to the selected country’s phone format and enforcing numeric-only values for all countries.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: "br"
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { PhoneNumberInput } from '../../'
+
+const PhoneNumberInitialCountry = (props) => (
+    <>
+        <PhoneNumberInput
+            id='initial'
+            initialCountry='br'
+            {...props}
+        />
+    </>
+)
+
+export default PhoneNumberInitialCountry

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md

@@ -0,0 +1 @@
+Setting an initial country preselects that country within the input as well as the country dropdown.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: "br",
+    only_countries: ['us', 'br']
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { PhoneNumberInput } from '../../'
+
+const PhoneNumberInputOnlyCountries = (props) => (
+  <>
+    <PhoneNumberInput
+        id='only'
+        onlyCountries={['us', 'br']}
+        {...props} 
+    />
+  </>
+)
+
+export default PhoneNumberInputOnlyCountries

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.md

@@ -0,0 +1 @@
+Limiting countries removes all countries from the dropdown except your selections.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: "br",
+    preferred_countries: ['us', 'br', 'ph', 'gb']
+}) %>  

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { PhoneNumberInput } from '../../'
+
+const PhoneNumberInputPreferredCountries = (props) => (
+  <>
+    <PhoneNumberInput
+        id='preferred'
+        preferredCountries={['us', 'br', 'ph', 'gb']}
+        {...props} 
+    />
+  </>
+)
+
+export default PhoneNumberInputPreferredCountries

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md

@@ -0,0 +1 @@
+Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.

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

@@ -0,0 +1,13 @@
+examples:
+
+  react:
+  - phone_number_input_default: Default
+  - phone_number_input_preferred_countries: Preferred Countries
+  - phone_number_input_initial_country: Initial Country
+  - phone_number_input_only_countries: Limited Countries
+
+  rails:
+  - phone_number_input_default: Default
+  - phone_number_input_preferred_countries: Preferred Countries
+  - phone_number_input_initial_country: Initial Country
+  - phone_number_input_only_countries: Limited Countries

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

@@ -0,0 +1,4 @@
+export { default as PhoneNumberInputDefault } from './_phone_number_input_default'
+export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
+export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
+export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'