RubyGems - playbook_ui - Versions diffs - 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.0 - Mend

playbook_ui 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (562) hide show

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb DELETED Viewed

@@ -1,39 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  label: "Date Picker",
-  picker_id: "date-picker-onclose",
-  margin_bottom: "lg"
-}) %>
-<%= pb_rails("caption", props: { text: "Date Object" }) %>
-<%= pb_rails("body", props: {
-  label: "Date Object",
-  text: "Select Date",
-  margin_bottom: "lg",
-  id: "date-picker-onclose-object",
-}) %>
-<%= pb_rails("caption", props: { text: "Date String" }) %>
-<%= pb_rails("body", props: {
-  label: "Date String",
-  text: "Select Date",
-  margin_bottom: "lg",
-  id: "date-picker-onclose-string",
-}) %>
-<%= javascript_tag do %>
-  window.addEventListener("DOMContentLoaded", () => {
-    <%# Access flatpickr instance with picker id and assign it a variable %>
-    const fp = document.querySelector("#date-picker-onclose")._flatpickr
-    <%# Define Hook %>
-    const closeHook = (selectedDates, dateStr) => {
-      const object = document.querySelector('#date-picker-onclose-object')
-      object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
-      const string = document.querySelector('#date-picker-onclose-string')
-      string.textContent = dateStr
-    }
-    <%# Push one or more hooks to onClose config array %>
-    fp.config.onClose.push(closeHook)
-  })
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx DELETED Viewed

@@ -1,184 +0,0 @@
-import React, { useState } from "react";
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-// Initial items to be dragged
-const dataShadow = [
-  {
-    id: "51",
-    text: "Task 1",
-  },
-  {
-    id: "52",
-    text: "Task 2",
-  },
-  {
-    id: "53",
-    text: "Task 3",
-  },
-];
-const dataOutline = [
-  {
-    id: "61",
-    text: "Task 1",
-  },
-  {
-    id: "62",
-    text: "Task 2",
-  },
-  {
-    id: "63",
-    text: "Task 3",
-  },
-];
-const dataLine = [
-  {
-    id: "71",
-    text: "Task 1",
-  },
-  {
-    id: "72",
-    text: "Task 2",
-  },
-  {
-    id: "73",
-    text: "Task 3",
-  },
-];
-const DraggableDropZones = (props) => {
-  const [initialShadowState, setInitialShadowState] = useState(dataShadow);
-  const [initialOutlineState, setInitialOutlineState] = useState(dataOutline);
-  const [initialLineState, setInitialLineState] = useState(dataLine);
-  return (
-    <>
-    <Flex justify="between"
-        {...props}
-    >
-      <FlexItem marginRight="xl">
-        <DraggableProvider
-            dropZone={{type: "shadow"}}
-            initialItems={dataShadow}
-            onReorder={(items) => setInitialShadowState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Shadow"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialShadowState.map(({ id, text }) => (
-              <Card dragId={id}
-                  draggableItem
-                  key={id}
-                  marginBottom="xs"
-                  padding="xs"
-                  {...props}
-              >
-                <Flex alignItems="stretch"
-                    flexDirection="column"
-                >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-      <FlexItem marginRight="xl">
-        <DraggableProvider
-            dropZone={{type: "outline"}}
-            initialItems={dataOutline}
-            onReorder={(items) => setInitialOutlineState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Outline"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialOutlineState.map(({ id, text }) => (
-              <Card
-                  dragId={id}
-                  draggableItem
-                  key={id}
-                  marginBottom="xs"
-                  padding="xs"
-                  {...props}
-              >
-                <Flex
-                    alignItems="stretch"
-                    flexDirection="column"
-                >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-      <FlexItem>
-        <DraggableProvider
-            dropZone={{type: "line"}}
-            initialItems={dataLine}
-            onReorder={(items) => setInitialLineState(items)}
-        >
-            <Caption
-                marginBottom="xs"
-                textAlign="center"
-            >
-              {"Line"}
-            </Caption>
-            <Draggable.Container
-                htmlOptions={{style:{ width: "200px"}}}
-                {...props}
-            >
-            {initialLineState.map(({ id, text }) => (
-              <Card dragId={id}
-                  draggableItem
-                  key={id}
-                  marginBottom="xs"
-                  padding="xs"
-                  {...props}
-              >
-                <Flex alignItems="stretch"
-                    flexDirection="column"
-                >
-                  <Body
-                      text={text}
-                      {...props}
-                  />
-                </Flex>
-              </Card>
-            ))}
-            </Draggable.Container>
-        </DraggableProvider>
-      </FlexItem>
-    </Flex>
-    </>
-  );
-};
-export default DraggableDropZones;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md DELETED Viewed

@@ -1,5 +0,0 @@
-The Draggable kit allows you to choose the style of drop zones that appear when dragging an item.
-By default, the Draggable kit utilizes the "ghost" style for drop zones, but you can also choose between "shadow", "outline", and "line".
-Additionally, when using the "line" style, be sure to set the proper `direction` attribute within the `dropZone` prop depending on the orentation of your draggable view. By default, this attribute is set to "vertical", but can also be used with a "horizontal" direction. The `direction` attribute only applies to the "line" style and will not affect other drop zone styles.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx DELETED Viewed

@@ -1,97 +0,0 @@
-import React, { useState } from "react";
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
-import Caption from '../../pb_caption/_caption'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-// Initial items to be dragged
-const dataPrimary = [
-  {
-    id: "81",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "82",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "83",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-];
-const dataPurple = [
-  {
-    id: "91",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "92",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "93",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-];
-const DraggableDropZonesColors = (props) => {
-  const [initialPrimaryState, setInitialPrimaryState] = useState(dataPrimary);
-  const [initialPurpleState, setInitialPurpleState] = useState(dataPurple);
-  return (
-    <>
-    <Caption marginBottom="xs">
-      Primary
-    </Caption>
-    <DraggableProvider
-        dropZone={{type: "shadow", color: "primary"}}
-        initialItems={dataPrimary}
-        onReorder={(items) => setInitialPrimaryState(items)}
-    >
-        <Draggable.Container {...props}>
-        <Flex>
-            {initialPrimaryState.map(({ id, url }) => (
-              <Draggable.Item dragId={id}
-                  key={id}
-                  marginRight="sm"
-              >
-                <Image alt={id}
-                    size="md"
-                    url={url}
-                />
-              </Draggable.Item>
-            ))}
-         </Flex>
-        </Draggable.Container>
-    </DraggableProvider>
-    <Caption marginBottom="xs">
-      Purple
-    </Caption>
-    <DraggableProvider
-        dropZone={{type: "outline", color: "purple"}}
-        initialItems={dataPurple}
-        onReorder={(items) => setInitialPurpleState(items)}
-    >
-        <Draggable.Container {...props}>
-        <Flex>
-            {initialPurpleState.map(({ id, url }) => (
-              <Draggable.Item dragId={id}
-                  key={id}
-                  marginRight="sm"
-              >
-                <Image alt={id}
-                    size="md"
-                    url={url}
-                />
-              </Draggable.Item>
-            ))}
-         </Flex>
-        </Draggable.Container>
-    </DraggableProvider>
-    </>
-  );
-};
-export default DraggableDropZonesColors;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md DELETED Viewed

	@@ -1 +0,0 @@
1	- By default, the Draggable kit sets the default color of drop zones to "neutral" (or "primary" if using the "line" style.)

data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss DELETED Viewed

@@ -1,38 +0,0 @@
-.pb_empty_state_kit {
-  .sm-state-vertical {
-    width: 150px;
-  }
-  .md-state-vertical {
-    width: 300px;
-  }
-  .lg-state-vertical {
-    width: 450px;
-  }
-  .sm-state-horizontal {
-    width: max-content;
-    max-width: 400px;
-    .pb_flex_item_kit {
-      align-self: end;
-    }
-  }
-  .md-state-horizontal {
-    width: max-content;
-    max-width: 600px;
-    .pb_flex_item_kit {
-      align-self: end;
-    }
-  }
-  .lg-state-horizontal {
-    width: max-content;
-    .pb_flex_item_kit {
-      align-self: end;
-    }
-  }
-}

data/app/pb_kits/playbook/pb_empty_state/_empty_state.tsx DELETED Viewed

@@ -1,213 +0,0 @@
-import React from "react"
-import ReactDOMServer from "react-dom/server"
-import classnames from "classnames"
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
-import { globalProps } from "../utilities/globalProps"
-import Title from "../pb_title/_title"
-import Body from "../pb_body/_body"
-import Button from "../pb_button/_button"
-import Detail from "../pb_detail/_detail"
-import Flex from "../pb_flex/_flex"
-import FlexItem from "../pb_flex/_flex_item"
-import Image from "../pb_image/_image"
-import computer from "./docs/default_image/utils"
-type EventHandler = (React.MouseEventHandler<HTMLElement>)
-type EmptyStateProps = {
-  aria?: { [key: string]: string },
-  alignment?: "center" | "left" | "right",
-  className?: string,
-  data?: { [key: string]: string },
-  description?: string,
-  header?: string,
-  id?: string,
-  image?: string,
-  linkButton?: string,
-  onLinkButtonClick?: EventHandler,
-  onPrimaryButtonClick?: EventHandler,
-  orientation?: "horizontal" | "vertical",
-  primaryButton?: string,
-  size?: "sm" | "md" | "lg",
-}
-const EmptyState = (props: EmptyStateProps) => {
-  const {
-    aria = {},
-    alignment = "center",
-    className,
-    data = {},
-    description,
-    header = "",
-    id,
-    image,
-    linkButton,
-    onLinkButtonClick,
-    onPrimaryButtonClick,
-    orientation = "vertical",
-    primaryButton,
-    size = "md",
-  } = props
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss("pb_empty_state_kit"), globalProps(props), className)
-  const renderContent = () => {
-    const sizeConfigs = {
-      sm: {
-        vertical: {
-          imageWidth: "100px",
-          titleSize: 4,
-          titlePadding: "xxs",
-          descriptionPadding: "sm",
-          buttonSize: "sm",
-          buttonMargin: "xs",
-          scssClassName: "sm-state-vertical",
-          column: "column",
-        },
-        horizontal: {
-          imageWidth: "100px",
-          titleSize: 4,
-          titlePadding: "xxs",
-          descriptionPadding: "sm",
-          buttonSize: "sm",
-          buttonMargin: "xs",
-          scssClassName: "sm-state-horizontal",
-          column: "",
-        },
-      },
-      md: {
-        vertical: {
-          imageWidth: "140px",
-          titleSize: 3,
-          titlePadding: "xs",
-          descriptionPadding: "md",
-          buttonSize: "md",
-          buttonMargin: "sm",
-          scssClassName: "md-state-vertical",
-          column: "column",
-        },
-        horizontal: {
-          imageWidth: "140px",
-          titleSize: 3,
-          titlePadding: "xs",
-          descriptionPadding: "md",
-          buttonSize: "md",
-          buttonMargin: "sm",
-          scssClassName: "md-state-horizontal",
-          column: "",
-        },
-      },
-      lg: {
-        vertical: {
-          imageWidth: "100%",
-          titleSize: 1,
-          titlePadding: "sm",
-          descriptionPadding: "lg",
-          buttonSize: "md",
-          buttonMargin: "md",
-          scssClassName: "lg-state-vertical",
-          column: "column",
-        },
-        horizontal: {
-          imageWidth: "100%",
-          titleSize: 2,
-          titlePadding: "sm",
-          descriptionPadding: "lg",
-          buttonSize: "md",
-          buttonMargin: "md",
-          scssClassName: "lg-state-horizontal",
-          column: "",
-        },
-      },
-    };
-    const configs = sizeConfigs[size]?.[orientation]
-    const alignFlex = alignment === "center" ? "center" : alignment === "right" ? "end" : "start"
-    const alignText = alignment === "center" ? "center" : alignment === "right" ? "right" : undefined
-    const getSvgAsDataUrl = () => {
-      const svgString = ReactDOMServer.renderToStaticMarkup(computer)
-      const encodedSvg = encodeURIComponent(svgString)
-      return `data:image/svg+xml,${encodedSvg}`
-    }
-    const layout = (
-      <div {...ariaProps}
-          {...dataProps}
-          className={classes}
-          id={id}
-      >
-        <Flex align={alignFlex}
-            className={configs.scssClassName}
-            orientation={configs.column as "column" | "row" | undefined}
-            paddingLeft="xl"
-            paddingRight="xl"
-            vertical="center"
-        >
-          { image && image === 'default' ? (
-            <Image
-                alt="test"
-                htmlOptions={{ width: configs.imageWidth, height: "auto", alignment: "start" }}
-                url={getSvgAsDataUrl()}
-            />
-          ) : image && image ? (
-            <Image
-                alt="test"
-                htmlOptions={{ width: configs.imageWidth, height: "auto", alignment: "start" }}
-                url={image}
-            />
-          ) : null}
-          <FlexItem >
-            <Title paddingBottom={configs.titlePadding as "xxs" | "xs" | "sm" | undefined}
-                size={configs.titleSize as 1 | 2 | 3 | 4 | undefined}
-                text={header}
-                textAlign={alignText}
-            />
-            { size !== "sm" ? (
-              <Body paddingBottom={configs.descriptionPadding as "sm" | "md" | "lg" | undefined}
-                  text={description}
-                  textAlign={alignText}
-              />
-            ) : (
-              <Detail paddingBottom={configs.descriptionPadding as "sm" | "md" | "lg" | undefined}
-                  text={description}
-                  textAlign={alignText}
-              />
-            )}
-            { primaryButton ? (
-                <Button
-                    marginBottom={configs.buttonMargin as "xs" | "sm" | "md" | undefined}
-                    onClick={onPrimaryButtonClick}
-                    size={configs.buttonSize as "sm" | "md" | undefined}
-                    text={primaryButton}
-                    variant="primary"
-                    width="100%"
-                />
-            ) : null }
-            { linkButton ? (
-                <Button onClick={onLinkButtonClick}
-                    size={configs.buttonSize as "sm" | "md" | undefined}
-                    text={linkButton}
-                    variant="link"
-                    width="100%"
-                />
-            ) : null }
-          </FlexItem>
-        </Flex>
-      </div>
-    )
-    return layout
-  }
-  return renderContent()
-}
-export default EmptyState

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx DELETED Viewed

@@ -1,38 +0,0 @@
-import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
-const EmptyStateAlignment = (props) => (
-  <Flex align="center"
-      spacing="evenly"
-  >
-      <EmptyState
-          {...props}
-          alignment="left"
-          description="Body text goes into detail with possible steps for user to take"
-          header="Title Explains"
-          image="default"
-          primaryButton="Next Action"
-          size="md"
-      />
-      <EmptyState
-          {...props}
-          alignment="center"
-          description="Body text goes into detail with possible steps for user to take"
-          header="Title Explains"
-          image="default"
-          primaryButton="Next Action"
-          size="md"
-      />
-      <EmptyState
-          {...props}
-          alignment="right"
-          description="Body text goes into detail with possible steps for user to take"
-          header="Title Explains"
-          image="default"
-          primaryButton="Next Action"
-          size="md"
-      />
-  </Flex>
-)
-export default EmptyStateAlignment

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx DELETED Viewed

@@ -1,17 +0,0 @@
-import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
-const EmptyStateDefault = (props) => (
-  <Flex align="center"
-      orientation="column"
-  >
-    <EmptyState
-        {...props}
-        description="Body text goes into detail with possible steps for user to take"
-        header="Title Explains"
-        image="default"
-    />
-  </Flex>
-)
-export default EmptyStateDefault

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx DELETED Viewed

@@ -1,21 +0,0 @@
-import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
-const EmptyStateOrientation = (props) => (
-  <Flex align="center"
-      orientation="column"
-  >
-    <EmptyState
-        {...props}
-        alignment="left"
-        description="Body text goes into detail with possible steps for user to take"
-        header="Title Explains"
-        image="default"
-        orientation="horizontal"
-        primaryButton="Next Action"
-        size="lg"
-    />
-  </Flex>
-)
-export default EmptyStateOrientation

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx DELETED Viewed

@@ -1,35 +0,0 @@
-import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
-const EmptyStateSize = (props) => (
-  <Flex align="center"
-      spacing="evenly"
-  >
-      <EmptyState
-          {...props}
-          alignment="center"
-          description="Body text goes into detail with possible steps for user to take"
-          header="Title Explains"
-          image="default"
-          linkButton="Alt Action"
-          onLinkButtonClick={() => alert("link button clicked!")}
-          onPrimaryButtonClick={() => alert("primary button clicked!")}
-          primaryButton="Next Action"
-          size="sm"
-      />
-      <EmptyState
-          {...props}
-          alignment="center"
-          description="Body text goes into detail with possible steps for user to take"
-          header="Title Explains"
-          image="default"
-          linkButton="Alt Action"
-          onLinkButtonClick={() => alert("link button clicked!")}
-          onPrimaryButtonClick={() => alert("primary button clicked!")}
-          primaryButton="Next Action"
-          size="lg"
-      />
-  </Flex>
-)
-export default EmptyStateSize