feat(ListRow): Handle the expanded view of the listrow and add bottom…

…sheet.
ticketmaster · Jul 17, 2018 · 7725a4f · 7725a4f
1 parent d2bad03
commit 7725a4f
Show file tree

Hide file tree

Showing 62 changed files with 10,579 additions and 1,826 deletions.
diff --git a/catalog/index.html b/catalog/index.html
@@ -64,7 +64,9 @@
 </head>
 
 <body>
+  <div id="modal-root"></div>
   <div id="catalog"></div>
+
 </body>
 
 </html>
diff --git a/catalog/index.js b/catalog/index.js
@@ -2,18 +2,20 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { Catalog } from "catalog";
 
-import home from "./pages/home/index";
-import colors from "./pages/colors/index";
-import typography from "./pages/typography/index";
-import buttons from "./pages/buttons/index";
+import home from "./pages/home";
+import colors from "./pages/colors";
+import typography from "./pages/typography";
+import buttons from "./pages/buttons";
 import grid from "./pages/grid/index";
 import icons from "./pages/icons/index";
+import imageCard from "./pages/image_card";
+import listRow from "./pages/list_row";
+import header from "./pages/header";
+import inputs from "./pages/inputs";
+import navBar from "./pages/nav_bar";
+import bottomSheet from "./pages/bottom_sheet";
+import image from "./pages/image";
 import images from "./pages/images";
-import imageCard from "./pages/image_card/index";
-import listRow from "./pages/listRow";
-import header from "./pages/header/index";
-import inputs from "./pages/inputs/index";
-import navBar from "./pages/nav_bar/index";
 import breadcrumbs from "./pages/breadcrumbs";
 
 const theme = {
@@ -29,11 +31,13 @@ const pages = [
   icons,
   images,
   imageCard,
+  image,
   listRow,
   header,
   inputs,
   navBar,
-  breadcrumbs
+  breadcrumbs,
+  bottomSheet
 ];
 
 const sizes = [

diff --git a/catalog/pages/bottom_sheet/index.js b/catalog/pages/bottom_sheet/index.js
@@ -0,0 +1,23 @@
+import { pageLoader } from "catalog";
+
+import BottomSheet from "../../../src/components/BottomSheet";
+import Backdrop from "../../../src/components/Backdrop/index";
+
+import { sections } from "../list_row/mock";
+import ListRowOverflow from "../../../src/components/List/Overflow";
+import Section from "../../../src/components/List/Section";
+import SectionItem from "../../../src/components/List/SectionItem";
+
+export default {
+  path: "/bottomSheet",
+  title: "Bottom Sheet",
+  imports: {
+    BottomSheet,
+    Backdrop,
+    Section,
+    SectionItem,
+    sections,
+    ListRowOverflow
+  },
+  content: pageLoader(() => import("./index.md"))
+};
diff --git a/catalog/pages/bottom_sheet/index.md b/catalog/pages/bottom_sheet/index.md
@@ -0,0 +1,21 @@
+### BottomSheet
+
+```react
+responsive: true
+state: {visible:  true}
+---
+
+<Backdrop>
+    <BottomSheet>
+     <ListRowOverflow>
+      {sections.map(section =>
+        <Section title={section.title} totalSections={4} key={section.key}>
+          {section.items.map(item =>
+          <SectionItem item={item} key={item.title}/>)}
+        </Section>
+        )}
+    </ListRowOverflow>
+
+  </BottomSheet>
+</Backdrop>
+```
diff --git a/catalog/pages/icons/index.js b/catalog/pages/icons/index.js
@@ -5,6 +5,11 @@ import {
   UserIcon,
   OverflowIcon,
   SearchIcon,
+  ParkingIcon,
+  TicketIcon,
+  VenueIcon,
+  VipIcon,
+  CrossIcon,
   StarIcon
 } from "../../../src/components/Icons/index";
 import { Container, Row, Column } from "../../../src/components/Grid";
@@ -31,6 +36,11 @@ export default {
     UserIcon,
     OverflowIcon,
     SearchIcon,
+    ParkingIcon,
+    TicketIcon,
+    VenueIcon,
+    VipIcon,
+    CrossIcon,
     StarIcon,
     Container,
     Row,

diff --git a/catalog/pages/icons/index.md b/catalog/pages/icons/index.md
@@ -15,15 +15,15 @@ span: 6
 rows:
   - Prop: size
     Type: number
-    Component: OverflowIcon, UserIcon, ChevronIcon, StarIcon
+    Component: OverflowIcon, UserIcon, ChevronIcon, StarIcon, TicketIcon, VenueIcon, VipIcon, CrossIcon, ParkingIcon
     Notes: Required
   - Prop: color
     Type: string
-    Component: OverflowIcon, UserIcon, ChevronIcon, StarIcon
+    Component: OverflowIcon, UserIcon, ChevronIcon, StarIcon, TicketIcon, VenueIcon, VipIcon, CrossIcon, ParkingIcon
     Notes: Required
   - Prop: children
     Type: node
-    Component: OverflowIcon, UserIcon, ChevronIcon, StarIcon
+    Component: OverflowIcon, UserIcon, ChevronIcon, StarIcon, TicketIcon, VenueIcon, VipIcon, CrossIcon, ParkingIcon
     Notes: Optional
   - Prop: direction
     Type: string
@@ -78,5 +78,35 @@ rows:
   </Column>
 
 </Row>
+
+<Row>
+  <Column medium={3}>
+    <div style={iconStyle}><TicketIcon size={26} color="#262626"><title>Ticket Icon</title></TicketIcon></div>
+    <div style={iconLabelStyle}>Ticket Icon</div>
+  </Column>
+
+  <Column medium={3}>
+    <div style={iconStyle}><VenueIcon size={26} color="#262626"><title>Venue Icon</title></VenueIcon></div>
+    <div style={iconLabelStyle}>Venue Icon</div>
+  </Column>
+
+  <Column medium={3}>
+    <div style={iconStyle}><VipIcon size={26} color="#262626"><title>Vip Icon</title></VipIcon></div>
+    <div style={iconLabelStyle}>Vip Icon</div>
+  </Column>
+
+  <Column medium={3}>
+    <div style={iconStyle}><CrossIcon size={20} color="#262626"><title>Cross Icon</title></CrossIcon></div>
+    <div style={iconLabelStyle}>Cross Icon</div>
+  </Column>
+
+</Row>
+
+<Row>
+  <Column medium={3}>
+    <div style={iconStyle}><ParkingIcon size={26} color="#000"><title>Parking Icon</title></ParkingIcon></div>
+    <div style={iconLabelStyle}>Parking Icon</div>
+  </Column>
+</Row>
 </Container>
 ```
diff --git a/catalog/pages/image/index.js b/catalog/pages/image/index.js
@@ -0,0 +1,11 @@
+import { pageLoader } from "catalog";
+
+import ThumbnailCircleImage from "../../../src/components/Image/ThumbnailCircle";
+import { Container, Row, Column } from "../../../src/components/Grid";
+
+export default {
+  path: "/image",
+  title: "Image",
+  imports: { ThumbnailCircleImage, Container, Row, Column },
+  content: pageLoader(() => import("./index.md"))
+};
diff --git a/catalog/pages/image/index.md b/catalog/pages/image/index.md
@@ -0,0 +1,29 @@
+### Thumbnail Image component
+
+### Props
+
+```table
+span: 6
+rows:
+  - Prop: size
+    Type: Number
+    Notes: Required
+  - Prop: src
+    Type: String
+    Notes: Required
+  - Prop: alt
+    Type: String
+    Notes: Required
+```
+
+### ThumbNail Image
+
+```react
+<ThumbnailCircleImage size={40} src="https://placekitten.com/g/512/288" alt="thumbnailCircleImage"/>
+```
+
+### ThumbNail with Lazy loaded Image
+
+```react
+<ThumbnailCircleImage image={<img size={40} style={{width: "100%", height: "100%"}}src="https://placekitten.com/g/512/288" alt="thumbnailCircleImage" />} />
+```
diff --git a/catalog/pages/listRow/index.js b/catalog/pages/listRow/index.js
diff --git a/catalog/pages/listRow/index.md b/catalog/pages/listRow/index.md
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,7 +64,9 @@ @@
     </head>
     <body>
+      <div id="modal-root"></div>
       <div id="catalog"></div>
     </body>
     </html>