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

Sign up to get free protection for your applications and to get access to all the features.
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