playbook_ui_docs 14.6.2.pre.alpha.PLAY1607dependencydisplayymlupdate4271 → 14.6.2.pre.alpha.PLAY15814348

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b2f5991b5df46c27e422607e977169298720ef5bbed4fc88d2a59a2d0b8f2cb3
4
- data.tar.gz: 4ba042f669f89522ca24409de72bc40d18c5a645f603e831f434814118ed1e62
3
+ metadata.gz: ae22d798e0f1be8ba540d96ba7cfcf9ba02bb6fa118824a790c8ec74606bf03b
4
+ data.tar.gz: 8c13f486768c53544d4fcb5fd9d84534cb52bc3519c6b89305f8f8a20c67cd79
5
5
  SHA512:
6
- metadata.gz: b4baaf451ab312df4f5f39a4cdbc478e07c48d3c4eb83ce5ba516224b56f46929f3e95de359ff6508efdfa2e48658a5fcced192b221684e1065e6db2a93aa1f2
7
- data.tar.gz: a6d1a834a075a0cf11de9b58e07df08c0d6f79d499b9433994b827c8777d529f1d8d471202d54de870fc0154119a7bfbc939ba2c48bb56028751a158fe09ec40
6
+ metadata.gz: b8ab318d62a3615d3e75d4c2fa01f6f962db30b97af9a24451407fa2fbf5fedd5cdf1ef1d95e42aa5f36896418da63ba7b76f52937a24b159336f567ef5e612f
7
+ data.tar.gz: 141120ab4a900cd21898fddbece7c8f4ea8bb7cafb9656e249725a6193e6791d9595d89c2dbc0dc424837016e11a12836c6b72d9355ad8601c7aabca9e836db4
@@ -1,12 +1,26 @@
1
- import React from 'react'
2
- import Card from '../_card'
1
+ import React from "react"
2
+ import Card from "../_card"
3
3
 
4
4
  const CardLight = (props) => {
5
5
  return (
6
6
  <div>
7
- <Card {...props}>{'Card content'}</Card>
7
+ <Card
8
+ height="100%"
9
+ htmlOptions={{
10
+ style: {
11
+ width: "100%",
12
+ backgroundColor: "blue",
13
+ },
14
+ tabIndex: 7
15
+ }}
16
+ minHeight="189px"
17
+ {...props}
18
+ >
19
+ {"HELLO WORLD!!!"}
20
+ </Card>
8
21
  </div>
9
22
  )
10
23
  }
11
24
 
12
25
  export default CardLight
26
+
@@ -0,0 +1,7 @@
1
+ <%= pb_rails("currency", props: {
2
+ amount: '1234567.89',
3
+ comma_separator: true,
4
+ size: 'lg',
5
+ emphasized: false,
6
+ decimals: 'matching',
7
+ }) %>
@@ -0,0 +1,18 @@
1
+ import React from "react"
2
+
3
+ import Currency from "../_currency"
4
+
5
+ const CurrencyCommaSeparator = (props) => {
6
+ return (
7
+ <Currency
8
+ amount='1234567.89'
9
+ commaSeparator
10
+ decimals="matching"
11
+ emphasized={false}
12
+ size="lg"
13
+ {...props}
14
+ />
15
+ )
16
+ }
17
+
18
+ export default CurrencyCommaSeparator
@@ -0,0 +1,3 @@
1
+ The optional `commaSeparator` can be used to auto-format the use of commas as a thousands separator.
2
+
3
+ **NOTE:** If the value passed into the `amount` prop is already comma-dilineated, it will not add additional commas.
@@ -8,7 +8,8 @@ examples:
8
8
  - currency_abbreviated: Abbreviate Larger Amounts
9
9
  - currency_matching_decimals: Matching Decimals
10
10
  - currency_unstyled: Unstyled
11
-
11
+ - currency_comma_separator: Comma Separator
12
+
12
13
  react:
13
14
  - currency_variants: Variants
14
15
  - currency_size: Size
@@ -17,6 +18,7 @@ examples:
17
18
  - currency_abbreviated: Abbreviate Larger Amounts
18
19
  - currency_matching_decimals: Matching Decimals
19
20
  - currency_unstyled: Unstyled
21
+ - currency_comma_separator: Comma Separator
20
22
 
21
23
  swift:
22
24
  - currency_size_swift: Size
@@ -5,3 +5,4 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
5
5
  export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
6
6
  export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
7
7
  export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
8
+ export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
@@ -0,0 +1,30 @@
1
+ <div>
2
+ <%= pb_rails("link", props: {
3
+ text: "link example",
4
+ href: "https://www.google.com/search?q=playbook+design+system",
5
+ }) %>
6
+ </div>
7
+
8
+ <div>
9
+ <%= pb_rails("link", props: {
10
+ text: "link example",
11
+ href: "https://www.youtube.com/@PowerHRG",
12
+ color: "body",
13
+ }) %>
14
+ </div>
15
+
16
+ <div>
17
+ <%= pb_rails("link", props: {
18
+ text: "link example",
19
+ href: "https://github.com/powerhome/.github/blob/main/profile/README.md",
20
+ color: "muted",
21
+ }) %>
22
+ </div>
23
+
24
+ <div>
25
+ <%= pb_rails("link", props: {
26
+ text: "link example",
27
+ href: "https://rubygems.org/gems/playbook_ui/",
28
+ color: "destructive",
29
+ }) %>
30
+ </div>
@@ -0,0 +1,40 @@
1
+ import React from 'react'
2
+ import { Link } from 'playbook-ui'
3
+
4
+ const LinkColor = (props) => (
5
+ <div>
6
+ <div>
7
+ <Link
8
+ href="https://www.google.com/search?q=playbook+design+system"
9
+ text="link example"
10
+ {...props}
11
+ />
12
+ </div>
13
+ <div>
14
+ <Link
15
+ color="body"
16
+ href="https://www.youtube.com/@PowerHRG"
17
+ text="link example"
18
+ {...props}
19
+ />
20
+ </div>
21
+ <div>
22
+ <Link
23
+ color="muted"
24
+ href="https://github.com/powerhome/.github/blob/main/profile/README.md"
25
+ text="link example"
26
+ {...props}
27
+ />
28
+ </div>
29
+ <div>
30
+ <Link
31
+ color="destructive"
32
+ href="https://rubygems.org/gems/playbook_ui/"
33
+ text="link example"
34
+ {...props}
35
+ />
36
+ </div>
37
+ </div>
38
+ )
39
+
40
+ export default LinkColor
@@ -0,0 +1,5 @@
1
+ <%= pb_rails("link", props: {
2
+ text: "link example",
3
+ href: "#disabled",
4
+ disabled: true,
5
+ }) %>
@@ -0,0 +1,15 @@
1
+ import React from 'react'
2
+ import { Link } from 'playbook-ui'
3
+
4
+ const LinkDisabled = (props) => (
5
+ <div>
6
+ <Link
7
+ disabled
8
+ href="#disabled"
9
+ text="link example"
10
+ {...props}
11
+ />
12
+ </div>
13
+ )
14
+
15
+ export default LinkDisabled
@@ -0,0 +1,15 @@
1
+ <div>
2
+ <%= pb_rails("link", props: {
3
+ text: "link example",
4
+ href: "#icon",
5
+ icon: "arrow-up-right-from-square",
6
+ }) %>
7
+ </div>
8
+
9
+ <div>
10
+ <%= pb_rails("link", props: {
11
+ text: "link example",
12
+ href: "#icon2",
13
+ icon_right: "chevron-right",
14
+ }) %>
15
+ </div>
@@ -0,0 +1,25 @@
1
+ import React from 'react'
2
+ import { Link } from 'playbook-ui'
3
+
4
+ const LinkIcon = (props) => (
5
+ <div>
6
+ <div>
7
+ <Link
8
+ href="#icon"
9
+ icon="arrow-up-right-from-square"
10
+ text="link example"
11
+ {...props}
12
+ />
13
+ </div>
14
+ <div>
15
+ <Link
16
+ href="#icon2"
17
+ iconRight="chevron-right"
18
+ text="link example"
19
+ {...props}
20
+ />
21
+ </div>
22
+ </div>
23
+ )
24
+
25
+ export default LinkIcon
@@ -0,0 +1,35 @@
1
+ <%= pb_rails("link", props: {
2
+ text: "h1 link example",
3
+ href: "#tag",
4
+ icon: "arrow-up-right-from-square",
5
+ tag: "h1",
6
+ }) %>
7
+
8
+ <%= pb_rails("link", props: {
9
+ text: "h3 link example",
10
+ href: "#tag2",
11
+ tag: "h3",
12
+ underline: true,
13
+ }) %>
14
+
15
+ <%= pb_rails("link", props: {
16
+ color: "destructive",
17
+ text: "h6 link example",
18
+ href: "#tag3",
19
+ tag: "h6",
20
+ }) %>
21
+
22
+ <%= pb_rails("link", props: {
23
+ text: "p link example",
24
+ href: "#tag4",
25
+ icon_right: "chevron-right",
26
+ tag: "p",
27
+ }) %>
28
+
29
+ <div>
30
+ This is a <%= pb_rails("link", props: {
31
+ text: "span link example",
32
+ href: "#tag5",
33
+ tag: "span",
34
+ }) %>
35
+ </div>
@@ -0,0 +1,45 @@
1
+ import React from 'react'
2
+ import { Link } from 'playbook-ui'
3
+
4
+ const LinkTag = (props) => (
5
+ <div>
6
+ <Link
7
+ href="#tag"
8
+ icon="arrow-up-right-from-square"
9
+ tag="h1"
10
+ text="h1 link example"
11
+ {...props}
12
+ />
13
+ <Link
14
+ href="#tag2"
15
+ tag="h3"
16
+ text="h3 link example"
17
+ underline
18
+ {...props}
19
+ />
20
+ <Link
21
+ color="destructive"
22
+ href="#tag3"
23
+ tag="h6"
24
+ text="h6 link example"
25
+ {...props}
26
+ />
27
+ <Link
28
+ href="#tag4"
29
+ iconRight="chevron-right"
30
+ tag="p"
31
+ text="p link example"
32
+ {...props}
33
+ />
34
+ <div>
35
+ This is a <Link
36
+ href="#tag5"
37
+ tag="span"
38
+ text="span link example"
39
+ {...props}
40
+ />
41
+ </div>
42
+ </div>
43
+ )
44
+
45
+ export default LinkTag
@@ -0,0 +1,5 @@
1
+ <%= pb_rails("link", props: {
2
+ text: "link example",
3
+ href: "#underline",
4
+ underline: true,
5
+ }) %>
@@ -0,0 +1,15 @@
1
+ import React from 'react'
2
+ import { Link } from 'playbook-ui'
3
+
4
+ const LinkUnderline = (props) => (
5
+ <div>
6
+ <Link
7
+ href="#underline"
8
+ text="link example"
9
+ underline
10
+ {...props}
11
+ />
12
+ </div>
13
+ )
14
+
15
+ export default LinkUnderline
@@ -0,0 +1,16 @@
1
+ examples:
2
+
3
+ rails:
4
+ - link_color: Color
5
+ - link_underline: Underline
6
+ - link_icon: Icon
7
+ - link_disabled: Disabled
8
+ - link_tag: Tag
9
+
10
+
11
+ react:
12
+ - link_color: Color
13
+ - link_underline: Underline
14
+ - link_icon: Icon
15
+ - link_disabled: Disabled
16
+ - link_tag: Tag
@@ -0,0 +1,5 @@
1
+ export { default as LinkColor } from './_link_color.jsx'
2
+ export { default as LinkUnderline } from './_link_underline.jsx'
3
+ export { default as LinkIcon } from './_link_icon.jsx'
4
+ export { default as LinkDisabled } from './_link_disabled.jsx'
5
+ export { default as LinkTag } from './_link_tag.jsx'