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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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