playbook_ui_docs 12.37.0.pre.alpha.PLAY951collapsiblenav31062 → 12.37.0.pre.alpha.PLAY951collapsiblenav31073

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +2 -2
  3. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +29 -5
  4. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +2 -2
  5. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +5 -5
  6. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +8 -2
  7. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +3 -2
  8. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +3 -3
  9. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx +12 -5
  10. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -1
  11. data/dist/playbook-doc.js +10 -15
  12. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0be5520fa28bfc41a99c493eb7dd8685b34536124de75e0e6384bad94a052819
4
- data.tar.gz: 127d7fcbbe8660549e07bced2edba82786174b291d3999b454149a5135cc5a29
3
+ metadata.gz: 3b824331ed5a370e96bb561a06cc20c36f2004c420fdeca6ede89d6ee4dda65e
4
+ data.tar.gz: 722ced6545e16a2b487aa0fc033e6ac3208cef3227dcc6a64457f18427e3f30e
5
5
  SHA512:
6
- metadata.gz: d7596c47d39fac8af0476254757fd363f18d2a96922e3da3f2d4d214f03ffba449df97870ed29d30215a1527114b16150b7d14a21541e5f9b3ad147af930c847
7
- data.tar.gz: 9315e4ab92780fe5aba4ad99272ba112060b47fb05e2cb789c91e28e8dc55f38d5b4bac94e7545489a44f62e39a844c0d5ffb9d72d0405a1d776c30ff01142ae
6
+ metadata.gz: 54eeb7ed889f36d359c095005222c2bc2e3e02cff923fe7abf6cdb9959004b3a90d58dcb414dc68d1b730149e1449b155c1545f815b17c0701f89ed34ab9f18e
7
+ data.tar.gz: f55084413df2c32b511ca7ae4a56c7513e8b951bb4077efc297cba34b256f7f270e774176bc70c822b7002b933a7fe827b58062b03f6d60131b416507e121bbb
data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx CHANGED
@@ -7,7 +7,7 @@ const DateAlignment = (props) => {
7
7
  <FormattedDate
8
8
  dayOfWeek
9
9
  icon
10
- value="1995-12-25"
10
+ value={new Date('25 Dec 1995')}
11
11
  {...props}
12
12
  />
13
13
 
@@ -17,7 +17,7 @@ const DateAlignment = (props) => {
17
17
  alignment="center"
18
18
  dayOfWeek
19
19
  icon
20
- value="2020-12-25"
20
+ value={new Date('25 Dec 2020')}
21
21
  {...props}
22
22
  />
23
23
 
data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Date as FormattedDate } from '../../'
2
+ import { Date as FormattedDate, Caption, Title } from '../../'
3
3
 
4
4
  const DateDefault = (props) => {
5
5
  return (
@@ -12,9 +12,20 @@ const DateDefault = (props) => {
12
12
 
13
13
  <br />
14
14
 
15
+ <div style={{display: "flex", columnGap: 4}}>
16
+ <FormattedDate
17
+ size="sm"
18
+ value={"2012-08-03"}
19
+ {...props}
20
+ />
21
+ <Caption>{"(Hyphenated Date)"}</Caption>
22
+ </div>
23
+
24
+ <br />
25
+
15
26
  <FormattedDate
16
27
  size="sm"
17
- value="2012-08-03"
28
+ value={new Date('03 Aug 2012')}
18
29
  {...props}
19
30
  />
20
31
 
@@ -23,7 +34,7 @@ const DateDefault = (props) => {
23
34
  <FormattedDate
24
35
  showDayOfWeek
25
36
  size="sm"
26
- value="2017-12-03"
37
+ value={new Date('03 Dec 2017')}
27
38
  {...props}
28
39
  />
29
40
 
@@ -37,8 +48,21 @@ const DateDefault = (props) => {
37
48
 
38
49
  <br />
39
50
 
51
+ <div style={{display: "flex", columnGap: 4}}>
52
+ <FormattedDate
53
+ value={"2012-08-03"}
54
+ {...props}
55
+ />
56
+ <Title
57
+ size={4}
58
+ text={"(Hyphenated Date)"}
59
+ />
60
+ </div>
61
+
62
+ <br />
63
+
40
64
  <FormattedDate
41
- value="2012-08-03"
65
+ value={new Date('03 Aug 2012')}
42
66
  {...props}
43
67
  />
44
68
 
@@ -46,7 +70,7 @@ const DateDefault = (props) => {
46
70
 
47
71
  <FormattedDate
48
72
  showDayOfWeek
49
- value="2017-12-03"
73
+ value={new Date('03 Dec 2017')}
50
74
  {...props}
51
75
  />
52
76
  </>
data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx CHANGED
@@ -21,7 +21,7 @@ const DateUnstyled = (props) => {
21
21
  <Title size={1}>
22
22
  <FormattedDate
23
23
  unstyled
24
- value="1995-12-25"
24
+ value={new Date('25 Dec 1995')}
25
25
  {...props}
26
26
  />
27
27
  </Title>
@@ -36,7 +36,7 @@ const DateUnstyled = (props) => {
36
36
  showDayOfWeek
37
37
  showIcon
38
38
  unstyled
39
- value="1995-12-25"
39
+ value={new Date('25 Dec 1995')}
40
40
  {...props}
41
41
  />
42
42
  </Caption>
data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx CHANGED
@@ -7,7 +7,7 @@ const DateVariants = (props) => {
7
7
  <FormattedDate
8
8
  showIcon
9
9
  size="sm"
10
- value="1995-12-25"
10
+ value={new Date('25 Dec 1995')}
11
11
  {...props}
12
12
  />
13
13
 
@@ -15,7 +15,7 @@ const DateVariants = (props) => {
15
15
  <br />
16
16
 
17
17
  <FormattedDate
18
- value="1995-12-25"
18
+ value={new Date('25 Dec 1995')}
19
19
  {...props}
20
20
  />
21
21
 
@@ -24,7 +24,7 @@ const DateVariants = (props) => {
24
24
 
25
25
  <FormattedDate
26
26
  showIcon
27
- value="1995-12-25"
27
+ value={new Date('25 Dec 1995')}
28
28
  {...props}
29
29
  />
30
30
 
@@ -33,7 +33,7 @@ const DateVariants = (props) => {
33
33
 
34
34
  <FormattedDate
35
35
  showDayOfWeek
36
- value="1995-12-25"
36
+ value={new Date('25 Dec 1995')}
37
37
  {...props}
38
38
  />
39
39
 
@@ -43,7 +43,7 @@ const DateVariants = (props) => {
43
43
  <FormattedDate
44
44
  showDayOfWeek
45
45
  showIcon
46
- value="1995-12-25"
46
+ value={new Date('25 Dec 1995')}
47
47
  {...props}
48
48
  />
49
49
  </div>
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx CHANGED
@@ -3,9 +3,12 @@ import { Nav, NavItem } from '../..'
3
3
 
4
4
  const CollapsibleNav = (props) => {
5
5
  return (
6
- <Nav variant="subtle">
6
+ <Nav>
7
7
  <NavItem
8
+ active
8
9
  collapsible
10
+ collapsibleTrail
11
+ fontWeight="bold"
9
12
  iconLeft="city"
10
13
  iconRight={["plus", "minus"]}
11
14
  link="#"
@@ -29,8 +32,9 @@ const CollapsibleNav = (props) => {
29
32
  />
30
33
  </NavItem>
31
34
  <NavItem
32
- active
33
35
  collapsible
36
+ collapsibleTrail
37
+ // fontWeight="bold"
34
38
  iconLeft="theater-masks"
35
39
  iconRight={["plus", "minus"]}
36
40
  link="#"
@@ -55,6 +59,8 @@ const CollapsibleNav = (props) => {
55
59
  </NavItem>
56
60
  <NavItem
57
61
  collapsible
62
+ collapsibleTrail
63
+ // fontWeight="bold"
58
64
  iconLeft="city"
59
65
  iconRight={["plus", "minus"]}
60
66
  link="#"
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx CHANGED
@@ -18,14 +18,15 @@ const CollapsibleNavCustom = (props) => {
18
18
 
19
19
  return (
20
20
  <>
21
- <Nav variant='subtle'>
21
+ <Nav variant='bold'>
22
22
  {navItems.map((text, index) => {
23
23
  const [collapsed] = collapsibles[index]
24
24
  return (
25
25
  <NavItem
26
26
  collapsed={collapsed}
27
27
  collapsible
28
- emphasized
28
+ collapsibleTrail
29
+ fontWeight="bold"
29
30
  iconLeft="chevron-down"
30
31
  id={`collapsible-nav-item-${index + 1}`}
31
32
  key={index}
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb CHANGED
@@ -1,19 +1,19 @@
1
1
  <%= pb_rails("nav", props: { variant: "subtle" }) do %>
2
- <%= pb_rails("nav/item", props: { text: "Overview", link: "#", emphasized: true, collapsible: true, icon_left:"city" }) do %>
2
+ <%= pb_rails("nav/item", props: { text: "Overview", link: "#", font_weight:"bold", font_size:"small", collapsible: true, icon_left:"city" }) do %>
3
3
  <%= pb_rails("nav", props: { variant: "subtle" }) do %>
4
4
  <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
5
5
  <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
6
6
  <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
7
7
  <% end %>
8
8
  <% end %>
9
- <%= pb_rails("nav/item", props: { text: "Albums", link: "#", emphasized: true, collapsible: true, icon_left: "theater-masks" }) do %>
9
+ <%= pb_rails("nav/item", props: { text: "Albums", link: "#", font_weight:"bold", font_size:"small", collapsible: true, icon_left: "theater-masks" }) do %>
10
10
  <%= pb_rails("nav", props: { variant: "subtle" }) do %>
11
11
  <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
12
12
  <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
13
13
  <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
14
14
  <% end %>
15
15
  <% end %>
16
- <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", emphasized: true, collapsible: true, icon_left: "city" }) do %>
16
+ <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", font_weight:"bold", font_size:"small", collapsible: true, icon_left: "city" }) do %>
17
17
  <%= pb_rails("nav", props: { variant: "subtle" }) do %>
18
18
  <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
19
19
  <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.jsx CHANGED
@@ -3,10 +3,13 @@ import { Nav, NavItem } from '../..'
3
3
 
4
4
  const CollapsibleNavEmphasize = (props) => {
5
5
  return (
6
- <Nav variant="subtle">
6
+ <Nav variant="bold">
7
7
  <NavItem
8
- collapsible
9
- emphasized
8
+ active
9
+ collapsible
10
+ collapsibleTrail
11
+ fontSize="small"
12
+ fontWeight="bold"
10
13
  iconLeft="city"
11
14
  iconRight={["plus", "minus"]}
12
15
  link="#"
@@ -31,7 +34,9 @@ const CollapsibleNavEmphasize = (props) => {
31
34
  </NavItem>
32
35
  <NavItem
33
36
  collapsible
34
- emphasized
37
+ collapsibleTrail
38
+ fontSize="small"
39
+ fontWeight="bold"
35
40
  iconLeft="theater-masks"
36
41
  iconRight={["plus", "minus"]}
37
42
  link="#"
@@ -56,7 +61,9 @@ const CollapsibleNavEmphasize = (props) => {
56
61
  </NavItem>
57
62
  <NavItem
58
63
  collapsible
59
- emphasized
64
+ collapsibleTrail
65
+ fontSize="small"
66
+ fontWeight="bold"
60
67
  iconLeft="city"
61
68
  iconRight={["plus", "minus"]}
62
69
  link="#"
data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md CHANGED
@@ -1 +1 @@
1
- The `emphasized` prop can be passed to NavItem for a more emphasized look for the collapsible Nav.
1
+ The ` navBold` prop can be passed to NavItem