playbook_ui 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469 → 14.18.0.pre.rc.0

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_overlay/docs/_overlay_color.jsx

@@ -1,63 +0,0 @@
-import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Image from '../../pb_image/_image'
-import Flex from '../../pb_flex/_flex'
-
-const OverlayColor = () => (
-    <Flex
-        justify="around"
-        wrap
-    >
-        <Overlay
-            color="black"
-            marginBottom="xxs"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            color="black"
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_4"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            color="error"
-            marginBottom="xxs"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            color="error"
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_4"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-    </Flex>
-)
-
-export default OverlayColor

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md

@@ -1,3 +0,0 @@
-The `color` prop is used to change the color of the solid or gradient mask. Gradient overlays always start opaque and fade to transparent.
-
-NOTE: Images are set to `display: block` to remove the default inline spacing caused by line height. This ensures the image fully fills the container without unexpected gaps.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx

@@ -1,49 +0,0 @@
-import React, { useState } from 'react'
-import Overlay from '../../pb_overlay/_overlay'
-import Button from '../../pb_button/_button'
-import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
-
-const OverlayFullscreenBackground = () => {
-  const [openBackground, setOpenBackground] = useState(false)
-
-  const handleClickBackground = () => {
-    setOpenBackground(true)
-  }
-
-  const handleCloseBackground = () => {
-    setOpenBackground(false)
-  }
-
-  return (
-    <>
-      <div>
-        <Button
-            onClick={handleClickBackground}
-            text="Background Dark"
-            variant="secondary"
-        />
-
-        {openBackground && (
-          <Overlay
-              color="bg_dark"
-              fullScreen
-              gradient={false}
-              opacity="opacity_4"
-          >
-            <FixedConfirmationToast
-                closeable
-                horizontal='center'
-                onClose={handleCloseBackground}
-                open={openBackground}
-                status="tip"
-                text='Fullscreen Overlay with color set to Background Dark.'
-                vertical='top'
-            />
-          </Overlay>
-        )}
-      </div>
-    </>
-  )
-}
-
-export default OverlayFullscreenBackground

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.md

@@ -1 +0,0 @@
-The `fullScreen` prop also allows you to use `color` along with it.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx

@@ -1,81 +0,0 @@
-import React, { useState } from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Button from '../../pb_button/_button'
-import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
-
-const OverlayFullscreenOpacity = () => {
-  const [openOpacity40, setOpenOpacity40] = useState(false)
-  const [openOpacity80, setOpenOpacity80] = useState(false)
-
-  const handleClickOpacity40 = () => {
-    setOpenOpacity40(true)
-  }
-  const handleCloseOpacity40 = () => {
-    setOpenOpacity40(false)
-  }
-
-  const handleClickOpacity80 = () => {
-    setOpenOpacity80(true)
-  }
-  const handleCloseOpacity80 = () => {
-    setOpenOpacity80(false)
-  }
-
-  return (
-    <>
-      <div>
-        <Button
-            onClick={handleClickOpacity40}
-            text="40% Opacity"
-            variant="secondary"
-        />
-        {' '}
-        <Button
-            onClick={handleClickOpacity80}
-            text="80% Opacity"
-            variant="secondary"
-        />
-
-        {openOpacity40 && (
-            <Overlay
-                fullScreen
-                gradient={false}
-                opacity="opacity_4"
-            >
-              <FixedConfirmationToast
-                  closeable
-                  horizontal='center'
-                  onClose={handleCloseOpacity40}
-                  open={openOpacity40}
-                  status="tip"
-                  text='Fullscreen Overlay at 40% Opacity.'
-                  vertical='top'
-              />
-            </Overlay>
-        )}
-
-        {openOpacity80 && (
-            <Overlay
-                fullScreen
-                gradient={false}
-                opacity="opacity_8"
-            >
-              <FixedConfirmationToast
-                  closeable
-                  display="block"
-                  horizontal='center'
-                  onClose={handleCloseOpacity80}
-                  open={openOpacity80}
-                  status="tip"
-                  text='Fullscreen Overlay at 80% Opacity.'
-                  vertical='top'
-              />
-            </Overlay>
-        )}
-      </div>
-    </>
-  )
-}
-
-export default OverlayFullscreenOpacity

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md

@@ -1 +0,0 @@
-To enable the overlay to cover the full size of your screen, you can pass the `fullScreen` prop. You can also pass an opacity along with it.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx

@@ -1,39 +0,0 @@
-import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Image from '../../pb_image/_image'
-import Flex from '../../pb_flex/_flex'
-
-const OverlayGradientOpacity = () => (
-    <Flex
-        justify="around"
-        wrap
-    >
-        <Overlay
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_2"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              maxWidth="100%"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_8"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              maxWidth="100%"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-    </Flex>
-)
-
-export default OverlayGradientOpacity

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md

@@ -1 +0,0 @@
-By default, the overlay is rendered as a gradient. Setting the `gradient` prop to `false` renders the overlay as a solid color. You can adjust the transparency of the solid overlay by using the `opacity` prop.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx

@@ -1,40 +0,0 @@
-import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Table from '../../pb_table/_table'
-
-
-const TableExample = () => {
-    return (
-        <Table size="sm">
-            <thead>
-                <tr>
-                    <th>{'Column 1'}</th>
-                    <th>{'Column 2'}</th>
-                    <th>{'Column 3'}</th>
-                    <th>{'Column 4'}</th>
-                    <th>{'Column 5'}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 7 }, (_, index) => (
-                    <tr key={index}>
-                        {Array.from({ length: 5 }, (_, columnIndex) => (
-                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
-                        ))}
-                    </tr>
-                ))}
-            </tbody>
-        </Table>
-    )
-}
-
-const OverlayLayout = () => (
-    <>
-        <Overlay layout={{ y: "xl" }}>
-            <TableExample />
-        </Overlay>
-    </>
-)
-
-export default OverlayLayout

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -1,5 +0,0 @@
-The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
-
-The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
-
-The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

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_text_input/docs/_text_input_sanitize.jsx

@@ -1,94 +0,0 @@
-import React, { useState } from 'react'
-
-import TextInput from '../../pb_text_input/_text_input'
-
-const TextInputSanitize = (props) => {
-  const ref = React.createRef()
-
-  const [currency, setCurrency] = useState('')
-  const [sanitizedCurrency, setSanitizedCurrency] = useState('')
-  const handleOnChangeSanitizeCurrency = ({ target }, sanitizedValue) => {
-    setCurrency(target.value)
-    setSanitizedCurrency(sanitizedValue);
-  }
-
-  const [creditCard, setCreditCard] = useState('')
-  const [sanitizedCreditCard, setSanitizedCreditCard] = useState('')
-  const handleOnChangeSanitizeCC = ({ target }, sanitizedValue) => {
-    setCreditCard(target.value)
-    setSanitizedCreditCard(sanitizedValue);
-  }
-
-  const [ssn, setSSN] = useState('')
-  const [sanitizedSSN, setSanitizedSSN] = useState('')
-  const handleOnChangeSanitizeSSN = ({ target }, sanitizedValue) => {
-    setSSN(target.value)
-    setSanitizedSSN(sanitizedValue);
-  }
-
-  return (
-    <div>
-      <TextInput
-          label="Currency"
-          mask="currency"
-          onChange={handleOnChangeSanitizeCurrency}
-          placeholder="Enter Amount"
-          ref={ref}
-          value={currency}
-          {...props}
-      />
-
-      {currency !== "" && (
-        <React.Fragment>{`The masked value is: ${currency}`}</React.Fragment>
-      )}
-      <br />
-      {sanitizedCurrency !== "" && (
-        <React.Fragment>{`The sanitized value is: ${sanitizedCurrency}`}</React.Fragment>
-      )}
-
-      <br />
-      <br />
-
-      <TextInput
-          label="Credit Card"
-          mask="creditCard"
-          onChange={handleOnChangeSanitizeCC}
-          placeholder="Enter Card"
-          ref={ref}
-          value={creditCard}
-          {...props}
-      />
-
-      {creditCard !== "" && (
-        <React.Fragment>{`The masked value is: ${creditCard}`}</React.Fragment>
-      )}
-      <br />
-      {sanitizedCreditCard !== "" && (
-        <React.Fragment>{`The sanitized value is: ${sanitizedCreditCard}`}</React.Fragment>
-      )}
-
-      <br />
-      <br />
-
-      <TextInput
-          label="SSN"
-          mask="ssn"
-          onChange={handleOnChangeSanitizeSSN}
-          placeholder="Enter Amount"
-          ref={ref}
-          value={ssn}
-          {...props}
-      />
-
-      {ssn !== "" && (
-        <React.Fragment>{`The masked value is: ${ssn}`}</React.Fragment>
-      )}
-      <br />
-      {sanitizedSSN !== "" && (
-        <React.Fragment>{`The sanitized value is: ${sanitizedSSN}`}</React.Fragment>
-      )}
-    </div>
-  )
-}
-
-export default TextInputSanitize

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md

@@ -1 +0,0 @@
-When utilizing the Mask prop, you can retrieve the sanitized value of your input through an event handler that targets `sanitizedValue`.