RubyGems - playbook_ui - Versions diffs - 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1 - Mend

playbook_ui 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1

Files changed (322) hide show

data/app/views/playbook/samples/filter_table/index.jsx ADDED

@@ -0,0 +1,433 @@
+import React from 'react'
+import { Body, Button, Caption, CircleIconButton, Currency, Date, Filter, Flex, FlexItem, PersonContact, ProgressPills, Table, TextInput, Title, User } from '../../../../pb_kits/playbook'
+const FilterTable = () => (
+  <div>
+    <Flex
+        className="bg_light"
+        marginTop="md"
+        paddingX="md"
+        spacing="between"
+    >
+      <FlexItem>
+        <Title
+            size={3}
+            tag="h3"
+            text="Prospective Clients"
+        />
+      </FlexItem>
+      <FlexItem>
+        <Button
+            onClick={() => alert('button clicked!')}
+            text="Add Client"
+        />
+      </FlexItem>
+    </Flex>
+    <Filter
+        filters={{ 'Start Date': 'Apr 19, 2020', 'End Date': 'Apr 20, 2020' }}
+        marginTop="md"
+        marginX="md"
+        results={0}
+        sortOptions={{
+          dateCreated: 'Date Created',
+          // eslint-disable-next-line
+          assignee: 'Assignee',
+          // eslint-disable-next-line
+          contact: 'Contact',
+          // eslint-disable-next-line
+          inquirySource: 'Inquiry Source',
+        }}
+        sortValue={[{ name: 'dateCreated', dir: 'asc' }]}
+        template="single"
+    >
+      <Flex orientation="row">
+        <TextInput
+            aria={{ label: 'hello' }}
+            data={{ say: 'hi', yell: 'go' }}
+            id="unique-id"
+            label="Start Date"
+            paddingRight="md"
+            placeholder="Enter first name"
+            value="Apr 19, 2020"
+        />
+        <TextInput
+            aria={{ label: 'hello' }}
+            data={{ say: 'hi', yell: 'go' }}
+            id="unique-id"
+            label="End Date"
+            placeholder="Enter first name"
+            value="Apr 20, 2020"
+        />
+      </Flex>
+      <Flex spacing="between">
+        <Button text="Apply" />
+        <Button
+            text="Clear"
+            variant="secondary"
+        />
+      </Flex>
+    </Filter>
+    <Flex orientation="row">
+      <Table
+          margin="md"
+          size="sm"
+      >
+        <thead>
+          <tr>
+            <th>{'Contact'}</th>
+            <th>{'Date Created'}</th>
+            <th>{'Inquiry Source'}</th>
+            <th>{'Lead Status'}</th>
+            <th>{'Quote'}</th>
+            <th>{'Assignee'}</th>
+            <th>{'Actions'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <PersonContact
+                  contacts={[
+                        {
+                          contactType: 'cell',
+                          contactValue: '3832919348',
+                        },
+                        {
+                          contactType: 'email',
+                          contactValue: 'jesse.cortez@gmail.com',
+                        },
+                      ]}
+                  firstName="Jesse"
+                  lastName="Cortez"
+              />
+            </td>
+            <td>
+              <Date
+                  size="xs"
+                  value="2020-04-20T04:20:00.000Z"
+              />
+            </td>
+            <td>
+              <Body text="Email" />
+              <Caption
+                  size="xs"
+                  text="hello@companyname.com"
+              />
+            </td>
+            <td>
+              <ProgressPills
+                  active={0}
+                  steps={4}
+                  title="Status:"
+                  value="Not Started"
+              />
+            </td>
+            <td>
+              <Currency amount="729.63" />
+            </td>
+            <td>
+              <Body text="Unassigned" />
+            </td>
+            <td>
+              <CircleIconButton
+                  icon="ellipsis-h"
+                  variant="secondary"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <PersonContact
+                  contacts={[
+                        {
+                          contactType: 'cell',
+                          contactValue: '8313455824',
+                        },
+                        {
+                          contactType: 'email',
+                          contactValue: 'billbuch@yahoo.com',
+                        },
+                      ]}
+                  firstName="Bill"
+                  lastName="Buchanan"
+              />
+            </td>
+            <td>
+              <Date
+                  size="xs"
+                  value="2020-04-20T04:20:00.000Z"
+              />
+            </td>
+            <td>
+              <Body text="Social Media" />
+              <Caption
+                  size="xs"
+                  text="Facebook"
+              />
+            </td>
+            <td>
+              <ProgressPills
+                  active={3}
+                  steps={4}
+                  title="Status:"
+                  value="Negotiation"
+              />
+            </td>
+            <td>
+              <Currency amount="534.40" />
+            </td>
+            <td>
+              <User
+                  align="left"
+                  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+                  name="Anna Black"
+                  orientation="horizontal"
+                  title="Project Coordinator"
+              />
+            </td>
+            <td>
+              <CircleIconButton
+                  icon="ellipsis-h"
+                  variant="secondary"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <PersonContact
+                  contacts={[
+                        {
+                          contactType: 'cell',
+                          contactValue: '1582430782',
+                        },
+                        {
+                          contactType: 'email',
+                          contactValue: 'effieguzman@comcast.net',
+                        },
+                      ]}
+                  firstName="Effie"
+                  lastName="Guzman"
+              />
+            </td>
+            <td>
+              <Date
+                  size="xs"
+                  value="2020-04-20T04:20:00.000Z"
+              />
+            </td>
+            <td>
+              <Body text="Online Quote" />
+              <Caption
+                  size="xs"
+                  text="Landing Page"
+              />
+            </td>
+            <td>
+              <ProgressPills
+                  active={4}
+                  steps={4}
+                  title="Status:"
+                  value="Contract"
+              />
+            </td>
+            <td>
+              <Currency amount="392.26" />
+            </td>
+            <td>
+              <User
+                  align="left"
+                  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+                  name="Anna Black"
+                  orientation="horizontal"
+                  title="Project Coordinator"
+              />
+            </td>
+            <td>
+              <CircleIconButton
+                  icon="ellipsis-h"
+                  variant="secondary"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <PersonContact
+                  contacts={[
+                        {
+                          contactType: 'cell',
+                          contactValue: '3859275970',
+                        },
+                        {
+                          contactType: 'email',
+                          contactValue: 'rodneyboone@gmail.com',
+                        },
+                      ]}
+                  firstName="Rodney"
+                  lastName="Boone"
+              />
+            </td>
+            <td>
+              <Date
+                  size="xs"
+                  value="2020-04-20T04:20:00.000Z"
+              />
+            </td>
+            <td>
+              <Body text="Internal" />
+              <Caption
+                  size="xs"
+                  text="Referral"
+              />
+            </td>
+            <td>
+              <ProgressPills
+                  active={4}
+                  steps={4}
+                  title="Status:"
+                  value="Contract"
+              />
+            </td>
+            <td>
+              <Currency amount="342.86" />
+            </td>
+            <td>
+              <User
+                  align="left"
+                  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+                  name="Anna Black"
+                  orientation="horizontal"
+                  title="Project Coordinator"
+              />
+            </td>
+            <td>
+              <CircleIconButton
+                  icon="ellipsis-h"
+                  variant="secondary"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <PersonContact
+                  contacts={[
+                        {
+                          contactType: 'cell',
+                          contactValue: '2849186943',
+                        },
+                        {
+                          contactType: 'email',
+                          contactValue: 'barbaramaxwell4@yahoo.com',
+                        },
+                      ]}
+                  firstName="Barbara"
+                  lastName="Maxwell"
+              />
+            </td>
+            <td>
+              <Date
+                  size="xs"
+                  value="2020-04-20T04:20:00.000Z"
+              />
+            </td>
+            <td>
+              <Body text="Online Quote" />
+              <Caption
+                  size="xs"
+                  text="Main Website"
+              />
+            </td>
+            <td>
+              <ProgressPills
+                  active={3}
+                  steps={4}
+                  title="Status:"
+                  value="Negotiation"
+              />
+            </td>
+            <td>
+              <Currency amount="145.01" />
+            </td>
+            <td>
+              <User
+                  align="left"
+                  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+                  name="Anna Black"
+                  orientation="horizontal"
+                  title="Project Coordinator"
+              />
+            </td>
+            <td>
+              <CircleIconButton
+                  icon="ellipsis-h"
+                  variant="secondary"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <PersonContact
+                  contacts={[
+                        {
+                          contactType: 'cell',
+                          contactValue: '6884927492',
+                        },
+                        {
+                          contactType: 'email',
+                          contactValue: 'ellen.thornton@gmail.com',
+                        },
+                      ]}
+                  firstName="Ellen"
+                  lastName="Thornton"
+              />
+            </td>
+            <td>
+              <Date
+                  size="xs"
+                  value="2020-04-20T04:20:00.000Z"
+              />
+            </td>
+            <td>
+              <Body text="Social Media" />
+              <Caption
+                  size="xs"
+                  text="Instagram"
+              />
+            </td>
+            <td>
+              <ProgressPills
+                  active={3}
+                  steps={4}
+                  title="Status:"
+                  value="Negotiation"
+              />
+            </td>
+            <td>
+              <Currency amount="25.27" />
+            </td>
+            <td>
+              <User
+                  align="left"
+                  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+                  name="Anna Black"
+                  orientation="horizontal"
+                  title="Project Coordinator"
+              />
+            </td>
+            <td>
+              <CircleIconButton
+                  icon="ellipsis-h"
+                  variant="secondary"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </Table>
+    </Flex>
+  </div>
+)
+export default FilterTable

data/app/views/playbook/samples/registration/index.html.erb ADDED

@@ -0,0 +1,316 @@
+<%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm"}) do %>
+  <%= pb_rails("layout/sidebar") do %>
+    <%= pb_rails("flex", props: {orientation: "column", horizontal: "center", padding: "md"}) do %>
+        <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("title", props: { text: "Design Expo", tag: "h2", size: 3 }) %>
+        <% end %>
+        <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("body", props: {
+                text: "Annual Conference*",
+                color: "light"
+            }) %>
+        <% end %>
+    <% end %>
+    <%= pb_rails("section_separator") %>
+    <%= pb_rails("flex", props: {orientation: "column", padding: "md"}) do %>
+        <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("title", props: { text: "Regions", tag: "h4", size: 4, padding_bottom: "sm" }) %>
+        <% end %>
+        <%= pb_rails("flex", props: {orientation: "column"}) do %>
+            <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+                <%= pb_rails("checkbox" , props: {
+                    text: "North America",
+                    value: "checkbox-value",
+                    checked: true,
+                    name: "checkbox-name",
+                    padding_left: "sm",
+                    padding_bottom: "sm"
+                }) %>
+            <% end %>
+            <%= pb_rails("body", props: {classname: "flex-item"}) do %>
+                <%= pb_rails("checkbox" , props: {
+                    text: "Europe",
+                    value: "checkbox-value",
+                    checked: true,
+                    name: "checkbox-name",
+                    padding_left: "sm",
+                    padding_bottom: "sm"
+                }) %>
+            <% end %>
+        <% end %>
+        <%= pb_rails("title", props: { text: "Total Registered", tag: "h4", size: 4, padding_y: "sm" }) %>
+        <%= pb_rails("table", props: { size: "sm", disable_hover: true, padding_bottom: "xs" }) do %>
+            <thead>
+                <tr>
+                <th>Conference</th>
+                <th>Total #</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>2020 | SF</td>
+                    <td>2,391</td>
+                </tr>
+                <tr>
+                    <td>2020 | TOR</td>
+                    <td>3,829</td>
+                </tr>
+                <tr>
+                    <td>2019 | AMS</td>
+                    <td>2,047</td>
+                </tr>
+                <tr>
+                    <td>2018 | SF</td>
+                    <td>1,824</td>
+                </tr>
+                <tr>
+                    <td>2017 | LA</td>
+                    <td>719</td>
+                </tr>
+                <tr>
+                    <td>2017 | LDN</td>
+                    <td>491</td>
+                </tr>
+            </tbody>
+        <% end %>
+        <%= pb_rails("caption", props: { text: "*This dashboard includes the last six conferences", size: 'xs' }) %>
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body", props: { padding: "xl" }) do %>
+    <%= pb_rails("title", props: { text: "Registration Dashboard", tag: "h1", size: 3, padding_bottom: "lg" }) %>
+    <%= pb_rails("flex") do %>
+        <%= pb_rails("flex/flex_item", props: {fixed_size: "60%", padding_right: "lg"}) do %>
+            <%= pb_rails("card") do %>
+                <%= pb_rails("flex", props: {vertical: "bottom", spacing: "around", padding_bottom: "md"}) do %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "2020 | SF", size: "xs" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "Total Registered" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "2,391", tag: "h3", size: 2 }) %>
+                            <% end %>
+                        <% end %>
+                    <% end %>
+                    <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "Graphic" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "353", tag: "h3", size: 3 }) %>
+                            <% end %>
+                        <% end %>
+                    <% end %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "UX/UI" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "254", tag: "h3", size: 3 }) %>
+                            <% end %>
+                        <% end %>
+                    <% end %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "Product" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "194", tag: "h3", size: 3 }) %>
+                            <% end %>
+                        <% end %>
+                    <% end %>
+                <% end %>
+                <%= pb_rails("section_separator") %>
+                <%= pb_rails("flex", props: {vertical: "bottom", spacing: "around", padding_top: "sm"}) do %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "2020 | TOR", size: "xs" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "Total Registered" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "3,829", tag: "h3", size: 2 }) %>
+                            <% end %>
+                        <% end %>
+                    <% end %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
+                    <% end %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "Graphic" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "937", tag: "h3", size: 3 }) %>
+                            <% end %>
+                        <% end %>
+                    <% end %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "UX/UI" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "721", tag: "h3", size: 3 }) %>
+                            <% end %>
+                        <% end %>
+                    <% end %>
+                    <%= pb_rails("flex/flex_item") do %>
+                        <%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("caption", props: { text: "Product" }) %>
+                            <% end %>
+                            <%= pb_rails("flex/flex_item") do %>
+                                <%= pb_rails("title", props: { text: "628", tag: "h3", size: 3 }) %>
+                            <% end %>
+                        <% end %>
+                    <% end %>
+                <% end %>
+            <% end %>
+            <%= pb_rails("flex", props: {orientation: "column", horizontal: "right", padding_bottom: "md"}) do %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("button", props: { text: "View full breakdown", variant: "link" }) %>
+                <% end %>
+            <% end %>
+            <%= pb_rails("card") do %>
+                <% data = [{
+                    name: '2020 | SF',
+                    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+                }, {
+                    name: '2020 | TOR',
+                    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+                }, {
+                    name: '2019 | AMS',
+                    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+                }, {
+                    name: '2018 | SF',
+                    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
+                }, {
+                    name: '2017 | LA',
+                    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+                }] %>
+                <%= pb_rails("line_graph", props: {
+                    id: "line-registration",
+                    gradient: false,
+                    chart_data: data,
+                    x_axis_categories:['7 wks away','6 wks away','5 wks away','4 wks away','3 wks away','2 wks away','1 wk away','Start of event'],
+                    title: 'Running Total',
+                    axis_title: 'Total Registration',
+                    legend: true,
+                    height: '80%'
+                }) %>
+            <% end %>
+        <% end %>
+        <%= pb_rails("flex/flex_item", props: {fixed_size: "40%"}) do %>
+            <%= pb_rails("card") do %>
+                <% total = [{
+                    name: 'Registrations',
+                    data: [1475, 524, 1344, 780, 200, 900]
+                }] %>
+                <%= pb_rails("bar_graph", props: {
+                    axis_title: 'Total Registered',
+                    chart_data: total,
+                    id: "total-attendees",
+                    y_axis_min: 0,
+                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
+                    height: '30%'
+                }) %>
+                <% new_attendees = [{
+                    name: 'Registrations',
+                    data: [1475, 524, 1344, 780, 200, 900]
+                }] %>
+                <%= pb_rails("bar_graph", props: {
+                    axis_title: 'New Attendees',
+                    chart_data: new_attendees,
+                    id: "new-attendees",
+                    y_axis_min: 0,
+                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
+                    height: '30%'
+                }) %>
+                <% repeating_attendees = [{
+                    name: 'Registrations',
+                    data: [1475, 524, 1344, 780, 200, 900]
+                }] %>
+                <%= pb_rails("bar_graph", props: {
+                    axis_title: 'Repeating Attendees',
+                    chart_data: repeating_attendees,
+                    id: "repeating-attendees",
+                    y_axis_min: 0,
+                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
+                    height: '30%'
+                }) %>
+                <% graphic_designers = [{
+                    name: 'Registrations',
+                    data: [1475, 524, 1344, 780, 200, 900]
+                }] %>
+                <%= pb_rails("bar_graph", props: {
+                    axis_title: 'Graphic Designers',
+                    chart_data: graphic_designers,
+                    id: "graphic-designers",
+                    y_axis_min: 0,
+                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
+                    height: '30%'
+                }) %>
+                <% ux_ui = [{
+                    name: 'Registrations',
+                    data: [1475, 524, 1344, 780, 200, 900]
+                }] %>
+                <%= pb_rails("bar_graph", props: {
+                    axis_title: 'UX/UI',
+                    chart_data: ux_ui,
+                    id: "ux-ui",
+                    y_axis_min: 0,
+                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
+                    height: '30%'
+                }) %>
+                <% product_designers = [{
+                    name: 'Registrations',
+                    data: [1475, 524, 1344, 780, 200, 900]
+                }] %>
+                <%= pb_rails("bar_graph", props: {
+                    axis_title: 'Product Designers',
+                    chart_data: product_designers,
+                    id: "product-designers",
+                    y_axis_min: 0,
+                    x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
+                    height: '30%'
+                }) %>
+            <% end %>
+        <% end %>
+    <% end %>
+  <% end %>
+<% end %>