playbook_ui 4.15.1.alpha1 → 4.18.1

data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss

@@ -0,0 +1,388 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/opacity";
+@import "../tokens/typography";
+
+$pb_progress_step_circle_size: 14px;
+$pb_progress_step_connector_width: 3px;
+$pb_progress_step_connector_height_from_top: $pb_progress_step_circle_size/2 - $pb_progress_step_connector_width/2 + 2;
+$pb_progress_step_connector_height_from_left: $pb_progress_step_circle_size/2 - $pb_progress_step_connector_width/2;
+
+@mixin pb_progress_step_circle($background_color, $border_color, $border_width, $icon_color) {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    padding-right: 0;
+    overflow: hidden;
+    height: $pb_progress_step_circle_size;
+    width: $pb_progress_step_circle_size;
+    background-color: $background_color;
+    color: $icon_color;
+    font-size: $font_smallest;
+    border-radius: $pb_progress_step_circle_size/2;
+    border: $border_width solid $border_color;
+    margin: 2px;
+}
+
+@mixin pb_progress_step_line($width, $height, $color, $margin) {
+    width: $width;
+    height: $height;
+    background-color: $color;
+    margin: $margin;
+    flex-grow: 1;
+}
+
+@mixin pb_progress_step_item_wrapper_horizontal {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+@mixin pb_progress_step_item_wrapper_flex($flex_direction, $align_items, $align_self) {
+    display: flex;
+    flex-direction: $flex_direction;
+    align-items: $align_items;
+    align-self: $align_self;
+}
+
+[class^=pb_progress_step_kit] {
+    &[class*=_icon] {
+        [class^=pb_progress_step_item_kit_complete] {
+            [class=pb_progress_step_item_step_circle] {
+                svg {
+                    width: $pb_progress_step_circle_size;
+                    height: $pb_progress_step_circle_size - 2;
+                    color: $white;
+                }
+            }
+        }
+    }
+    &[class*=_horizontal] {
+        @include pb_progress_step_item_wrapper_horizontal;
+        >div {
+            &:first-child {
+                [class^=pb_progress_step_item] {
+                    &[class*=_connector_first], &[class*=_step_connector_first] {
+                        opacity: 0;
+                    }
+                }
+            }
+            &:last-child {
+                [class^=pb_progress_step_item] {
+                    &[class*=_connector_second], &[class*=_step_connector_second] {
+                        opacity: 0;
+                    }
+                }
+            }
+        }
+        [class*=pb_progress_step_item_kit] {
+            &[class*=_complete] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_horizontal;
+                    [class^=pb_progress_step_item] {
+                        &[class*=_connector_first], &[class*=_connector_second] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(column, center, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_horizontal;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first], &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($primary, $primary, 2px, $primary);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            &[class*=_active] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_horizontal;
+                    [class^=pb_progress_step_item] {
+                        &[class*=_connector_first] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                        &[class*=_connector_second] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(column, center, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_horizontal;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($white, $primary, 2px, $white);
+                                    svg {
+                                        display: none;
+                                    }
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                            }
+                        }
+                    }
+                } 
+            }
+            &[class*=_inactive] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_horizontal;
+                    [class^=pb_progress_step_item] {
+                        &[class*=_connector_first], &[class*=_connector_second] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(column, center, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_horizontal;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first], &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_light, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($border_light, $border_light, 2px, $border_light);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &[class*=_dark] {
+            [class*=pb_progress_step_item_kit] {
+                &[class*=_active] {
+                    [class^=pb_progress_step_item] {
+                        &[class*=_connector_first] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                        &[class*=_connector_second] {
+                            @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
+                        }
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        [class=pb_progress_step_item_step] {
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $primary, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($bg_dark, $primary, 2px, $bg_dark);
+                                    svg {
+                                        display: none;
+                                    }
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
+                                }
+                            }
+                        }
+                    }
+                }
+                &[class*=_inactive] {
+                    [class=pb_progress_step_item_wrapper] {
+                        [class^=pb_progress_step_item] {
+                            &[class*=_connector_first], &[class*=_connector_second] {
+                                @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
+                            }
+                        }
+                        [class=pb_progress_step_item_step_wrapper] {
+                            [class=pb_progress_step_item_step] {
+                                [class^=pb_progress_step_item] {
+                                    &[class*=_step_connector_first], &[class*=_step_connector_second] {
+                                        @include pb_progress_step_line($space_sm, $pb_progress_step_connector_width, $border_dark, $pb_progress_step_connector_height_from_top 0 0 0);
+                                    }
+                                    &[class*=_step_circle] {
+                                        @include pb_progress_step_circle($border_dark, $border_dark, 0px, $border_dark);
+                                        svg {
+                                            display: none;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &[class*=_vertical] {
+        @include pb_progress_step_item_wrapper_flex(column, flex-start, auto);
+        > div:first-child {
+            [class=pb_progress_step_item_wrapper] {
+                [class=pb_progress_step_item_connector_first] {
+                    opacity: 0;
+                    margin: 0 0 0 $pb_progress_step_connector_height_from_left;
+                }
+                [class=pb_progress_step_item_step_wrapper] {
+                    [class=pb_progress_step_item_step] {
+                        > div:first-child {
+                            opacity: 0;
+                        }
+                    }
+                }
+            }
+        }
+        >div:last-child {
+            [class=pb_progress_step_item_wrapper] {
+                [class=pb_progress_step_item_connector_second] {
+                    opacity: 0;
+                }
+                [class=pb_progress_step_item_step_wrapper] {
+                    [class=pb_progress_step_item_step] {
+                        > div:last-child {
+                            opacity: 0;
+                        }
+                    }
+                }
+            }
+        }
+        [class*=pb_progress_step_item_kit] {
+            &[class*=_complete] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_flex(column, baseline, auto);
+                    [class=pb_progress_step_item_connector_second] {
+                        @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $primary, 0 0 0 $pb_progress_step_connector_height_from_top);
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(row, flex-start, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_flex(column, center, stretch);
+                            margin-right: 4px;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    display: none;
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($primary, $primary, 2px, $primary);
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $primary, 0);
+                                }
+                            }
+                        }
+                    }
+                } 
+            }
+            &[class*=_active] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_flex(column, baseline, auto);
+                    [class=pb_progress_step_item_connector_second] {
+                        @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_light, 0 0 0 $pb_progress_step_connector_height_from_top);
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(row, flex-start, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_flex(column, center, stretch);
+                            margin-right: 4px;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    display: none;
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($white, $primary, 2px, $white);
+                                    svg {
+                                        display: none;
+                                    }
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_light, 0);
+                                }
+                            }
+                        }
+                    }
+                } 
+            }
+            &[class*=_inactive] {
+                flex-basis: 100%;
+                [class=pb_progress_step_item_wrapper] {
+                    @include pb_progress_step_item_wrapper_flex(column, baseline, auto);
+                    [class=pb_progress_step_item_connector_second] {
+                        @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_light, 0 0 0 $pb_progress_step_connector_height_from_top);
+                    }
+                    [class=pb_progress_step_item_step_wrapper] {
+                        @include pb_progress_step_item_wrapper_flex(row, flex-start, auto);
+                        [class=pb_progress_step_item_step] {
+                            @include pb_progress_step_item_wrapper_flex(column, center, stretch);
+                            margin-right: 4px;
+                            [class^=pb_progress_step_item] {
+                                &[class*=_step_connector_first] {
+                                    display: none;
+                                }
+                                &[class*=_step_circle] {
+                                    @include pb_progress_step_circle($border_light, $border_light, 2px, $border_light);
+                                }
+                                &[class*=_step_connector_second] {
+                                    @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_light, 0);
+                                }
+                            }
+                        }
+                    }
+                }  
+            }
+        }
+        &[class*=_dark] {
+            [class^=pb_progress_step_item_kit] {
+                &[class*=_active] {
+                    [class=pb_progress_step_item_wrapper] {
+                        [class=pb_progress_step_item_connector_second] {
+                            @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_dark, 0 0 0 $pb_progress_step_connector_height_from_top);
+                        }
+                        [class=pb_progress_step_item_step_wrapper] {
+                            [class=pb_progress_step_item_step] {
+                                [class^=pb_progress_step_item] {
+                                    &[class*=_step_circle] {
+                                        @include pb_progress_step_circle(transparent, $primary, 2px, $bg_dark);
+                                        svg {
+                                            display: none;
+                                        }
+                                    }
+                                    &[class*=_step_connector_second] {
+                                        @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_dark, 0);
+                                    }
+                                }
+                            }
+                        }
+                    } 
+                }
+                &[class*=_inactive] {
+                    [class=pb_progress_step_item_wrapper] {
+                        [class=pb_progress_step_item_connector_second] {
+                            @include pb_progress_step_line($pb_progress_step_connector_width, $space_md, $border_dark, 0 0 0 $pb_progress_step_connector_height_from_top);
+                        }
+                        [class=pb_progress_step_item_step_wrapper] {
+                            [class=pb_progress_step_item_step] {
+                                [class^=pb_progress_step_item] {
+                                    &[class*=_step_circle] {
+                                        @include pb_progress_step_circle($border_dark, $border_dark, 0px, $border_dark);
+                                        svg {
+                                            display: none;
+                                        }
+                                    }
+                                    &[class*=_step_connector_second] {
+                                        @include pb_progress_step_line($pb_progress_step_connector_width, 100%, $border_dark, 0);
+                                    }
+                                }
+                            }
+                        }
+                    }  
+                }
+            }
+        }
+    }
+}

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb

@@ -0,0 +1,23 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  
+  <div class="pb_progress_step_item_wrapper">
+    <div class="pb_progress_step_item_connector_first"></div>
+    <div class="pb_progress_step_item_step_wrapper">
+      <div class="pb_progress_step_item_step">
+        <div class="pb_progress_step_item_step_connector_first"></div>
+        <div class="pb_progress_step_item_step_circle">
+          <%= pb_rails("icon", props: { icon: "check", size: "xs" }) %>
+        </div>
+        <div class="pb_progress_step_item_step_connector_second"></div>
+      </div>
+      <div>
+        <%= capture(&object.children) %>
+      </div>
+    </div>
+    <div class="pb_progress_step_item_connector_second"></div>
+  </div>
+
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx

@@ -0,0 +1,44 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+import { Icon } from '..'
+
+type ProgressStepItemProps = {
+  className?: String,
+  status?: 'complete' | 'active' | 'inactive',
+  children?: React.Node,
+}
+
+const ProgressStepItem = ({
+  className,
+  status = 'inactive',
+  children,
+}: ProgressStepItemProps) => {
+  const progressStepItem = buildCss('pb_progress_step_item_kit', status)
+
+  return (
+    <div className={classnames(progressStepItem, className)}>
+      <div className="pb_progress_step_item_wrapper">
+        <div className="pb_progress_step_item_connector_first" />
+        <div className="pb_progress_step_item_step_wrapper">
+          <div className="pb_progress_step_item_step">
+            <div className="pb_progress_step_item_step_connector_first" />
+            <div className="pb_progress_step_item_step_circle">
+              <Icon
+                  icon="check"
+              />
+            </div>
+            <div className="pb_progress_step_item_step_connector_second" />
+          </div>
+          <div>
+            {children}
+          </div>
+        </div>
+        <div className="pb_progress_step_item_connector_second" />
+      </div>
+    </div>
+  )
+}
+export default ProgressStepItem