@pantheon-systems/pds-toolkit-react 1.0.0-dev.213 → 1.0.0-dev.214

package/_dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,56 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-diff';
+import './code-block.css';
+type SupportedLanguages = 'bash' | 'css' | 'diff' | 'html' | 'js' | 'json' | 'jsx' | 'ts' | 'tsx' | 'yaml';
+/**
+ * Prop types for CodeBlock
+ */
+export interface CodeBlockProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Code to display.
+     */
+    code: string;
+    /**
+     * Color type. Default is dark.
+     */
+    colorType?: 'dark' | 'light';
+    /**
+     * Copy button label. Aria-label and tooltip text for the copy button.
+     */
+    copyButtonLabel?: string;
+    /**
+     * Show copy button.
+     */
+    hasCopyButton?: boolean;
+    /**
+     * Show line numbers.
+     */
+    hasLineNumbers?: boolean;
+    /**
+     * Show prompt. A prompt and and line numbers cannot be shown at the same time.
+     * If both are set to true, line numbers will be shown.
+     */
+    hasPrompt?: boolean;
+    /**
+     * Language for optional syntax highlighting.
+     */
+    language?: SupportedLanguages;
+    /**
+     * Maximum height for the code block in `rem`.
+     */
+    maxHeight?: number;
+    /**
+     * Prompt symbol. Default is '$'.
+     */
+    promptSymbol?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CodeBlock UI component
+ */
+export declare const CodeBlock: ({ code, colorType, copyButtonLabel, hasCopyButton, hasLineNumbers, hasPrompt, language, maxHeight, promptSymbol, className, ...props }: CodeBlockProps) => React.JSX.Element;
+export {};

package/_dist/components/CodeBlock/code-examples.d.ts

@@ -0,0 +1,5 @@
+export declare const logExample = "Already have image (with digest): us-docker.pkg.dev/prod-decoupled-shared/build-tools/pantheon-build:v1.0.8-node20\nThe framework expected according to the configuration is: gatsby.\nThe framework detected from the code is: vite\nERROR: Invalid option: false\ndeprecated-tools [options]\nUsage:\n  deprecated-tools -t node --min-version 18 [--max-version 20] --message-format \"Node version should be between %s and %s\" --message-data \"18 20\"\n  deprecated-tools -f .nvmrc --message-format \"The file %s is deprecated\" --message-data \".nvmrc\"\n\n  -t, --tool <tool>       Check if a tool is deprecated\n    --min-version <ver>         Minimum version supported for the tool\n    --max-version <ver>         Max version supported for the tool\n  --message-format <format>   Format of the deprecation message\n  --message-data <data>       Array of data to use in the deprecation message\n  -f, --file <file>       Check if a file is deprecated\n  --message-format <format>   Format of the deprecation message\n  --message-data <data>       Array of data to use in the deprecation message\n  -h, --help              Display this help message\nnpm WARN deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported\nnpm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported\n\n> @pantheon-systems/pds-toolkit-react@1.0.0-dev.213 prepare\n> husky install\n\nhusky - Git hooks installed";
+export declare const reactExample = "export const ControlledExample = () => {\n  const defaultValue = 'This is a default value';\n  const [value, setValue] = useState(defaultValue);\n\n  // This is a comment for this component.\n  return (\n    <TextInput\n      id='text-input-controlled-example'\n      label='Controlled Input example'\n      type='text'\n      hasClearButton={true}\n      onClear={() => {\n        setValue('');\n      }}\n      onChange={(event: ChangeEvent<HTMLInputElement>) => setValue(event.target.value)}\n      value={value}\n    />\n  );\n};";
+export declare const cssExample = "@design-tokens url('node_modules://@pantheon-systems/pds-design-tokens/build/json/pds-design-tokens.json') format('style-dictionary3');\n\n.pds-file-diff {\n  align-items: center;\n  display: flex;\n  gap: 0.25rem;\n  height: 1.0625rem;\n  max-width: 100%;\n  width: 100%;\n\n  .pds-file-diff__total-changes {\n    color: var(--pds-color-foreground-default-secondary);\n    font-size: token('typography.size.XS' to rem);\n  }\n\n  .pds-file-diff__bars {\n    align-items: center;\n    display: flex;\n    gap: 0.125rem;\n    width: 100%;\n  }\n\n  .pds-file-diff__behind {\n    position: relative;\n\n    .pds-file-diff__behind-bar {\n      background-color: var(--pds-color-status-critical-utility);\n      border-bottom-left-radius: 6.25rem;\n      border-top-left-radius: 6.25rem;\n      height: 8px;\n      min-width: 1px;\n      right: 0px;\n      transition: width 0.3s ease;\n      width: 100%;\n    }\n  }\n\n  .pds-file-diff__ahead {\n    position: relative;\n\n    .pds-file-diff__ahead-bar {\n      background-color: var(--pds-color-status-success-utility);\n      border-bottom-right-radius: 6.25rem;\n      border-top-right-radius: 6.25rem;\n      height: 8px;\n      left: 0px;\n      min-width: 1px;\n      transition: width 0.3s ease;\n      width: 100%;\n    }\n  }\n\n  .pds-file-diff__tooltip {\n    display: block;\n    padding-inline: 0;\n  }\n}\n";
+export declare const diffExample = "diff --git a/influitive/index.css b/influitive/index.css\nindex 2069af6..b347ca3 100644\n--- a/influitive/index.css\n+++ b/influitive/index.css\n@@ -1,4 +1,4 @@\n #nav-container ul li.c-nav-list-item a.c-nav-item {\n   font-weight: 500 !important;\n-  font-family: 'Poppins', san-serif !important;\n+  font-family: 'Poppins', sans-serif !important;\n }";
+export declare const twigExample = "<div class=\"pds-status-badge pds-status-badge--{{ color|default('transparent')}}{% if extra_classes %} {{ extra_classes }}{% endif %}\">\n\n  {% if has_status_indicator %}\n    <span class=\"pds-status-badge__status pds-status-badge__status--{{ status_type }}\">\n      {% if status_type %}\n        <span class=\"visually-hidden\">Status: {{ status_type }}</span>\n      {% endif %}\n    </span>\n  {% endif %}\n\n  <span class=\"pds-status-badge__label\">{{ label }}</span>\n</div>";

package/_dist/components/CodeBlock/themes/index.d.ts

@@ -0,0 +1,2 @@
+export * from './pdsDark';
+export * from './pdsLight';

package/_dist/components/CodeBlock/themes/pdsDark.d.ts

@@ -0,0 +1,2 @@
+import type { PrismTheme } from 'prism-react-renderer';
+export declare const pdsDark: PrismTheme;

package/_dist/components/CodeBlock/themes/pdsLight.d.ts

@@ -0,0 +1,2 @@
+import type { PrismTheme } from 'prism-react-renderer';
+export declare const pdsLight: PrismTheme;

package/_dist/components/buttons/ClipboardButton/ClipboardButton.d.ts

@@ -0,0 +1,31 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './clipboard-button.css';
+/**
+ * Prop types for ClipboardButton
+ */
+export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Translation string for aria-label attribute and tooltip text.
+     */
+    ariaLabel: string;
+    /**
+     * Text to copy to clipboard.
+     */
+    clipboardText?: string;
+    /**
+     * Is the button disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Which variant of button to render.
+     */
+    variant?: 'standard' | 'reverse';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ClipboardButton UI component
+ */
+export declare const ClipboardButton: ({ ariaLabel, clipboardText, disabled, variant, className, ...props }: ClipboardButtonProps) => React.JSX.Element;

package/_dist/components/buttons/IconButton/IconButton.d.ts

@@ -37,7 +37,7 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * Which variant of button to render.
      */
-    variant?: 'standard' | 'critical' | 'critical-hover';
+    variant?: 'standard' | 'reverse' | 'critical' | 'critical-hover';
     /**
      * Additional class names.
      */

package/_dist/css/component-css/pds-code-block.css

@@ -0,0 +1 @@
+.pds-code-block{--code-block-padding:1.25rem;--code-block-background:var(--pds-color-code-block-dark-background);--code-block-foreground:var(--pds-color-code-block-dark-foreground);--code-block-line-prefix:var(--pds-color-code-block-dark-line-prefix);--code-block-focus-color:var(--pds-color-interactive-reverse-focus);background-color:var(--code-block-background);border-radius:.375rem;display:flex;font-family:var(--pds-typography-font-code);font-size:.9rem;font-weight:400;justify-content:space-between;line-height:165%}.pds-code-block__code{flex-grow:1;margin:0;overflow:auto;padding:1.25rem}.pds-code-block__code:focus-visible{border-radius:.375rem;outline:2px solid var(--code-block-focus-color)}.pds-code-block__code .token.plain{color:var(--code-block-foreground)}.pds-code-block__line{column-gap:.64rem;display:table-row}.pds-code-block__number,.pds-code-block__prompt{color:var(--code-block-line-prefix);display:table-cell;padding-inline-end:1rem;text-align:right}.pds-code-block__copy{padding:.8rem}.pds-code-block--dark{--code-block-background:var(--pds-color-code-block-dark-background);--code-block-foreground:var(--pds-color-code-block-dark-foreground);--code-block-line-prefix:var(--pds-color-code-block-dark-line-prefix);--code-block-focus-color:var(--pds-color-interactive-reverse-focus)}.pds-code-block--light{--code-block-background:var(--pds-color-code-block-light-background);--code-block-foreground:var(--pds-color-code-block-light-foreground);--code-block-line-prefix:var(--pds-color-code-block-light-line-prefix);--code-block-focus-color:var(--pds-color-interactive-focus)}.pds-code-block--light button.pds-clipboard-button{color:var(--pds-color-code-block-light-foreground)}.pds-code-block--light button.pds-clipboard-button:hover{background-color:var(--pds-color-code-block-light-highlight)}.pds-code-block--light button.pds-clipboard-button:active{background-color:#d0d2d5}

package/_dist/css/component-css/pds-dropdown-menu.css

@@ -1,2 +1,2 @@
-.pds-dropdown-menu{position:relative}.pds-dropdown-menu__heading{font-size:1rem;font-weight:600;margin-block-end:.64rem}.pds-dropdown-menu__heading a{color:var(--pds-color-foreground-default);text-decoration:none}.pds-dropdown-menu__heading a:hover{color:var(--pds-color-interactive-link-hover)}.pds-dropdown-menu__trigger{align-items:center;background-color:var(--pds-color-background-default);border:1px solid var(--pds-color-border-input);border-radius:.1875rem;color:var(--pds-color-foreground-default);cursor:pointer;display:flex;height:var(--pds-spacing-input-height);justify-content:space-between;padding:0 .64rem;text-align:left;width:100%}.pds-dropdown-menu__trigger:focus-visible{outline:1px solid var(--pds-color-interactive-focus)}.pds-dropdown-menu__trigger-icon{color:var(--pds-color-nav-trigger-default);transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__trigger[aria-expanded=true]
+.pds-dropdown-menu{position:relative}.pds-dropdown-menu__heading{font-size:1rem;font-weight:600;margin-block-end:.64rem}.pds-dropdown-menu__heading a{color:var(--pds-color-foreground-default);text-decoration:none}.pds-dropdown-menu__heading a:hover{color:var(--pds-color-interactive-link-hover)}.pds-dropdown-menu__trigger{align-items:center;background-color:var(--pds-color-background-default);border:1px solid var(--pds-color-border-input);border-radius:.1875rem;color:var(--pds-color-foreground-default);cursor:pointer;display:flex;height:var(--pds-spacing-input-height);justify-content:space-between;padding:0 .64rem;text-align:left;width:100%}.pds-dropdown-menu__trigger:focus-visible{outline:1px solid var(--pds-color-interactive-focus)}.pds-dropdown-menu__trigger-icon{color:var(--pds-color-nav-item-default-foreground-trigger);transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__trigger[aria-expanded=true]
 	.pds-dropdown-menu__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-overlay);list-style-type:none;margin-block-start:.64rem;max-height:30rem;overflow-y:scroll;padding:0;position:absolute;width:100%;z-index:200}.pds-dropdown-menu__dropdown a{color:var(--pds-color-dropdown-foreground);display:flex;padding:.64rem 1rem;text-decoration:none}.pds-dropdown-menu__dropdown:focus{outline:none}.pds-dropdown-menu__item:focus,.pds-dropdown-menu__item:hover{background-color:var(--pds-color-dropdown-item-background-hover);outline:none}.pds-dropdown-menu__item:focus a:active,.pds-dropdown-menu__item:hover a:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-dropdown-menu__item--second-level a{padding-inline-start:2.441rem}.pds-dropdown-menu__item--third-level a{padding-inline-start:4.004rem}.pds-dropdown-menu__item--fourth-level a{padding-inline-start:5.567rem}.pds-dropdown-menu__active-label{display:flex;padding-inline-start:.25rem}.pds-dropdown-menu__item--active{align-items:center;background-color:var(--pds-color-dropdown-item-background-selected);color:var(--pds-color-foreground-default);display:flex;justify-content:space-between}.pds-dropdown-menu__active-icon{flex-shrink:0;margin-inline:1rem}

package/_dist/css/component-css/pds-icon-button.css

@@ -1,7 +1,13 @@
-button.pds-icon-button{--pds-button-size:2.25rem;--pds-button-color-foreground:var(--pds-color-foreground-default);--pds-button-color-background-hover:var(
-		--pds-color-interactive-background-hover
-	);--pds-button-color-background-active:var(
-		--pds-color-interactive-background-active
-	);background-color:transparent;border:none;border-radius:.1875rem;color:var(--pds-button-color-foreground);height:var(--pds-button-size);padding:0;width:var(--pds-button-size)}.pds-icon-button__content,button.pds-icon-button{align-items:center;display:flex;justify-content:center}.pds-icon-button__content{align-content:stretch;height:100%}.pds-icon-button:disabled .pds-icon-button__content{cursor:not-allowed;opacity:45%}button.pds-icon-button:hover:enabled{background-color:var(--pds-button-color-background-hover)}button.pds-icon-button:active:enabled{background-color:var(--pds-button-color-background-active)}button.pds-icon-button:focus-visible{outline:1px solid var(--pds-color-interactive-focus)}button.pds-icon-button--critical{--pds-button-color-foreground:var(--pds-color-status-critical-foreground)}button.pds-icon-button--critical,button.pds-icon-button--critical-hover{--pds-button-color-background-hover:var(
-		--pds-color-status-critical-background
-	);--pds-button-color-background-active:#fcc5be}button.pds-icon-button--critical-hover:active,button.pds-icon-button--critical-hover:hover{--pds-button-color-foreground:var(--pds-color-status-critical-foreground)}button.pds-icon-button--sm{--pds-button-size:2rem}button.pds-icon-button--lg{--pds-button-size:3rem}.pds-icon-button__tooltip .pds-tooltip__container{padding:.328rem .512rem}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}
+button.pds-icon-button{--icon-button-size:2.25rem;--icon-button-foreground:var(--pds-color-foreground-default);--icon-button-background-hover:var(
+		--pds-color-icon-button-standard-background-hover
+	);--icon-button-background-active:var(
+		--pds-color-icon-button-standard-background-active
+	);background-color:transparent;border:none;border-radius:.1875rem;color:var(--icon-button-foreground);height:var(--icon-button-size);padding:0;width:var(--icon-button-size)}.pds-icon-button__content,button.pds-icon-button{align-items:center;display:flex;justify-content:center}.pds-icon-button__content{align-content:stretch;height:100%}.pds-icon-button:disabled .pds-icon-button__content{cursor:not-allowed;opacity:45%}button.pds-icon-button:hover:enabled{background-color:var(--icon-button-background-hover)}button.pds-icon-button:active:enabled{background-color:var(--icon-button-background-active)}button.pds-icon-button:focus-visible{outline:1px solid var(--pds-color-interactive-focus)}button.pds-icon-button--reverse{--icon-button-foreground:var(--pds-color-foreground-reverse);--icon-button-background-hover:var(
+		--pds-color-icon-button-reverse-background-hover
+	);--icon-button-background-active:var(
+		--pds-color-icon-button-reverse-background-active
+	)}button.pds-icon-button--reverse:focus-visible{outline-color:var(--pds-color-interactive-reverse-focus)}button.pds-icon-button--critical{--icon-button-foreground:var(--pds-color-status-critical-foreground)}button.pds-icon-button--critical,button.pds-icon-button--critical-hover{--icon-button-background-hover:var(
+		--pds-color-icon-button-critical-background-hover
+	);--icon-button-background-active:var(
+		--pds-color-icon-button-critical-background-active
+	)}button.pds-icon-button--critical-hover:active,button.pds-icon-button--critical-hover:hover{--icon-button-foreground:var(--pds-color-status-critical-foreground)}button.pds-icon-button--sm{--icon-button-size:2rem}button.pds-icon-button--lg{--icon-button-size:3rem}.pds-icon-button__tooltip .pds-tooltip__container{padding:.328rem .512rem}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}