playbook_ui_docs 12.27.0.pre.alpha.expandednotworking853 → 12.28.0.pre.alpha.PLAY814removemomentjs871
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx +26 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx +30 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.html.erb +11 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.jsx +36 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.md +19 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_selectable_card_icon/docs/index.js +1 -0
- data/dist/playbook-doc.js +9 -286
- metadata +9 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 83402394f37e6b33829033f8f5edd82dddcec67b886b322c74930c9924a69d3d
|
|
4
|
+
data.tar.gz: ea171d5457ccab6d5c7147dd8a6a4bdc3091840fe90a212848ae39d81689be7e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: '093c98503af57e3e6340908a786661007a5c7477e78b345566bf41900e15387b3cb9976a917219be322065056b3fb588b4653806ea0bafb949d4ab1c29d8ecff'
|
|
7
|
+
data.tar.gz: 8e8147c6d34606c04da7d6f14ac64133e8821f02189a052a216e95ef947e9b45eb1a348d9eaad922b5c96adbba2fe27cac9124554ca41702d2b8949b20284955
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react'
|
|
2
|
+
import { Body, PhoneNumberInput } from '../..'
|
|
3
|
+
|
|
4
|
+
const PhoneNumberInputAccessInputElement = (props) => {
|
|
5
|
+
// 1. Create a ref - this accesses the kit's input element.
|
|
6
|
+
const ref = useRef()
|
|
7
|
+
|
|
8
|
+
// 2. Add any event listener to ref.current.inputNode() inside a useEffect hook and trigger it once.
|
|
9
|
+
useEffect(() => {
|
|
10
|
+
ref.current.inputNode().addEventListener("click", () => alert("Clicked!"))
|
|
11
|
+
}, [])
|
|
12
|
+
|
|
13
|
+
// 3. Pass the ref to the ref prop.
|
|
14
|
+
return (
|
|
15
|
+
<>
|
|
16
|
+
<Body text="Click the input field below:" />
|
|
17
|
+
<PhoneNumberInput
|
|
18
|
+
id="access-input-element"
|
|
19
|
+
ref={ref}
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
</>
|
|
23
|
+
)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export default PhoneNumberInputAccessInputElement
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
To access the kit's input element attributes or add event listeners, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.inputNode()` with your desired attribute or event listener inside a `useEffect` hook. `useEffect` is necessary because the `ref` will be initially `undefined`. Calling `useEffect` with an empty dependency array ensures your event listeners won't be added twice.
|
|
2
|
+
|
|
3
|
+
`inputNode()` is a custom function inside the kit that returns the input DOM element and its attributes. For example, to get the `name` attribute, use `ref.current.inputNode().name`
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React, { useRef } from 'react'
|
|
2
|
+
import { Button, PhoneNumberInput } from '../..'
|
|
3
|
+
|
|
4
|
+
const PhoneNumberInputClearField = (props) => {
|
|
5
|
+
// 1. Create a ref - this accesses the kit's input element.
|
|
6
|
+
const ref = useRef()
|
|
7
|
+
|
|
8
|
+
// 2. Use clearField() to clear the field.
|
|
9
|
+
const handleClick = () => {
|
|
10
|
+
ref.current.clearField()
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// 3. Pass the ref to the ref prop.
|
|
14
|
+
return (
|
|
15
|
+
<>
|
|
16
|
+
<PhoneNumberInput
|
|
17
|
+
id="clear-field"
|
|
18
|
+
ref={ref}
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
<Button
|
|
23
|
+
onClick={handleClick}
|
|
24
|
+
text="Clear the Input Field"
|
|
25
|
+
/>
|
|
26
|
+
</>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export default PhoneNumberInputClearField
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
To clear a number inside the input element, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.clearField()`.
|
|
2
|
+
|
|
3
|
+
`clearField()` is a custom function inside the kit to clear numbers and the error message while still providing validation.
|
|
@@ -6,6 +6,8 @@ examples:
|
|
|
6
6
|
- phone_number_input_initial_country: Initial Country
|
|
7
7
|
- phone_number_input_only_countries: Limited Countries
|
|
8
8
|
- phone_number_input_validation: Form Validation
|
|
9
|
+
- phone_number_input_clear_field: Clearing the Input Field
|
|
10
|
+
- phone_number_input_access_input_element: Accessing the Input Element
|
|
9
11
|
|
|
10
12
|
rails:
|
|
11
13
|
- phone_number_input_default: Default
|
|
@@ -3,3 +3,5 @@ export { default as PhoneNumberInputPreferredCountries } from './_phone_number_i
|
|
|
3
3
|
export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
|
|
4
4
|
export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
|
|
5
5
|
export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
|
|
6
|
+
export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
|
|
7
|
+
export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<div class="pb--doc-demo-row">
|
|
2
|
+
<% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
|
|
3
|
+
|
|
4
|
+
<%= pb_rails("selectable_card_icon", props: {
|
|
5
|
+
custom_icon: svg_url,
|
|
6
|
+
title_text: "Customization",
|
|
7
|
+
body_text: "Personalize everything",
|
|
8
|
+
input_id: 1,
|
|
9
|
+
checked: true,
|
|
10
|
+
}) %>
|
|
11
|
+
</div>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import SelectableCardIcon from '../_selectable_card_icon'
|
|
3
|
+
|
|
4
|
+
const svg = {
|
|
5
|
+
newChat: (
|
|
6
|
+
<svg
|
|
7
|
+
ariaHidden="true"
|
|
8
|
+
focusable="false"
|
|
9
|
+
role="img"
|
|
10
|
+
viewBox="0 0 512 512"
|
|
11
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
12
|
+
>
|
|
13
|
+
<path
|
|
14
|
+
d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
|
|
15
|
+
fill="currentColor"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
),
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const SelectableCardIconCustom = (props) => {
|
|
22
|
+
return (
|
|
23
|
+
<div className="pb--doc-demo-row">
|
|
24
|
+
<SelectableCardIcon
|
|
25
|
+
bodyText="Talk to someone you love"
|
|
26
|
+
checked
|
|
27
|
+
customIcon={svg.newChat}
|
|
28
|
+
inputId={1}
|
|
29
|
+
titleText="New Chat"
|
|
30
|
+
{...props}
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export default SelectableCardIconCustom
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# Tips for Custom Icons
|
|
2
|
+
|
|
3
|
+
When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
|
|
4
|
+
|
|
5
|
+
Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
|
|
6
|
+
|
|
7
|
+
Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
|
|
8
|
+
|
|
9
|
+
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
|
|
10
|
+
|
|
11
|
+
You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
|
|
12
|
+
|
|
13
|
+
### React
|
|
14
|
+
|
|
15
|
+
So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
|
|
16
|
+
|
|
17
|
+
### Rails
|
|
18
|
+
|
|
19
|
+
Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
|
|
@@ -5,10 +5,10 @@ examples:
|
|
|
5
5
|
- selectable_card_icon_checkmark: Checkmark
|
|
6
6
|
- selectable_card_icon_single_select: Single Select
|
|
7
7
|
- selectable_card_icon_options: With Options
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
- selectable_card_icon_custom: Custom Icon
|
|
10
9
|
|
|
11
10
|
react:
|
|
12
11
|
- selectable_card_icon_default: Default
|
|
13
12
|
- selectable_card_icon_checkmark: Checkmark
|
|
14
13
|
- selectable_card_icon_single_select: Single Select
|
|
14
|
+
- selectable_card_icon_custom: Custom Icon
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { default as SelectableCardIconDefault } from './_selectable_card_icon_default.jsx'
|
|
2
2
|
export { default as SelectableCardIconCheckmark } from './_selectable_card_icon_checkmark.jsx'
|
|
3
3
|
export { default as SelectableCardIconSingleSelect } from './_selectable_card_icon_single_select.jsx'
|
|
4
|
+
export { default as SelectableCardIconCustom } from './_selectable_card_icon_custom.jsx'
|