playbook_ui 7.1.1.pre.alpha1 → 7.3.0.pre.alpha2

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

@@ -0,0 +1,372 @@
+import React from 'react'
+import { Caption, Card, Flex, FlexItem, IconValue, Image, Layout, Nav, NavItem, SectionSeparator, Title } from '../../../../pb_kits/playbook'
+
+const CollectionDetail = () => (
+  <div>
+
+    <Layout
+        layout="collection_detail"
+        padding="lg"
+    >
+      <Card padding="none">
+        <Caption
+            padding="md"
+            size="lg"
+            text="News Stories"
+        />
+        <SectionSeparator />
+        {
+          <Nav
+              link="#"
+              marginTop="sm"
+              orientation="vertical"
+          >
+            <NavItem
+                link="#"
+                text="All News"
+            />
+            <NavItem
+                link="#"
+                text="Top Stories"
+            />
+            <NavItem
+                active
+                link="#"
+                text="National"
+            />
+            <Nav variant="subtle">
+              <NavItem
+                  active
+                  link="#"
+                  text="All"
+              />
+              <NavItem
+                  link="#"
+                  text="Planet Money"
+              />
+              <NavItem
+                  link="#"
+                  text="Books"
+              />
+              <NavItem
+                  link="#"
+                  text="Books, News, and Features"
+              />
+              <NavItem
+                  link="#"
+                  text="Science"
+              />
+              <NavItem
+                  link="#"
+                  text="Politics"
+              />
+              <NavItem
+                  link="#"
+                  text="National Security"
+              />
+              <NavItem
+                  link="#"
+                  text="Environment"
+              />
+              <NavItem
+                  link="#"
+                  text="Shots - Health News"
+              />
+              <NavItem
+                  link="#"
+                  text="Analysis"
+              />
+            </Nav>
+            <NavItem
+                link="#"
+                text="Files"
+            />
+          </Nav>
+        }
+      </Card>
+
+      <Layout.Body>
+        {/* START PLANET MONEY */}
+        <Card padding="none">
+          <Card.Header>
+            <Caption
+                dark
+                text="Planet Money"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <Image url="https://djenjyj46f9j9.cloudfront.net/items/292f0C2i3f2z2f2A0P0n/Screen%20Shot%202020-07-09%20at%201.23.31%20PM.png?X-CloudApp-Visitor-Id=3399053&v=ed16c3c4" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="Where’d the Money Go, and Other Questions"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="391"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="2,039"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="89"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END PLANET MONEY */}
+        {/* START WORLD CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={2}>
+            <Caption
+                dark
+                text="World"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <Image url="https://djenjyj46f9j9.cloudfront.net/items/0n07340O0c3R0V0L1V0P/Screen%20Shot%202020-07-09%20at%201.41.26%20PM.png?X-CloudApp-Visitor-Id=3399053&v=b532b3f0" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="U.K. Willing To Admit 3 Million If China Adopts Security Law"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="304"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="5,032"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="102"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END WORLD CARD */}
+        {/* START BOOKS CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={3}>
+            <Caption
+                dark
+                text="Books"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <Image url="https://djenjyj46f9j9.cloudfront.net/items/1j2k1g3f2H2W2f1v3225/Screen%20Shot%202020-07-09%20at%201.42.32%20PM.png?X-CloudApp-Visitor-Id=3399053&v=2ab46cb6" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="Opinion: Harry Potter's Magic Fades When His Creator Tweets"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="201"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="890"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="2"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END BOOKS CARD */}
+        {/* START NATIONAL CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={4}>
+            <Caption
+                dark
+                text="National"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <Image url="https://djenjyj46f9j9.cloudfront.net/items/2j0G2k3I0f3W3a2c2q3o/Screen%20Shot%202020-07-09%20at%201.43.40%20PM.png?X-CloudApp-Visitor-Id=3399053&v=d2667a0b" />
+            <Title
+                paddingTop="sm"
+                paddingX="sm"
+                size={4}
+                tag="h4"
+                text="1st U.S. Woman To Walk In Space Dives To Deepest Point In Ocean"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="245"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="10,302"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="89"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END NATIONAL CARD */}
+        {/* START BOOKS, NEWS, AND FEATURES CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={5}>
+            <Caption
+                dark
+                text="Books, News, and Features"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <Image url="https://djenjyj46f9j9.cloudfront.net/items/0m353s3A3I3B0w3N3W2U/Screen%20Shot%202020-07-09%20at%201.44.30%20PM.png?X-CloudApp-Visitor-Id=3399053&v=5b24787c" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="Publishers Sue Internet Archive For Mass Copyright Infringement"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="84"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="5,592"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="104"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END BOOKS, NEWS, AND FEATURES CARD */}
+        {/* START SCIENCE CARD */}
+        <Card padding="none">
+          <Card.Header categoryColor={6}>
+            <Caption
+                dark
+                text="Science"
+            />
+          </Card.Header>
+          <Card.Body padding="none">
+            <Image url="https://djenjyj46f9j9.cloudfront.net/items/0n1b1V1F4614343t3547/Screen%20Shot%202020-07-09%20at%201.45.26%20PM.png?X-CloudApp-Visitor-Id=3399053&v=a3cc4d20" />
+            <Title
+                paddingLeft="sm"
+                paddingTop="sm"
+                size={4}
+                tag="h4"
+                text="New Book Argues Migration Isn’t A Crisis — It’s The Solution"
+            />
+            <SectionSeparator paddingY="sm" />
+            <Flex
+                orientation="row"
+                paddingBottom="sm"
+                paddingX="sm"
+                wrap
+            >
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="share-alt"
+                    text="54"
+                  /> }
+              </FlexItem>
+              <FlexItem paddingRight="sm">
+                { <IconValue
+                    icon="eye"
+                    text="3,982"
+                  /> }
+              </FlexItem>
+              <FlexItem>
+                { <IconValue
+                    icon="comments"
+                    text="12"
+                  /> }
+              </FlexItem>
+            </Flex>
+          </Card.Body>
+        </Card>
+        {/* END SCIENCE CARD */}
+
+      </Layout.Body>
+
+    </Layout>
+
+  </div>
+)
+export default CollectionDetail

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

@@ -0,0 +1,81 @@
+<%= pb_rails("layout", props: {full: true, position: "left", size: "xl", collapse: "md"}) do %>
+  <%= pb_rails("layout/sidebar") do %>
+    <br>
+    <%= pb_rails("user", props: {
+          name: "Jon Zazula",
+          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"
+      }) %>
+
+    <br>
+    <hr style="height:1px;border:none;color:#e4e8f0;background-color:#e4e8f0;margin: 15px;" />
+
+    <%= pb_rails("nav", props: {variant: "subtle"}) do %>
+      <%= pb_rails("nav/item", props: { icon_left: "city", text: "City", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { icon_left: "user-friends", text: "People", link: "#", icon_right: "angle-down" }) %>
+      <%= pb_rails("nav/item", props: { icon_left: "user-tie", text: "Growth Dashboard", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { icon_left: "clock", text: "History", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { icon_left: "clipboard", text: "Memos", link: "#", icon_right: "angle-down" }) %>
+      <%= pb_rails("nav/item", props: { icon_left: "phone", text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("layout/body") do %> 
+
+    <% data = [{
+        name: 'Installation',
+        data: [154175]
+    }, {
+        name: 'Manufacturing',
+        data: [40434]
+    }, {
+        name: 'Sales & Distribution',
+        data: [39387]
+    }, {
+        name: 'Project Development',
+        data: [34227]
+    }, {
+        name: 'Other',
+        data: [18111]
+    }] %>
+
+    <%= pb_rails("bar_graph", props: {
+        axis_title: 'Number of Employees',
+        chart_data: data,
+        id: "bar-test",
+        point_start: 2012,
+        subtitle: 'Source: thesolarfoundation.com',
+        title: 'Solar Employment Growth by Sector, 2010-2016',
+        padding_top: "md"
+    }) %>
+
+    <% data2 = [{
+        name: 'Installation',
+        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+    }, {
+        name: 'Manufacturing',
+        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+    }, {
+        name: 'Sales & Distribution',
+        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+    }, {
+        name: 'Project Development',
+        data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
+    }, {
+        name: 'Other',
+        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+    }] %>
+
+    <%= pb_rails("line_graph", props: { id: "line-test", gradient: false, chart_data: data2, point_start: 1, title: 'Solar Employment Growth by Sector, 2010-2016', subtitle: 'Source: thesolarfoundation.com', axis_title: 'Number of Employees' }  ) %>
+  <% end %>
+<% end %>
+
+
+  
+
+
+