@protonradio/proton-ui 0.4.2 → 0.5.0

package/README.md

@@ -1,50 +1,50 @@
-# Proton UI
-
-![](./.readme.gif)
-
-```
-npm run storybook
-```
-
-### Publishing Updates to NPM
-
-```
-npm run build
-npm version <new_version>  // increment version in package.json accordingly using semver
-npm publish
-```
-
-### Themes
-
-This library supports themes for the various applications that use it. Ideally, we would unify our app designs, but until then themes is a way to support different design patterns using the same api.
-
-#### Adding a Theme
-
-The current supported themes can be found in the `src/themes/config.ts`. To add a new theme, create a new attribute on the `THEMES` object following the pattern `[themeName]: [themeClassName]`.
-
-When applying to a project, you can import available themes using `THEMES` from this library and apply the theme an outer div on the application. See below for an example.
-
-```jsx
-function MyApp({ Component, pageProps }) {
-  return (
-    <ThemeProvider theme={THEMES.DARK}>
-      <Component {...pageProps} />
-    </ThemeProvider>
-  );
-}
-```
-
-#### Styling for a theme
-
-To apply theme specific styles in a component, we set theme specific css variables in the `src/themes/config.ts` file, in `generateThemeCssVariables` function. If you need more control, you can add either use the `useTheme` hook to manipulate the DOM, or you can use css selectors that reference the wrapping theme class.
-
-For example, to apply a style to the dark theme, you can use the following css.
-```css
-.proton-ui__theme--dark .myComponent {
-  background-color: red;
-}
-```
-
-### Recommended Reading
-
-- https://www.gabe.pizza/notes-on-component-libraries/
+# Proton UI
+
+![](./.readme.gif)
+
+```
+npm run storybook
+```
+
+### Publishing Updates to NPM
+
+```
+npm run build
+npm version <new_version>  // increment version in package.json accordingly using semver
+npm publish
+```
+
+### Themes
+
+This library supports themes for the various applications that use it. Ideally, we would unify our app designs, but until then themes is a way to support different design patterns using the same api.
+
+#### Adding a Theme
+
+The current supported themes can be found in the `src/themes/config.ts`. To add a new theme, create a new attribute on the `THEMES` object following the pattern `[themeName]: [themeClassName]`.
+
+When applying to a project, you can import available themes using `THEMES` from this library and apply the theme an outer div on the application. See below for an example.
+
+```jsx
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={THEMES.DARK}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
+}
+```
+
+#### Styling for a theme
+
+To apply theme specific styles in a component, we set theme specific css variables in the `src/themes/config.ts` file, in `generateThemeCssVariables` function. If you need more control, you can add either use the `useTheme` hook to manipulate the DOM, or you can use css selectors that reference the wrapping theme class.
+
+For example, to apply a style to the dark theme, you can use the following css.
+```css
+.proton-ui__theme--dark .myComponent {
+  background-color: red;
+}
+```
+
+### Recommended Reading
+
+- https://www.gabe.pizza/notes-on-component-libraries/

package/dist/icons.svg

@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <symbol id="external-link" viewBox="0 0 512 512">
-      <path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
-    </symbol>
-
-    <symbol id="caret-down" viewBox="0 0 512 512">
-      <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
-    </symbol>
-  </defs>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <symbol id="external-link" viewBox="0 0 512 512">
+      <path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
+    </symbol>
+
+    <symbol id="caret-down" viewBox="0 0 512 512">
+      <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
+    </symbol>
+  </defs>
 </svg>

package/dist/proton-ui.es.d.ts

@@ -35,14 +35,7 @@ export declare interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>
 
 export declare type BadgeVariant = "primary" | "secondary" | "transparent" | "success" | "warning" | "danger";
 
-export declare const BadgeVariants: {
-    readonly primary: "primary";
-    readonly secondary: "secondary";
-    readonly transparent: "transparent";
-    readonly success: "success";
-    readonly warning: "warning";
-    readonly danger: "danger";
-};
+export declare const BadgeVariants: Record<BadgeVariant, BadgeVariant>;
 
 export declare const Banner: {
     ({ variant, rounded, icon, compact, children, ...props }: BannerProps): JSX_2.Element;
@@ -171,10 +164,6 @@ declare interface ButtonProps {
      * The URL that the button should link to. Turns the element into an `a` tag.
      */
     href?: string;
-    /**
-     * Should the button show an external link icon?
-     */
-    external?: boolean;
     /**
      *  Called when the button is pressed (on release, not keydown).
      */
@@ -185,7 +174,7 @@ declare interface ButtonProps {
     children?: React.ReactNode;
 }
 
-export declare type ButtonVariant = "primary" | "secondary" | "danger" | "translucent";
+export declare type ButtonVariant = "primary" | "secondary" | "success" | "danger" | "translucent";
 
 export declare const Cell: <T>(props: ProtonColumnProps<T>) => JSX.Element;
 
@@ -339,19 +328,25 @@ export { TableHeader }
 
 declare type TableProps = AriaTableProps & TableStateProps<object>;
 
-export declare const TextEmphasis: {
-    ({ to, children, ...props }: TextEmphasisProps): JSX_2.Element;
-    Tooltip: ({ to, children, tooltipProps, ...props }: TextEmphasisTooltipProps) => JSX_2.Element;
-};
+export declare const TextEmphasis: ({ to, children, tooltipProps, "data-testid": testId, }: TextEmphasisProps) => JSX_2.Element;
 
 declare interface TextEmphasisProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The URL that the text emphasis should link to. Turns the element into an `a` tag.
+     */
     to?: string;
-    onClick?: () => void;
+    /**
+     * The content to display within the text emphasis.
+     */
     children: ReactNode;
-}
-
-declare interface TextEmphasisTooltipProps extends TextEmphasisProps {
+    /**
+     * Props to pass to the tooltip trigger. When provided, the text emphasis will be wrapped in a tooltip trigger.
+     */
     tooltipProps?: Omit<TooltipTriggerProps, "children">;
+    /**
+     * A test ID.
+     */
+    "data-testid"?: string;
 }
 
 export declare type Theme = (typeof THEMES)[keyof typeof THEMES];
@@ -437,4 +432,3 @@ export { }
 declare namespace ButtonGroup {
     var Option: (props: ButtonGroupOptionProps) => import("react/jsx-runtime").JSX.Element;
 }
-