playbook_ui 4.15.0 → 4.18.0

data/app/pb_kits/playbook/utilities/_spacing.scss

@@ -0,0 +1,42 @@
+@import "../tokens/spacing";
+
+$space_classes: ( 
+	xs: $space_xs, 
+	sm: $space_sm, 
+	md: $space_md, 
+	lg: $space_lg, 
+	xl: $space_xl, 
+	none: 0
+);
+
+$positions: ( 
+	m: "margin", 
+	mr: "margin-right", 
+	ml: "margin-left", 
+	mt: "margin-top", 
+	mb: "margin-bottom", 
+	mx: ("margin-left", "margin-right"), 
+	my: ("margin-top", "margin-bottom"),
+	p: "padding", 
+	pr: "padding-right", 
+	pl: "padding-left", 
+	pt: "padding-top", 
+	pb: "padding-bottom", 
+	px: ("padding-left", "padding-right"), 
+	py: ("padding-top", "padding-bottom")
+);
+
+@each $position_name, $position in $positions {
+	@each $space_name, $space in $space_classes {
+		.#{$position_name}_#{$space_name} {
+			@if type-of($position)=="list" {
+				@each $coordinate in $position {
+					#{$coordinate}: #{$space} !important;
+				}
+			}
+			@else {
+				#{$position}: #{$space} !important;
+			}
+		}
+	}
+}

data/app/pb_kits/playbook/utilities/spacing.js

@@ -0,0 +1,33 @@
+export const spacing = ({
+  marginRight,
+  marginLeft,
+  marginTop,
+  marginBottom,
+  marginX,
+  marginY,
+  margin,
+  paddingRight,
+  paddingLeft,
+  paddingTop,
+  paddingBottom,
+  paddingX,
+  paddingY,
+  padding,
+}) => {
+  let css = ''
+  css += marginRight ? `mr_${marginRight} ` : ''
+  css += marginLeft ? `ml_${marginLeft} ` : ''
+  css += marginTop ? `mt_${marginTop} ` : ''
+  css += marginBottom ? `mb_${marginBottom} ` : ''
+  css += marginX ? `mx_${marginX} ` : ''
+  css += marginY ? `my_${marginY} ` : ''
+  css += margin ? `m_${margin} ` : ''
+  css += paddingRight ? `pr_${paddingRight} ` : ''
+  css += paddingLeft ? `pl_${paddingLeft} ` : ''
+  css += paddingTop ? `pt_${paddingTop} ` : ''
+  css += paddingBottom ? `pb_${paddingBottom} ` : ''
+  css += paddingX ? `px_${paddingX} ` : ''
+  css += paddingY ? `py_${paddingY} ` : ''
+  css += padding ? `p_${padding} ` : ''
+  return css
+}

data/app/views/playbook/samples/dashboards/index.html.erb

@@ -6,6 +6,7 @@
           title: "User Experience Designer",
           orientation: "horizontal",
           align: "left",
+          margin_left: "md",
           size: "md",
           avatar_url: "https://s3-hq-f5.powerhrg.com/nitro-production/avatars/55553/badge/business-technology-jonathan-zazula.jpg?AWSAccessKeyId=IWSW00NEQHMEYQTLZ7E9&Signature=S0EN3l5sfIr7yk442Q2MeledXGc%3D&Expires=3161514974"
       }) %>
@@ -48,7 +49,8 @@
         id: "bar-test",
         point_start: 2012,
         subtitle: 'Source: thesolarfoundation.com',
-        title: 'Solar Employment Growth by Sector, 2010-2016'
+        title: 'Solar Employment Growth by Sector, 2010-2016',
+        padding_top: "md"
     }) %>
 
     <% data2 = [{

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

@@ -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 %>

data/app/views/playbook/samples/registration/index.jsx

@@ -0,0 +1,476 @@
+import React from 'react'
+import { BarGraph, Body, Button, Caption, Card, Checkbox, Flex, Layout, LineGraph, SectionSeparator, Table, Title } from '../../../../pb_kits/playbook'
+import FlexItem from '../../../../pb_kits/playbook/pb_flex/_flex_item.jsx'
+
+const 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: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
+}, {
+  name: '2017 | LA',
+  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+}]
+
+const totalRegistered = [{
+  name: 'Registrations',
+  data: [1475, 524, 1344, 780, 200, 900],
+}]
+const newAttendees = [{
+  name: 'Registrations',
+  data: [1475, 524, 1344, 780, 200, 900],
+}]
+const repeatingAttendees = [{
+  name: 'Registrations',
+  data: [1475, 524, 1344, 780, 200, 900],
+}]
+const graphicDesigners = [{
+  name: 'Registrations',
+  data: [1475, 524, 1344, 780, 200, 900],
+}]
+const uxUi = [{
+  name: 'Registrations',
+  data: [1475, 524, 1344, 780, 200, 900],
+}]
+const productDesigners = [{
+  name: 'Registrations',
+  data: [1475, 524, 1344, 780, 200, 900],
+}]
+
+const Registration = () => (
+  <div>
+    <Layout
+        collapse="xs"
+        position="left"
+        size="lg"
+    >
+      <Layout.Side>
+        <Flex
+            orientation="column"
+            padding="md"
+            vertical="center"
+        >
+          <FlexItem>
+            <Title
+                size={3}
+                tag="h3"
+                text="Design Expo"
+            />
+          </FlexItem>
+          <FlexItem>
+            <Body
+                color="light"
+                text="Annual Conference*"
+            />
+          </FlexItem>
+        </Flex>
+        <SectionSeparator />
+        <Flex
+            orientation="column"
+            padding="md"
+        >
+          <FlexItem>
+            <Title
+                paddingBottom="sm"
+                size={4}
+                tag="h4"
+                text="Regions"
+            />
+          </FlexItem>
+          <Flex
+              inline
+              orientation="column"
+          >
+            <Checkbox
+                checked
+                name="NorthAmerica"
+                paddingBottom="sm"
+                paddingLeft="sm"
+                text="North America"
+                value="NorthAmerica"
+            />
+            <Checkbox
+                checked
+                name="Europe"
+                paddingBottom="sm"
+                paddingLeft="sm"
+                text="Europe"
+                value="Europe"
+            />
+          </Flex>
+          <Title
+              paddingY="sm"
+              size={4}
+              tag="h4"
+              text="Total Registered"
+          />
+          <Table
+              paddingBottom="xs"
+              size="sm"
+          >
+            <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>
+          </Table>
+          <Caption
+              size="xs"
+              text="*This dashboard includes the last six conferences"
+          />
+        </Flex>
+      </Layout.Side>
+
+      <Layout.Body
+          padding="xl"
+      >
+        <Title
+            paddingBottom="lg"
+            size={3}
+            tag="h3"
+            text="Registration Dashboard"
+        />
+        <Flex
+            className="bg_light"
+            wrap
+        >
+          <FlexItem
+              fixedSize="60%"
+              paddingRight="lg"
+          >
+            <Card>
+
+              <Flex
+                  paddingBottom="md"
+                  spacing="around"
+                  vertical="bottom"
+              >
+                {/****** first number ******/}
+                <FlexItem>
+                  <Flex
+                      orientation="column"
+                      vertical="center"
+                  >
+                    <FlexItem>
+                      <Caption
+                          size="xs"
+                          text="2020 | SF"
+                      />
+                    </FlexItem>
+                    <FlexItem>
+                      <Caption
+                          text="Total Registered"
+                      />
+                    </FlexItem>
+                    <FlexItem>
+                      <Title
+                          size={2}
+                          tag="h2"
+                          text="2,391"
+                      />
+                    </FlexItem>
+                  </Flex>
+                </FlexItem>
+
+                <SectionSeparator orientation="vertical" />
+
+                {/****** second number ******/}
+
+                <FlexItem>
+                  <Flex
+                      orientation="column"
+                      paddingTop="sm"
+                      vertical="center"
+                  >
+                    <FlexItem>
+                      <Caption
+                          text="Graphic"
+                      />
+                    </FlexItem>
+                    <FlexItem>
+                      <Title
+                          size={3}
+                          tag="h3"
+                          text="353"
+                      />
+                    </FlexItem>
+                  </Flex>
+                </FlexItem>
+
+                {/****** third number ******/}
+
+                <FlexItem>
+                  <Flex
+                      orientation="column"
+                      vertical="center"
+                  >
+                    <FlexItem>
+                      <Caption
+                          text="UX/UI"
+                      />
+                    </FlexItem>
+                    <FlexItem>
+                      <Title
+                          size={3}
+                          tag="h3"
+                          text="254"
+                      />
+                    </FlexItem>
+                  </Flex>
+                </FlexItem>
+
+                {/****** fourth number ******/}
+
+                <FlexItem>
+                  <Flex
+                      orientation="column"
+                      vertical="center"
+                  >
+                    <FlexItem>
+                      <Caption
+                          text="Product"
+                      />
+                    </FlexItem>
+                    <FlexItem>
+                      <Title
+                          size={3}
+                          tag="h3"
+                          text="194"
+                      />
+                    </FlexItem>
+                  </Flex>
+                </FlexItem>
+              </Flex>
+
+              <SectionSeparator />
+
+              <Flex
+                  paddingTop="sm"
+                  spacing="around"
+                  vertical="bottom"
+              >
+                {/****** first number ******/}
+                <FlexItem>
+                  <Flex
+                      orientation="column"
+                      vertical="center"
+                  >
+                    <FlexItem>
+                      <Caption
+                          size="xs"
+                          text="2020 | TOR"
+                      />
+                    </FlexItem>
+                    <FlexItem>
+                      <Caption
+                          text="Total Registered"
+                      />
+                    </FlexItem>
+                    <FlexItem>
+                      <Title
+                          size={2}
+                          tag="h2"
+                          text="3,829"
+                      />
+                    </FlexItem>
+                  </Flex>
+                </FlexItem>
+
+                <SectionSeparator orientation="vertical" />
+
+                {/****** second number ******/}
+
+                <FlexItem>
+                  <Flex
+                      orientation="column"
+                      vertical="center"
+                  >
+                    <FlexItem>
+                      <Caption
+                          text="Graphic"
+                      />
+                    </FlexItem>
+                    <FlexItem>
+                      <Title
+                          size={3}
+                          tag="h3"
+                          text="937"
+                      />
+                    </FlexItem>
+                  </Flex>
+                </FlexItem>
+
+                {/****** third number ******/}
+
+                <FlexItem>
+                  <Flex
+                      orientation="column"
+                      vertical="center"
+                  >
+                    <FlexItem>
+                      <Caption
+                          text="UX/UI"
+                      />
+                    </FlexItem>
+                    <FlexItem>
+                      <Title
+                          size={3}
+                          tag="h3"
+                          text="721"
+                      />
+                    </FlexItem>
+                  </Flex>
+                </FlexItem>
+
+                {/****** fourth number ******/}
+
+                <FlexItem>
+                  <Flex
+                      orientation="column"
+                      vertical="center"
+                  >
+                    <FlexItem>
+                      <Caption
+                          text="Product"
+                      />
+                    </FlexItem>
+                    <FlexItem>
+                      <Title
+                          size={3}
+                          tag="h3"
+                          text="628"
+                      />
+                    </FlexItem>
+                  </Flex>
+                </FlexItem>
+              </Flex>
+            </Card>
+
+            <Flex
+                orientation="column"
+                paddingBottom="md"
+                vertical="right"
+            >
+              <FlexItem>
+                <Button
+                    onClick={() => alert('button clicked!')}
+                    text="View full breakdown"
+                    variant="link"
+                />
+              </FlexItem>
+            </Flex>
+
+            <Card>
+              <LineGraph
+                  axisTitle="Total Registration"
+                  chartData={data}
+                  height="80%"
+                  id="line-registration"
+                  legend
+                  title="Running Total"
+                  xAxisCategories={['7 wks away', '6 wks away', '5 wks away', '4 wks away', '3 wks away', '2 wks away', '1 wk away', 'Start of Event']}
+                  yAxisMin={0}
+              />
+            </Card>
+          </FlexItem>
+          <FlexItem fixedSize="40%">
+            <Card>
+              <BarGraph
+                  axisTitle="Total Registered"
+                  chartData={totalRegistered}
+                  height="30%"
+                  id="total-attendees"
+                  xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
+                  yAxisMin={0}
+              />
+              <BarGraph
+                  axisTitle="New Attendees"
+                  chartData={newAttendees}
+                  height="30%"
+                  id="new-attendees"
+                  xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
+                  yAxisMin={0}
+              />
+              <BarGraph
+                  axisTitle="New Attendees"
+                  chartData={newAttendees}
+                  height="30%"
+                  id="new-attendees"
+                  xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
+                  yAxisMin={0}
+              />
+              <BarGraph
+                  axisTitle="Repeating Attendees"
+                  chartData={repeatingAttendees}
+                  height="30%"
+                  id="repeating-attendees"
+                  xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
+                  yAxisMin={0}
+              />
+              <BarGraph
+                  axisTitle="Graphic Designers"
+                  chartData={graphicDesigners}
+                  height="30%"
+                  id="graphic-designers"
+                  xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
+                  yAxisMin={0}
+              />
+              <BarGraph
+                  axisTitle="UX/UI"
+                  chartData={uxUi}
+                  height="30%"
+                  id="ux-ui"
+                  xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
+                  yAxisMin={0}
+              />
+              <BarGraph
+                  axisTitle="Product Designers"
+                  chartData={productDesigners}
+                  height="30%"
+                  id="product-designers"
+                  xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
+                  yAxisMin={0}
+              />
+            </Card>
+          </FlexItem>
+        </Flex>
+      </Layout.Body>
+    </Layout>
+  </div>
+)
+
+export default Registration