playbook_ui 14.19.0.pre.alpha.play2125phonenumberinputcountrysearcherrorstylefix7698 → 14.19.0.pre.rc.0

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts

@@ -1,110 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const lineGraphTheme = {
-  title: {
-    text: "",
-    style: {
-      color: colors.text_lt_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
-  subtitle: {
-    text: "" ,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_base,
-    },
-  },
-  chart: {
-    type: "line",
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    followPointer: true,
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  plotOptions: {
-    line: {
-      dataLabels: {
-        enabled: false,
-      },
-    },
-  },
-  credits: { enabled: false },
-  legend: { enabled: false },
-  colors: [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7,
-  ],
-  xAxis: {
-    gridLineWidth: 0,
-    lineColor: colors.border_light,
-    tickColor: colors.border_light,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        color: colors.text_lt_default,
-        fontFamily: typography.font_family_base,
-        fontWeight: typography.regular,
-        fontSize: typography.heading_4,
-      },
-    },
-  },
-  yAxis: {
-    alternateGridColor: undefined as string | undefined,
-    minorTickInterval: null as number | null,
-    gridLineColor: colors.border_light,
-    minorGridLineColor: colors.border_light,
-    lineWidth: 0,
-    tickWidth: 0,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-  },
-}
-
-export default lineGraphTheme;

data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb

@@ -1,9 +0,0 @@
-<%= pb_rails("message", props: {
-  label: "Mike Bishop",
-  message: "So long, and thanks for all the fish!",
-  timestamp: "3 months ago",
-  avatar_name: "Mike Bishop",
-  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
-  avatar_status: "offline",
-  avatar_grayscale: true,
-}) %>

data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx

@@ -1,21 +0,0 @@
-import React from "react"
-
-import Message from "../_message"
-
-const MessageGrayscale = (props) => {
-  return (
-    <Message
-        avatarGrayscale
-        avatarName='Mike Bishop'
-        avatarStatus='offline'
-        avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
-        borderRadius='rounded'
-        label='Mike Bishop'
-        message='So long, and thanks for all the fish!'
-        timestamp='3 months ago'
-        {...props}
-    />
-  )
-}
-
-export default MessageGrayscale

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-    country_search: true, 
-    id: "country-search",
-}) %>
-
-<%= pb_rails("phone_number_input", props: {
-    country_search: true, 
-    id: "country-search-limited",
-    only_countries: ["br", "us", "ph", "gb"],
-}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import PhoneNumberInput from '../_phone_number_input'
-
-const PhoneNumberInputCountrySearch = (props) => (
-    <>
-        <PhoneNumberInput
-            countrySearch
-            id='country-search'
-            {...props} 
-        />
-        <PhoneNumberInput
-            countrySearch
-            id='country-search-limited'
-            onlyCountries={["br", "us", "ph", "gb"]}
-            {...props} 
-        />
-    </>
-)
-
-export default PhoneNumberInputCountrySearch

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md

@@ -1 +0,0 @@
-Set `country_search` / `countrySearch` to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb

@@ -1,46 +0,0 @@
-<%= pb_rails("flex", props: {
-    dark: true,
-    orientation: "row",
-    vertical: "center",
-    margin_bottom: "md"
-    }) do %>
-    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
-    &nbsp;
-    <%= pb_rails("circle_icon_button", props: {
-        variant: "secondary",
-        icon: "info",
-        id: "append-to-popover-1"
-    }) %>
-    <%= pb_rails("popover", props: {
-        trigger_element_id: "append-to-popover-1",
-        tooltip_id: "append-to-tooltip-1",
-        offset: true,
-        position: "top",
-        append_to: "parent",
-    }) do %>
-        I'm a popover. I have been appended to my parent element.
-    <% end %>
-<% end %>
-
-<%= pb_rails("flex", props: {
-    dark: true,
-    orientation: "row",
-    vertical: "center"
-    }) do %>
-    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
-    &nbsp;
-    <%= pb_rails("circle_icon_button", props: {
-        variant: "secondary",
-        icon: "info",
-        id: "append-to-popover-2"
-    }) %>
-    <%= pb_rails("popover", props: {
-        trigger_element_id: "append-to-popover-2",
-        tooltip_id: "append-to-tooltip-2",
-        offset: true,
-        position: "top",
-        append_to: ".kit-show-wrapper",
-    }) do %>
-        I'm a popover. I have been appended to the .kit-show-wrapper.
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md

@@ -1 +0,0 @@
-By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `append_to` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb

@@ -1,6 +0,0 @@
-<%= pb_rails("user", props: {
-  name: "Anna Black",
-  title: "Remodeling Consultant",
-  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-  avatar_grayscale: true,
-}) %>

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import User from '../../pb_user/_user'
-
-const UserGrayscale = (props) => {
-  return (
-    <User
-        avatarGrayscale
-        avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-        name="Anna Black"
-        title="Remodeling Consultant"
-        {...props}
-    />
-  )
-}
-
-export default UserGrayscale