playbook_ui_docs 13.27.0.pre.alpha.PLAY1250fixTextInpputaddonborderradiusformgroup2862 β†’ 13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896

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 (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +46 -66
  3. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +8 -29
  4. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +3 -0
  5. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +13 -33
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +48 -67
  7. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +3 -0
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +0 -20
  9. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  10. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +20 -0
  11. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +41 -1
  12. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  13. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  15. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  16. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  17. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +3 -3
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +3 -3
  19. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  20. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +3 -3
  21. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  22. data/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
  23. data/dist/playbook-doc.js +3 -3
  24. metadata +4 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 97a7217ca5537cc2e2ce18481fafa9968f5b88d202f7e80cf27a27a50ceba021
4
- data.tar.gz: 1bbd3203578b5f3ef7c4f83a6897c2cf5fbc2812c342726a954ea8c463f953db
3
+ metadata.gz: a0267f5484779fb07b6aba31bdfdd378d05df2060018512dfb695f0a7ee223c6
4
+ data.tar.gz: 50c001971aa8d1e96f8f4d3d364ba760742c9598a4d0534448b32e7effa880d0
5
5
  SHA512:
6
- metadata.gz: 522464cf888d3918ea10300c7f09ab271e2dfd8f8fd6c9ee14d88d6916575422f0eb4f460fa91770342b7496dd46847dbf2bbb6168d406bcba2096e33f5d10cc
7
- data.tar.gz: 324d4caefd75adccc9ab2588886c2646ffeb4d1c77158bf641c0e8f515aebfd38626784bd3821357493ea454f071d50ae5b3e3fd79a6405618d4f0df411e1bad
6
+ metadata.gz: 40872da1deea3551a90e8ad1be0adeeb732f1d4cc96789ad795900f2dc45b3e7946f15c1cf9101b73db327f6bf9656945972b99fb929084038c67dba674ac956
7
+ data.tar.gz: f46eae90558ab75dc1e2a7b4aed4ab76cf7512b7a5533e1a2ee8b0e3707dc30eed32f9ada05523c4ea038a0ce0404b9f81fb7f90bd88152af5fcb02628260fae
@@ -1,71 +1,51 @@
1
- <%= pb_rails("avatar", props: {
2
- component_overlay: {
3
- component: "badge",
4
- text: "12",
5
- placement: "top-left"
6
- },
7
- name: "Terry Johnson",
8
- size: "xxs",
9
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
- margin_bottom: "sm"
11
- }) %>
12
1
 
13
- <%= pb_rails("avatar", props: {
14
- component_overlay: {
15
- component: "badge",
16
- text: "12",
17
- placement: "top-right"
18
- },
19
- name: "Terry Johnson",
20
- size: "xs",
21
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
- margin_bottom: "sm"
23
- }) %>
2
+ <%= pb_rails("avatar", props: {
3
+ component_overlay: {
4
+ component: "badge",
5
+ text: "12",
6
+ placement: "bottom-right"
7
+ },
8
+ name: "Terry Johnson",
9
+ size: "sm",
10
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
11
+ margin_bottom: "sm"
12
+ }) %>
24
13
 
25
- <%= pb_rails("avatar", props: {
26
- component_overlay: {
27
- component: "badge",
28
- text: "12",
29
- placement: "bottom-right"
30
- },
31
- name: "Terry Johnson",
32
- size: "sm",
33
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
34
- margin_bottom: "sm"
35
- }) %>
14
+ <%= pb_rails("avatar", props: {
15
+ component_overlay: {
16
+ component: "badge",
17
+ text: "12",
18
+ placement: "top-left"
19
+ },
20
+ name: "Terry Johnson",
21
+ size: "md",
22
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
23
+ margin_bottom: "sm"
24
+ }) %>
36
25
 
37
- <%= pb_rails("avatar", props: {
38
- component_overlay: {
39
- component: "badge",
40
- text: "12",
41
- placement: "bottom-left"
42
- },
43
- name: "Terry Johnson",
44
- size: "md",
45
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
46
- margin_bottom: "sm"
47
- }) %>
26
+ <%= pb_rails("avatar", props: {
27
+ component_overlay: {
28
+ component: "badge",
29
+ text: "On Roadtrip",
30
+ placement: "top-center",
31
+ variant: "info"
32
+ },
33
+ name: "Terry Johnson",
34
+ size: "lg",
35
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
36
+ margin_bottom: "sm"
37
+ }) %>
48
38
 
49
- <%= pb_rails("avatar", props: {
50
- component_overlay: {
51
- component: "badge",
52
- text: "12",
53
- placement: "top-left"
54
- },
55
- name: "Terry Johnson",
56
- size: "lg",
57
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
58
- margin_bottom: "sm"
59
- }) %>
39
+ <%= pb_rails("avatar", props: {
40
+ component_overlay: {
41
+ component: "badge",
42
+ text: "Out of Office",
43
+ placement: "bottom-center",
44
+ variant: "error"
45
+ },
46
+ name: "Terry Johnson",
47
+ size: "xl",
48
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
49
+ margin_bottom: "sm"
50
+ }) %>
60
51
 
61
- <%= pb_rails("avatar", props: {
62
- component_overlay: {
63
- component: "badge",
64
- text: "12",
65
- placement: "top-right"
66
- },
67
- name: "Terry Johnson",
68
- size: "xl",
69
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
70
- margin_bottom: "sm"
71
- }) %>
@@ -4,28 +4,6 @@ import { Avatar } from '../..'
4
4
  const AvatarBadgeComponentOverlay = () => {
5
5
  return (
6
6
  <div>
7
- <Avatar
8
- componentOverlay={{
9
- component: "badge",
10
- placement: "top-left",
11
- text: "12"
12
- }}
13
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
- marginBottom="sm"
15
- size="xxs"
16
- />
17
-
18
- <Avatar
19
- componentOverlay={{
20
- component: "badge",
21
- placement: "top-right",
22
- text: "12"
23
- }}
24
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
- marginBottom="sm"
26
- size="xs"
27
- />
28
-
29
7
  <Avatar
30
8
  componentOverlay={{
31
9
  component: "badge",
@@ -40,7 +18,7 @@ const AvatarBadgeComponentOverlay = () => {
40
18
  <Avatar
41
19
  componentOverlay={{
42
20
  component: "badge",
43
- placement: "bottom-left",
21
+ placement: "top-left",
44
22
  text: "12"
45
23
  }}
46
24
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
@@ -51,8 +29,9 @@ const AvatarBadgeComponentOverlay = () => {
51
29
  <Avatar
52
30
  componentOverlay={{
53
31
  component: "badge",
54
- placement: "top-left",
55
- text: "12"
32
+ placement: "top-center",
33
+ text: "On Roadtip",
34
+ variant: "info"
56
35
  }}
57
36
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
58
37
  marginBottom="sm"
@@ -62,14 +41,14 @@ const AvatarBadgeComponentOverlay = () => {
62
41
  <Avatar
63
42
  componentOverlay={{
64
43
  component: "badge",
65
- placement: "top-right",
66
- text: "12"
44
+ placement: "bottom-center",
45
+ text: "Out of Office",
46
+ variant: "error"
67
47
  }}
68
48
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
69
49
  marginBottom="sm"
70
50
  size="xl"
71
- />
72
-
51
+ />
73
52
  </div>
74
53
  )
75
54
  }
@@ -0,0 +1,3 @@
1
+ NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
2
+
3
+ When passing the `badge` component as an overlay, you must also specify its text content,and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/badge#colors) as a `variant`.
@@ -1,32 +1,9 @@
1
- <%= pb_rails("avatar", props: {
2
- component_overlay: {
3
- component: "icon_circle",
4
- icon: "plus",
5
- placement: "top-left"
6
- },
7
- name: "Terry Johnson",
8
- size: "xxs",
9
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
- margin_bottom: "sm"
11
- }) %>
12
-
13
- <%= pb_rails("avatar", props: {
14
- component_overlay: {
15
- component: "icon_circle",
16
- icon: "plus",
17
- placement: "top-right"
18
- },
19
- name: "Terry Johnson",
20
- size: "xs",
21
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
- margin_bottom: "sm"
23
- }) %>
24
-
25
1
  <%= pb_rails("avatar", props: {
26
2
  component_overlay: {
27
3
  component: "icon_circle",
28
- icon: "plus",
29
- placement: "bottom-right"
4
+ icon: "shield",
5
+ placement: "bottom-right",
6
+ variant: "royal"
30
7
  },
31
8
  name: "Terry Johnson",
32
9
  size: "sm",
@@ -37,8 +14,9 @@
37
14
  <%= pb_rails("avatar", props: {
38
15
  component_overlay: {
39
16
  component: "icon_circle",
40
- icon: "plus",
41
- placement: "bottom-left"
17
+ icon: "check",
18
+ placement: "top-right",
19
+ variant: "green"
42
20
  },
43
21
  name: "Terry Johnson",
44
22
  size: "md",
@@ -49,8 +27,9 @@
49
27
  <%= pb_rails("avatar", props: {
50
28
  component_overlay: {
51
29
  component: "icon_circle",
52
- icon: "plus",
53
- placement: "top-left"
30
+ icon: "lock",
31
+ placement: "top-left",
32
+ variant: "red"
54
33
  },
55
34
  name: "Terry Johnson",
56
35
  size: "lg",
@@ -61,11 +40,12 @@
61
40
  <%= pb_rails("avatar", props: {
62
41
  component_overlay: {
63
42
  component: "icon_circle",
64
- icon: "plus",
65
- placement: "top-right"
43
+ icon: "star",
44
+ placement: "left-center",
45
+ variant: "yellow"
66
46
  },
67
47
  name: "Terry Johnson",
68
48
  size: "xl",
69
49
  image_url: "https://randomuser.me/api/portraits/men/44.jpg",
70
50
  margin_bottom: "sm"
71
- }) %>
51
+ }) %>
@@ -4,73 +4,54 @@ import { Avatar } from '../..'
4
4
  const AvatarCircleIconComponentOverlay = () => {
5
5
  return (
6
6
  <div>
7
- <Avatar
8
- componentOverlay={{
9
- component: "iconCircle",
10
- icon: "plus",
11
- placement: "top-left"
12
- }}
13
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
- marginBottom="sm"
15
- size="xxs"
16
- />
17
-
18
- <Avatar
19
- componentOverlay={{
20
- component: "iconCircle",
21
- icon: "plus",
22
- placement: "top-right"
23
- }}
24
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
- marginBottom="sm"
26
- size="xs"
27
- />
28
-
29
- <Avatar
30
- componentOverlay={{
31
- component: "iconCircle",
32
- icon: "plus",
33
- placement: "bottom-right",
34
- }}
35
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
36
- marginBottom="sm"
37
- size="sm"
38
- />
39
-
40
- <Avatar
41
- componentOverlay={{
42
- component: "iconCircle",
43
- icon: "plus",
44
- placement: "bottom-left"
45
- }}
46
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
47
- marginBottom="sm"
48
- size="md"
49
- />
50
-
51
- <Avatar
52
- componentOverlay={{
53
- component: "iconCircle",
54
- icon: "plus",
55
- placement: "top-left"
56
- }}
57
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
58
- marginBottom="sm"
59
- size="lg"
60
- />
61
-
62
- <Avatar
63
- componentOverlay={{
64
- component: "iconCircle",
65
- icon: "plus",
66
- placement: "top-right"
67
- }}
68
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
69
- marginBottom="sm"
70
- size="xl"
71
- />
72
-
73
- </div>
7
+ <Avatar
8
+ componentOverlay={{
9
+ component: "iconCircle",
10
+ placement: "bottom-right",
11
+ icon: "shield",
12
+ variant: "royal"
13
+ }}
14
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
15
+ marginBottom="sm"
16
+ size="sm"
17
+ />
18
+
19
+ <Avatar
20
+ componentOverlay={{
21
+ component: "iconCircle",
22
+ placement: "bottom-right",
23
+ icon: "check",
24
+ variant: "green"
25
+ }}
26
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
27
+ marginBottom="sm"
28
+ size="md"
29
+ />
30
+
31
+ <Avatar
32
+ componentOverlay={{
33
+ component: "iconCircle",
34
+ placement: "top-left",
35
+ icon: "lock",
36
+ variant: "red"
37
+ }}
38
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
39
+ marginBottom="sm"
40
+ size="lg"
41
+ />
42
+
43
+ <Avatar
44
+ componentOverlay={{
45
+ component: "iconCircle",
46
+ placement: "left-center",
47
+ icon: "star",
48
+ variant: "yellow"
49
+ }}
50
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
51
+ marginBottom="sm"
52
+ size="xl"
53
+ />
54
+ </div>
74
55
  )
75
56
  }
76
57
 
@@ -0,0 +1,3 @@
1
+ NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
2
+
3
+ When passing the `iconCircle` component as an overlay, you must also specify an `icon`, and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/icon_circle/rails#color) as a `variant`.
@@ -57,26 +57,6 @@ const AvatarDefault = (props) => {
57
57
  status="offline"
58
58
  {...props}
59
59
  />
60
- <br/>
61
- <Avatar
62
- imageAlt="Terry Johnson Standing"
63
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
64
- name="Terry Johnson"
65
- overlay={{component:"badge", text: "6", variant: "notification", placement:"top-right"}}
66
- size="lg"
67
- status="offline"
68
- {...props}
69
- />
70
- <br/>
71
- <Avatar
72
- imageAlt="Terry Johnson Standing"
73
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
74
- name="Terry Johnson"
75
- overlay={{component:"icon", icon:"plus", variant:"royal", placement:"bottom-left"}}
76
- size="xl"
77
- status="offline"
78
- {...props}
79
- />
80
60
  </div>
81
61
  )
82
62
  }
@@ -4,14 +4,14 @@ examples:
4
4
  - avatar_monogram: Monogram
5
5
  - avatar_no_image: "Bad Image Link"
6
6
  - avatar_status: Status
7
- - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
7
+ - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
8
8
  - avatar_badge_component_overlay: Badge Component Overlay
9
9
  react:
10
10
  - avatar_default: Default
11
11
  - avatar_monogram: Monogram
12
12
  - avatar_no_image: "Bad Image Link"
13
13
  - avatar_status: Status
14
- - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
14
+ - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
15
15
  - avatar_badge_component_overlay: Badge Component Overlay
16
16
  swift:
17
17
  - avatar_default_swift: Default
@@ -42,3 +42,23 @@
42
42
  dark: true
43
43
  }) %>
44
44
  <% end %>
45
+
46
+ <%= pb_rails("title", props: { text: "Subtle Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
47
+
48
+ <%= pb_rails("card", props: { background: "success_subtle", margin_bottom: "sm" }) do %>
49
+ <%= pb_rails("body", props: {
50
+ text: "Success Subtle"
51
+ }) %>
52
+ <% end %>
53
+
54
+ <%= pb_rails("card", props: { background: "warning_subtle", margin_bottom: "sm" }) do %>
55
+ <%= pb_rails("body", props: {
56
+ text: "Warning Subtle"
57
+ }) %>
58
+ <% end %>
59
+
60
+ <%= pb_rails("card", props: { background: "info_subtle", margin_bottom: "sm" }) do %>
61
+ <%= pb_rails("body", props: {
62
+ text: "Info Subtle"
63
+ }) %>
64
+ <% end %>
@@ -90,7 +90,47 @@ const CardBackground = (props) => {
90
90
  />
91
91
  </Card>
92
92
 
93
-
93
+
94
+ <Title
95
+ {...props}
96
+ marginBottom="sm"
97
+ size={4}
98
+ tag="h4"
99
+ text="Subtle Status Colors"
100
+ />
101
+
102
+ <Card
103
+ background="success_subtle"
104
+ marginBottom="sm"
105
+ {...props}
106
+ >
107
+ <Body
108
+ text="Success Subtle"
109
+ {...props}
110
+ />
111
+ </Card>
112
+
113
+ <Card
114
+ background="warning_subtle"
115
+ marginBottom="sm"
116
+ {...props}
117
+ >
118
+ <Body
119
+ text="Warning Subtle"
120
+ {...props}
121
+ />
122
+ </Card>
123
+
124
+ <Card
125
+ background="info_subtle"
126
+ marginBottom="sm"
127
+ {...props}
128
+ >
129
+ <Body
130
+ text="Info Subtle"
131
+ {...props}
132
+ />
133
+ </Card>
94
134
  </div>
95
135
  )
96
136
  }
@@ -1 +1 @@
1
- Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.
1
+ Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
@@ -67,4 +67,4 @@
67
67
  <%= pb_rails("card/card_body", props: { padding: "md", }) do %>
68
68
  Body
69
69
  <% end %>
70
- <% end %>
70
+ <% end %>
@@ -1 +1 @@
1
- Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
1
+ Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
@@ -1 +1 @@
1
- Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
1
+ Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -5,21 +5,21 @@
5
5
  value: "United States",
6
6
  areaCode: "+1",
7
7
  icon: "πŸ‡ΊπŸ‡Έ",
8
- id: "United-states"
8
+ id: "us"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "πŸ‡¨πŸ‡¦",
15
- id: "canada"
15
+ id: "ca"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "πŸ‡΅πŸ‡°",
22
- id: "pakistan"
22
+ id: "pk"
23
23
  }
24
24
  ]
25
25
 
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -5,21 +5,21 @@
5
5
  value: "United States",
6
6
  areaCode: "+1",
7
7
  icon: "πŸ‡ΊπŸ‡Έ",
8
- id: "United-states"
8
+ id: "us"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "πŸ‡¨πŸ‡¦",
15
- id: "canada"
15
+ id: "ca"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "πŸ‡΅πŸ‡°",
22
- id: "pakistan"
22
+ id: "pk"
23
23
  }
24
24
  ]
25
25
 
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>