playbook_ui 4.15.0 → 4.18.0

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -0,0 +1,271 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/opacity";
+@import "../tokens/typography";
+
+$connector_width: 2px;
+$icon_margin: $space_xs/2;
+$icon_height: 28px;
+$height_from_top: $icon_height/2 - $connector_width/2;
+
+@mixin pb_timeline_line_solid($width, $height, $margin) {
+    width: $width;
+    height: $height;
+    background-color: $border_light;
+    margin: $margin;
+    flex-grow: 1;
+}
+
+@mixin pb_timeline_line_dotted_horizontal($width, $height, $margin) {
+    width: $width;
+    height: $height;
+    background: repeating-linear-gradient(to right, $border_light 0px ,$border_light 2px, transparent 3px, transparent 10px);
+    margin: $margin;
+    flex-grow: 1;
+}
+
+@mixin pb_timeline_line_dotted_vertical($width, $height, $margin) {
+    width: $width;
+    height: $height;
+    background: repeating-linear-gradient(0deg, $border_light 0px ,$border_light 2px, transparent 3px, transparent 10px);
+    margin: $margin;
+    flex-grow: 1;
+}
+
+@mixin flex_wrapper($flex_direction) {
+    display: flex;
+    flex-direction: $flex_direction;
+}
+
+[class^=pb_timeline_kit] {
+    &[class*=_horizontal] {
+        @include flex_wrapper(row);
+        width: 100%;
+        >div {
+            &:last-child {
+                flex-basis: auto !important;
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        opacity: 0;
+                    }
+                }
+                [class=pb_timeline_item_right_block] {
+                    display: block;
+                    width: 100%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                }
+            }
+        }
+        [class*=pb_timeline_item_kit] {
+            &[class*=_solid] {
+                flex-basis: 100%;
+                [class=pb_timeline_item_left_block] {
+                    height: 0px;
+                }
+                [class=pb_timeline_item_step] {
+                    @include flex_wrapper(row);
+                    margin-top: $space_xs;
+                    margin-bottom: $space_xs;
+                    [class=pb_timeline_item_connector] {
+                        @include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                    }
+                }
+            }
+            &[class*=_dotted] {
+                flex-basis: 100%;
+                [class=pb_timeline_item_left_block] {
+                    height: 0;
+                }
+                [class=pb_timeline_item_step] {
+                    @include flex_wrapper(row);
+                    margin-top: $space_xs;
+                    margin-bottom: $space_xs;
+                    [class=pb_timeline_item_connector] {
+                        @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                    }
+                }
+            }
+        }
+        &[class*=_with_date] {
+            @include flex_wrapper(row);
+            width: 100%;
+            >div {
+                &:last-child {
+                    flex-basis: auto !important;
+                    [class=pb_timeline_item_step] {
+                        [class=pb_timeline_item_connector] {
+                            opacity: 0;
+                        }
+                    }
+                    [class=pb_timeline_item_right_block] {
+                        display: block;
+                        width: 100%;
+                        overflow: hidden;
+                        white-space: nowrap;
+                    }
+                }
+            }
+            [class*=pb_timeline_item_kit] {
+                &[class*=_solid] {
+                    flex-basis: 100%;
+                    [class=pb_timeline_item_left_block] {
+                        @include flex_wrapper(column);
+                        height: 55px;
+                        justify-content: flex-end;
+                        [class=pb_date_stacked_kit_center_sm] {
+                            [class=pb_date_stacked_day_month] {
+                                [class=pb_caption_kit_md] {
+                                    text-align: left;
+                                }
+                                [class=pb_title_kit_4] {
+                                    text-align: left;
+                                }
+                            }
+                        }
+                    }
+                    [class=pb_timeline_item_step] {
+                        @include flex_wrapper(row);
+                        margin-top: $space_xs;
+                        margin-bottom: $space_xs;
+                        [class=pb_timeline_item_connector] {
+                            @include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                        }
+                    }
+                }
+                &[class*=_dotted] {
+                    flex-basis: 100%;
+                    [class=pb_timeline_item_left_block] {
+                        height: 55px;
+                        [class=pb_date_stacked_kit_center_sm] {
+                            [class=pb_date_stacked_day_month] {
+                                [class=pb_caption_kit_md] {
+                                    text-align: left;
+                                }
+                                [class=pb_title_kit_4] {
+                                    text-align: left;
+                                }
+                            }
+                        }
+                    }
+                    [class=pb_timeline_item_step] {
+                        @include flex_wrapper(row);
+                        margin-top: $space_xs;
+                        margin-bottom: $space_xs;
+                        [class=pb_timeline_item_connector] {
+                            @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                        }
+                    }
+                }
+            } 
+        }
+    }
+    &[class*=_vertical] {
+        @include flex_wrapper(column);
+        align-items: flex-start;
+        align-self: auto;
+        >div:last-child {
+            [class=pb_timeline_item_step] {
+                [class=pb_timeline_item_connector] {
+                    opacity: 0;
+                }
+            }
+        }
+        [class*=pb_timeline_item_kit] {
+            @include flex_wrapper(row);
+            &[class*=_solid] {
+                flex-basis: 100%;
+                [class=pb_timeline_item_step] {
+                    @include flex_wrapper(column);
+                    align-content: flex-start;
+                    margin-right: $space_sm;
+                    margin-left: $space_sm;
+                    [class=pb_timeline_item_connector] {
+                        @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                    }
+                }
+                [class=pb_timeline_item_left_block] {
+                    margin-bottom: $space_lg;
+                    width: 0px;
+                }
+                [class=pb_timeline_item_right_block] {
+                    @include flex_wrapper(column);
+                    margin-bottom: $space_lg;
+                }
+            }
+            &[class*=_dotted] {
+                flex-basis: 100%;
+                [class=pb_timeline_item_step] {
+                    @include flex_wrapper(column);
+                    margin-right: $space_sm;
+                    margin-left: $space_sm;
+                    [class=pb_timeline_item_connector] {
+                        @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                    }
+                }
+                [class=pb_timeline_item_left_block] {
+                    margin-bottom: $space_lg;
+                    width: 0px;
+                }
+                [class=pb_timeline_item_right_block] {
+                    @include flex_wrapper(column);
+                    margin-bottom: $space_lg;
+                }
+            }
+        }
+        &[class*=_with_date] {
+            @include flex_wrapper(column);
+            align-items: flex-start;
+            align-self: auto;
+            >div:last-child {
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        opacity: 0;
+                    }
+                }
+            }
+            [class*=pb_timeline_item_kit] {
+                @include flex_wrapper(row);
+                &[class*=_solid] {
+                    flex-basis: 100%;
+                    [class=pb_timeline_item_step] {
+                        @include flex_wrapper(column);
+                        align-content: flex-start;
+                        margin-right: $space_sm;
+                        margin-left: $space_sm;
+                        [class=pb_timeline_item_connector] {
+                            @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                        }
+                    }
+                    [class=pb_timeline_item_left_block] {
+                        margin-bottom: $space_lg;
+                        width: $space_lg;
+                    }
+                    [class=pb_timeline_item_right_block] {
+                        @include flex_wrapper(column);
+                        margin-bottom: $space_lg;
+                    }
+                }
+                &[class*=_dotted] {
+                    flex-basis: 100%;
+                    [class=pb_timeline_item_step] {
+                        @include flex_wrapper(column);
+                        margin-right: $space_sm;
+                        margin-left: $space_sm;
+                        [class=pb_timeline_item_connector] {
+                            @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                        }
+                    }
+                    [class=pb_timeline_item_left_block] {
+                        margin-bottom: $space_lg;
+                        width: $space_lg;
+                    }
+                    [class=pb_timeline_item_right_block] {
+                        @include flex_wrapper(column);
+                        margin-bottom: $space_lg;
+                    }
+                }
+            }
+        }
+    }
+}

data/app/pb_kits/playbook/pb_timeline/docs/_description.md

@@ -0,0 +1,3 @@
+The timeline kit can use two different line styles in the same timeline - `solid` and `dotted` line styles.
+
+To view different colors of icon circle, visit <a href="https://playbook.powerapp.cloud/kits/icon_circle">Icon Circle Kit</a>.

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb

@@ -0,0 +1,43 @@
+<%= pb_rails("timeline") do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Conversation started",
+            color: "light"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Trip #12422",
+            color: "light"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Refund issue #12422",
+            color: "light"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "smile", icon_color: "green"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Conversation resolved",
+            color: "light"
+    }) %>
+    <% end %>
+<% end %>
+
+<br /><br />
+
+<%= pb_rails("timeline") do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "dotted"  }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import Timeline from '../_timeline.jsx'
+import { Body, TitleDetail } from '../../'
+
+const TimelineDefault = () => (
+  <div>
+    <Timeline>
+      <Timeline.Item
+          icon="user"
+          iconColor="royal"
+      >
+        <Body
+            color="light"
+            text="Conversation started"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+      >
+        <Body
+            color="light"
+            text="Trip #12422"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="credit-card"
+          iconColor="red"
+      >
+        <Body
+            color="light"
+            text="Refund issue #12422"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="smile"
+          iconColor="green"
+      >
+        <Body
+            color="light"
+            text="Conversation resolved"
+        />
+      </Timeline.Item>
+    </Timeline>
+
+    <br />
+    <br />
+
+    <Timeline>
+      <Timeline.Item
+          icon="user"
+          iconColor="royal"
+          lineStyle="dotted"
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson heights"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+        />
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+export default TimelineDefault

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb

@@ -0,0 +1,43 @@
+<%= pb_rails("timeline", props: {orientation: "vertical"}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Conversation started",
+            color: "light"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Trip #12422",
+            color: "light"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "credit-card", icon_color: "red"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Refund issue #12422",
+            color: "light"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "smile", icon_color: "green"}) do %>
+        <%= pb_rails("body", props: {
+            text: "Conversation resolved",
+            color: "light"
+    }) %>
+    <% end %>
+<% end %>
+
+<br /><br />
+
+<%= pb_rails("timeline", props: {orientation: "vertical"}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "dotted"}) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import Timeline from '../_timeline.jsx'
+import { Body, TitleDetail } from '../../'
+
+const TimelineVertical = () => (
+  <div>
+    <Timeline orientation="vertical">
+      <Timeline.Item
+          icon="user"
+          iconColor="royal"
+      >
+        <Body
+            color="light"
+            text="Conversation started"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+      >
+        <Body
+            color="light"
+            text="Trip #12422"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="credit-card"
+          iconColor="red"
+      >
+        <Body
+            color="light"
+            text="Refund issue #12422"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="smile"
+          iconColor="green"
+      >
+        <Body
+            color="light"
+            text="Conversation resolved"
+        />
+      </Timeline.Item>
+    </Timeline>
+
+    <br />
+    <br />
+
+    <Timeline orientation="vertical">
+      <Timeline.Item
+          icon="user"
+          iconColor="royal"
+          lineStyle="dotted"
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson heights"
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+        />
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+export default TimelineVertical