playbook_ui 13.27.0 → 13.28.0.pre.alpha.PBNTR297gradientoverlay3029

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default_swift.md

@@ -0,0 +1,39 @@
+![Date-Time-Default](https://github.com/powerhome/playbook-swift/assets/54749071/f9ea63f9-81bd-41a9-8171-8a213c55ccfe)
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateTime(
+    dateVariant: .dayDate(showYear: true),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    timeZoneIdentifier: "EST"
+  )
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .standard,
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    showTimeZone: true,
+    timeZoneIdentifier: "GMT+9"
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_props_swift.md

@@ -0,0 +1,15 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **dateTime** | `Date` | Sets current date. | | |
+| **iconSize** | `PBIcon.IconSize` | Allows user to change the size of the clock icon. | `.x3` | `.small` `.medium` `.large` |
+| **dateVariant** | `PBDate.Variant` | Allows user to choose how they would like the date to be displayed | `.dayDate(showYear: false)` | `.short` `.dayDate(showYear: false)` `.standard` `.withIcon(isStandard: true)` `.withIcon(isStandard: false)` |
+| **timeVariant** | `PBTime.Variant` | Allows user to choose how they would like the time to be displayed | `.time` | `.time` `.clockIcon` `.timeZone` `.iconTimeZone` `.withTimeZoneHeader` |
+| **fontSize** | `PBFont` | Allows user to change the size of the text | `.caption` | `.subcaption` `.caption` `.body` |
+| **isLowercase** | `Bool` | Determines whether or not am/pm is capitalized | `false` | `true` `false` |
+| **isTimeBold** | `Bool` | Determines whether or not the time is bold | `false` | `true` `false` |
+| **isTimeZoneBold** | `Bool` | Determines whether or not the time zone is bold | `false` | `true` `false` |
+| **zone** | `PBTime.Zones` | Allows the user to set the time zone | `.east` | `.east` `.central` `.mountain` `.pacific` `.gmt` |
+| **showTimeZone** | `Bool` | Determines whether or not the time zone is displayed | `false` | `true` `false` |
+| **timeZoneIdentifier** | `String` | String that the time kit utilizes to calculate the current time and time zone | | |
+| **showIcon** | `Bool` | Determines whether or not the clock icon is displayed | `false` | `true` `false` |

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size_swift.md

@@ -0,0 +1,78 @@
+![Date-Time-Sizes](https://github.com/powerhome/playbook-swift/assets/54749071/59b2394d-cf25-46b5-a634-ca0721a7b3b0)
+```swift
+VStack(alignment: .leading, spacing: Spacing.xSmall) {
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false), 
+    timeVariant: .iconTimeZone,
+    fontSize: .caption,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false),
+    timeVariant: .iconTimeZone,
+    fontSize: .caption,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    fontSize: .caption,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    fontSize: .caption,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+  Spacer()
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .dayDate(showYear: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z",
+    showIcon: true
+  )
+  PBDateTime(
+    dateVariant: .short(showIcon: false),
+    timeVariant: .iconTimeZone,
+    isLowercase: true,
+    isTimeBold: true,
+    zone: .utc,
+    showTimeZone: true,
+    timeZoneIdentifier: "2012-08-02T17:49:29Z"
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_time/docs/example.yml

@@ -9,3 +9,9 @@ examples:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
+
+  swift:
+  - date_time_default_swift: Default
+  - date_time_alignment_swift: Alignment
+  - date_time_size_swift: Size
+  - date_time_props_swift: ""

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("title", props: { text: object.day_month, size: 4, dark: object.dark }) %>
   <%= pb_rails("body", props: { text: object.year, size: 4, color: "light", dark: object.dark }) %>
 <% end %>

data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss

@@ -15,7 +15,7 @@ $pb_dark_detail_colors: (
   light:          $text_dk_light,
   default:        $text_dk_default,
   lighter:        $text_dk_lighter,
-  link:           $primary,
+  link:           $active_dark,
   error:          $error_dark,
   success:        $text_dk_success_sm,
 );

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -23,11 +23,11 @@
         <ul>
           <% hide_button = type == "rails" ? 'flex' : 'none' %>
             <li>
-            <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", variant: "link", size: "sm", display: hide_button }) %>
+            <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", classname: dark ? "dark" : "", variant: "link", size: "sm", display: hide_button }) %>
             </li>
           <li>
-            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
-            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
+            <%= pb_rails("button", props: { icon: "code", classname: dark ? "dark" : "", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
+            <%= pb_rails("button", props: { icon: "code", classname: dark ? "dark" : "", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
           </li>
         </ul>
       </div>

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -0,0 +1,10 @@
+@import "../tokens/colors";
+
+.pb_draggable {
+  .is_dragging {
+    opacity: 40%;
+  }
+  .active {
+    opacity: 60%;
+  }
+}

data/app/pb_kits/playbook/pb_draggable/_draggable.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import classnames from "classnames";
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+import DraggableContainer from "./subcomponents/DraggableContainer";
+import DraggableItem from "./subcomponents/DraggableItem";
+
+type DraggableProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  children?: React.ReactNode;
+  data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string;
+};
+
+const Draggable = (props: DraggableProps) => {
+  const {
+    aria = {},
+    className,
+    children,
+    data = {},
+    htmlOptions = {},
+    id,
+  } = props;
+
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+
+  const classes = classnames(
+    buildCss("pb_draggable"),
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div {...ariaProps} 
+        {...dataProps} 
+        {...htmlProps}
+        className={classes} 
+        id={id}
+    >
+      {children}
+    </div>
+  );
+};
+
+Draggable.Container = DraggableContainer;
+Draggable.Item = DraggableItem;
+
+export default Draggable;

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -0,0 +1,92 @@
+import React, { createContext, useState, useContext, useEffect } from "react";
+
+const DragContext = createContext<any>({});
+
+export const DraggableContext = () => {
+  return useContext(DragContext);
+};
+
+export const DraggableProvider = ({ children, initialItems, onChange }: any) => {
+  const [items, setItems] = useState([]);
+  const [dragData, setDragData] = useState<{ [key: string]: any }>({});
+  const [isDragging, setIsDragging] = useState("");
+  const [activeContainer, setActiveContainer] = useState("");
+
+  useEffect(() => {
+    setItems(initialItems);
+  }, [initialItems]);
+
+  useEffect(() => {
+    onChange(items);
+  }, [items]);
+
+  const handleDragStart = (id: string, container: string) => {
+    setDragData({ id: id, initialGroup: container });
+    setIsDragging(id);
+  };
+
+  const handleDragEnter = (id: string, container: string) => {
+    if (dragData?.id !== id) {
+      const newItems = [...items];
+      const draggedItem = newItems.find((item) => item.id === dragData.id);
+      const draggedIndex = newItems.indexOf(draggedItem);
+      const targetIndex = newItems.findIndex((item) => item.id === id);
+
+      newItems.splice(draggedIndex, 1);
+      newItems.splice(targetIndex, 0, draggedItem);
+
+      setItems(newItems);
+      setDragData({ id: dragData.id, initialGroup: container });
+    }
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging("");
+    setActiveContainer("");
+  };
+
+  const changeCategory = (itemId: string, container: string) => {
+    const updatedItems = items.map((item) => {
+      if (item.id === itemId) {
+        return { ...item, container: container };
+      }
+      return item;
+    });
+
+    setItems(updatedItems);
+  };
+
+  const handleDrop = (container: string) => {
+    setIsDragging("");
+    setActiveContainer("");
+    const selected = dragData.id;
+    changeCategory(selected, container);
+  };
+
+  const handleDragOver = (e: Event, container: string) => {
+    e.preventDefault();
+    setActiveContainer(container);
+  };
+
+  
+
+  const contextValue = {
+    items,
+    setItems,
+    dragData,
+    setDragData,
+    isDragging,
+    setIsDragging,
+    activeContainer,
+    setActiveContainer,
+    handleDragStart,
+    handleDragEnter,
+    handleDragEnd,
+    handleDrop,
+    handleDragOver,
+  };
+
+  return (
+    <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
+  );
+};

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { SelectableList, Draggable, DraggableProvider } from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "1",
+    text: "Task 1",
+  },
+  {
+    id: "2",
+    text: "Task 2",
+  },
+  {
+    id: "3",
+    text: "Task 3",
+  },
+  {
+    id: "4",
+    text: "Task 4",
+  },
+];
+
+const DraggableDefault = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <DraggableProvider initialItems={data}
+        onChange={(items) => setInitialState(items)}
+    >
+      <Draggable
+          {...props}
+      >
+        <Draggable.Container>
+          <SelectableList variant="checkbox">
+            {initialState.map(({ id, text }) => (
+              <Draggable.Item id={id} 
+                  key={id}
+              >
+                <SelectableList.Item label={text} 
+                    name={id} 
+                    value={id} 
+                />
+              </Draggable.Item>
+            ))}
+          </SelectableList>
+        </Draggable.Container>
+      </Draggable>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableDefault;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+import {
+  Flex,
+  Caption,
+  Card,
+  FlexItem,
+  Badge,
+  Avatar,
+  Title,
+  Body,
+  Draggable,
+  DraggableProvider,
+} from "../../";
+
+// Initial groups to drag between
+const containers = ["To Do", "In Progress", "Done"];
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "1",
+    container: "To Do",
+    title: "Task 1",
+    description: "Bug fixes",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "2",
+    container: "To Do",
+    title: "Task 2",
+    description: "Documentation",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "3",
+    container: "In Progress",
+    title: "Task 3",
+    description: "Add a variant",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "4",
+    container: "To Do",
+    title: "Task 4",
+    description: "Add jest tests",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "5",
+    container: "Done",
+    title: "Task 5",
+    description: "Alpha testing",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  },
+  {
+    id: "6",
+    container: "In Progress",
+    title: "Task 6",
+    description: "Release",
+    assignee_name: "Sally Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
+  },
+];
+
+const DraggableMultipleContainer = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  const badgeProperties = (container) => {
+    switch (container) {
+      case "To Do":
+        return { text: "queue", color: "warning" };
+      case "In Progress":
+        return { text: "progress", color: "primary" };
+      default:
+        return { text: "done", color: "success" };
+    }
+  };
+
+  return (
+    <DraggableProvider initialItems={data}
+        onChange={(items) => setInitialState(items)}
+    >
+      <Draggable
+          display="flex"
+          justifyContent="center"
+          {...props}
+      >
+          {containers?.map((container) => (
+            <Draggable.Container 
+                container={container}
+                key={container} 
+                padding="sm"
+            >
+                <Caption textAlign="center">{container}</Caption>
+                <Flex 
+                    alignItems="stretch"
+                    orientation="column" 
+                >
+                  {initialState
+                    .filter((item) => item.container === container)
+                    .map(
+                      ({
+                        assignee_img,
+                        assignee_name,
+                        description,
+                        id,
+                        title,
+                      }) => (
+                        <Draggable.Item 
+                            container={container}
+                            id={id} 
+                            key={id}
+                        >
+                          <Card
+                              marginBottom="sm"
+                              padding="sm"
+                          >
+                            <Flex justify="between">
+                              <FlexItem>
+                                <Flex>
+                                  <Avatar
+                                      imageUrl={assignee_img}
+                                      name={assignee_name}
+                                      size="xxs"
+                                  />
+                                  <Title paddingLeft="xs" 
+                                      size={4}
+                                      text={title}
+                                  />
+                                </Flex>
+                              </FlexItem>
+                              <Badge
+                                  marginLeft="sm"
+                                  rounded
+                                  text={badgeProperties(container).text}
+                                  variant={badgeProperties(container).color}
+                              />
+                            </Flex>
+                            <Body paddingTop="xs"
+                                text={description} 
+                            />
+                          </Card>
+                        </Draggable.Item>
+                      )
+                    )}
+                </Flex>
+            </Draggable.Container>
+          ))}
+      </Draggable>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableMultipleContainer;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx

@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+import {
+  Flex,
+  Badge,
+  Title,
+  Icon,
+  Draggable,
+  DraggableProvider,
+  Card,
+  Caption,
+} from "../../";
+
+// Initial items to be dragged
+const data = [
+  {
+    id: "1",
+    text: "Joe Black",
+  },
+  {
+    id: "2",
+    text: "Nancy White",
+  },
+  {
+    id: "3",
+    text: "Bill Green",
+  },
+];
+
+const DraggableWithCards = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <DraggableProvider
+        initialItems={data}
+        onChange={(items) => setInitialState(items)}
+    >
+      <Draggable {...props}>
+        <Draggable.Container>
+          {initialState.map(({ id, text }) => (
+            <Draggable.Item id={id} 
+                key={id}
+			>
+              <Card
+                  highlight={{ position: "side", color: "primary" }}
+                  marginBottom="xs"
+              >
+                <Flex alignItems="stretch" 
+                    flexDirection="column"
+				>
+                  <Flex gap="xs">
+                    <Title size={4} 
+                        text={text} 
+					/>
+                    <Badge 
+                        text="35-12345" 
+                        variant="primary" 
+					/>
+                  </Flex>
+
+                  <Flex 
+                      gap="sm" 
+                      spacing="between"
+                  >
+                    <Caption 
+                        size="xs" 
+                        text="8:00A" 
+					/>
+                    <Flex gap="xxs">
+                      <Caption 
+                          size="xs" 
+                          text="Township Name" 
+                      />
+                      <Caption size="xs" 
+                          text="•" 
+                      />
+                      <Caption size="xs" 
+                          text="90210" 
+                      />
+                    </Flex>
+                  </Flex>
+
+                  <Flex gap="xxs" 
+                      spacing="between"
+                  >
+                    <Flex gap="xxs">
+                      <Caption color="error" 
+                          size="xs"
+                      >
+                        <Icon icon="house-circle-exclamation" />
+                      </Caption>
+                      <Caption color="success" 
+                          size="xs">
+                        <Icon icon="file-circle-check" />
+                      </Caption>
+                    </Flex>
+                    <Flex>
+                      <Badge rounded 
+                          text="Schedule QA" 
+                          variant="warning" 
+                       />
+                      <Badge rounded 
+                          text="Flex" 
+                          variant="primary" 
+                      />
+                      <Badge rounded 
+                          text="R99" 
+                          variant="primary" 
+                      />
+                    </Flex>
+                  </Flex>
+                </Flex>
+              </Card>
+            </Draggable.Item>
+          ))}
+        </Draggable.Container>
+      </Draggable>
+    </DraggableProvider>
+  );
+};
+
+export default DraggableWithCards;