playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.movemarkdown668

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9440dc4e4d3220da34c38ede6cc204bca36c1e06f244f631917019763ea3582e
-  data.tar.gz: ab31b1f4778d5bf93cc4f30cbacdcb113e0b8a811338491c5317f4daa9025dd2
+  metadata.gz: 2df0f0270c3034cc3c34d508319933af0f3bd1961b9ec81b08bf52411381097c
+  data.tar.gz: 4f8fb1eea4a45848114ae267ba2f102359af6f03006543a82798e70007e18c50
 SHA512:
-  metadata.gz: 655ed32310d438cd3e907c6ca30c99d81dd6cb0de6cf2745affc9f24dd8f6022fc04b35ccf36cb35ed3646bd580df858306166b7d01761c7f6a8408532537de9
-  data.tar.gz: 968ffb4c12469e2fac7238cb1da69ffa62150d5ac7b0b73c144b9e85e2ad2f04f8938283e6c3c9677a2bb8e2107c99b650e299e04c07aaeed736b003af727795
+  metadata.gz: a392fbed9531d8af1023d645e5b1e5d6c74eff0baaade11e615d0381cb43af31584109c5d9d997daa816ae990786957f2620a3e016bc4335a98c727c5e11e7c7
+  data.tar.gz: 3f7b89e018d6535577e9c460947c8278f2a3cc16e34ae5cb99ed6965b24fbeb3026e8db0bc98a80fa86521dfac57bebe735805bcea2b7bad6d5ea77fdd1119e4

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -0,0 +1,38 @@
+import classnames from 'classnames'
+import React, { useContext } from 'react'
+import AnimateHeight from 'react-animate-height'
+import { buildCss } from '../../utilities/props'
+import { globalProps } from '../../utilities/globalProps'
+
+import CollapsibleContext from '../context'
+
+export type CollapsibleContentProps = {
+  children?: React.ReactNode[] | React.ReactNode | string,
+  className?: string,
+  padding?: string,
+}
+
+const CollapsibleContent = ({
+  children,
+  className,
+  padding = 'md',
+  ...props
+}: CollapsibleContentProps) => {
+  const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
+  const contentCSS = buildCss('pb_collapsible_content_kit')
+  const contentSpacing = globalProps(props, { padding })
+
+  return (
+    <AnimateHeight
+        duration={400}
+        height={context.collapsed ? 0 : 'auto'}
+        id="bottom-section"
+    >
+      <div className={classnames(contentCSS, className, contentSpacing)}>
+        {children}
+      </div>
+    </AnimateHeight>
+  )
+}
+
+export default CollapsibleContent

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable react/no-multi-comp */
+
+import classnames from 'classnames'
+import React, { useContext } from 'react'
+import { buildCss } from '../../utilities/props'
+import { globalProps } from '../../utilities/globalProps'
+
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import CollapsibleContext from '../context'
+
+
+type colorMap = {
+  default: string,
+  light: string,
+  lighter: string,
+  link: string,
+  error: string,
+  success: string
+}
+
+const colorMap = {
+  default: "#242B42",
+  light: "#687887",
+  lighter: "#C1CDD6",
+  link: "#0056CF",
+  error: "#FF2229",
+  success: "#00CA74",
+}
+
+type CollapsibleMainProps = {
+  children: React.ReactNode[] | React.ReactNode,
+  className?: string,
+  padding?: string,
+  cursor?: string,
+
+}
+type IconColors =  "default" | "light" | "lighter" | "link" | "error" | "success"
+
+type IconProps = {
+  collapsed: boolean | (()=> void)
+  iconColor?: IconColors
+  iconSize?: string | (() => void)
+}
+
+const Icon = ({ collapsed, iconSize, iconColor }: IconProps) => {
+  const direction = collapsed ? 'down' : 'up'
+  const size = iconSize
+  const color = colorMap[iconColor]
+
+  return (
+    <div
+        className="icon_wrapper"
+        key={direction}
+        style={{ verticalAlign: 'middle', color: color }}
+    >
+      <i className={`far fa-chevron-${direction} fa-fw ${size && `fa-${size}`}`} />
+    </div>
+  )
+}
+
+const CollapsibleMain = ({
+  children,
+  className,
+  cursor = 'pointer',
+  padding = 'md',
+  ...props
+}: CollapsibleMainProps): React.ReactElement=> {
+  const context: {[key: string]: IconColors | (() => void)} | boolean = useContext(CollapsibleContext)
+  const mainCSS = buildCss('pb_collapsible_main_kit')
+  const mainSpacing = globalProps(props, { cursor, padding })
+
+  return (
+    <div className={classnames(mainCSS, className, mainSpacing)}>
+      <div onClick={context.collapse as (() => void)}>
+        <Flex
+            spacing="between"
+            vertical="center"
+        >
+          <FlexItem>{children}</FlexItem>
+          <FlexItem>
+            <Icon
+                collapsed={context.collapsed as () => void}
+                iconColor={context.iconColor as IconColors}
+                iconSize={context.iconSize}
+            />
+            </FlexItem>
+        </Flex>
+      </div>
+    </div>
+  )
+}
+
+export default CollapsibleMain

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss

@@ -0,0 +1,33 @@
+// Calendar Icon Styles
+.cal_icon_wrapper {
+  pointer-events: none;
+  position: absolute;
+  top: $space_md + 2;
+  right: 0;
+  border-left: 1px solid $border_light;
+  width: $space_xl + $space_xs;
+  height: $space_xl + 5;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: $space_sm - 1;
+  color: $text_lt_light;
+  @media (hover: hover) {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  &.dark {
+    color: $white;
+    border-color: $border_dark;
+  }
+  &.no_label_shift {
+    top: 0;
+  }
+  &.error {
+    border-left-color: $error;
+  }
+}
+.cal_icon {
+  width: $space_sm;
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss

@@ -0,0 +1,78 @@
+// Day and Range Styles
+.flatpickr-day {
+  user-select: none;
+  @media (hover: hover) {
+    &:hover {
+      transition-duration: $transition_short;
+      transition-timing-function: $easeIn;
+      background-color: #F6FAFF;
+      border-color: #F6FAFF;
+      box-shadow: $shadow_deep;
+    }
+  }
+}
+.flatpickr-day.today {
+  border: none;
+  font-weight: $bold;
+  color: $charcoal;
+  &.selected {
+    color: $text_dk_default;
+  }
+}
+.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
+  border-radius: $space_xl + 10;
+  background-color: $primary;
+  border-color: $primary;
+  box-shadow: $shadow_deep;
+  font-weight: $bold;
+}
+.flatpickr-day.startRange {
+  box-shadow: $space_sm + 1 0 0 #F7FBFF
+}
+.flatpickr-day.endRange {
+  box-shadow: -$space_sm 0 0 #F7FBFF
+}
+.flatpickr-day.inRange {
+  background-color: #F7FBFF;
+  border-color: transparent;
+  box-shadow: -$space_xs + 4 0 0 #F7FBFF, $space_xs - 3 0 0 #F7FBFF;
+}
+/*
+Plugin author didn't consider providing a class context, so
+instead we have to use the id! ¯\_(ツ)_/¯
+*/
+#cal-week-date-picker {
+  .flatpickr-day.inRange:not(.selected) {
+    &:nth-of-type(1),
+    &:nth-of-type(7n+1) {
+      border-radius: 30px 0 0 30px;
+    }
+    &:nth-of-type(7n) {
+      border-radius: 0 30px 30px 0;
+    }
+  }
+  .flatpickr-day.inRange {
+    &.selected {
+      background-color: $primary;
+      box-shadow: none;
+      color: #ffffff;
+    }
+  }
+  .flatpickr-day.selected:hover {
+    transition: none;
+  }
+}
+.flatpickr-innerContainer {
+  overflow: visible;
+}
+.flatpickr-days {
+  overflow: visible;
+}
+// Weekday Styling
+div.flatpickr-weekdays {
+  margin-top: $space_xs;
+}
+span.flatpickr-weekday {
+  @include caption;
+  user-select: none;
+}