@openedx/paragon 23.0.0-alpha.1 → 23.0.0-alpha.3

package/dist/setupTest.d.ts

@@ -0,0 +1,2 @@
+import 'regenerator-runtime/runtime';
+import '@testing-library/jest-dom';

package/dist/setupTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupTest.js","names":["ResizeObserver","_classCallCheck","_createClass","key","value","observe","unobserve","disconnect","window"],"sources":["../src/setupTest.ts"],"sourcesContent":["/* eslint-disable import/no-extraneous-dependencies */\nimport 'regenerator-runtime/runtime';\n\nimport '@testing-library/jest-dom';\n\nclass ResizeObserver {\n  observe() {\n    // do nothing\n  }\n\n  unobserve() {\n    // do nothing\n  }\n\n  disconnect() {\n    // do nothing\n  }\n}\n\nwindow.ResizeObserver = ResizeObserver;\n"],"mappings":";;;;;;AAAA;AACA,OAAO,6BAA6B;AAEpC,OAAO,2BAA2B;AAAC,IAE7BA,cAAc;EAAA,SAAAA,eAAA;IAAAC,eAAA,OAAAD,cAAA;EAAA;EAAAE,YAAA,CAAAF,cAAA;IAAAG,GAAA;IAAAC,KAAA,EAClB,SAAAC,QAAA,EAAU;MACR;IAAA;EACD;IAAAF,GAAA;IAAAC,KAAA,EAED,SAAAE,UAAA,EAAY;MACV;IAAA;EACD;IAAAH,GAAA;IAAAC,KAAA,EAED,SAAAG,WAAA,EAAa;MACX;IAAA;EACD;EAAA,OAAAP,cAAA;AAAA;AAGHQ,MAAM,CAACR,cAAc,GAAGA,cAAc","ignoreList":[]}

package/dist/utils/types/bootstrap.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Types related to bootstrap components
+ */
+import React from 'react';
+import type { BsPrefixProps, BsPrefixRefForwardingComponent } from 'react-bootstrap/esm/helpers';
+/**
+ * Type helper for defining props of a component that wraps a bootstrap
+ * component. This type defines three props:
+ *    1. `className`: this component accepts additional CSS classes.
+ *    2. `bsPrefix`: locally change the class name prefix used for this component.
+ *    3. `as`: optionally specify which HTML element or Component is used, e.g. `"div"`
+ *
+ * This type assumes no `children` are allowed, but you can extend it to allow children.
+ */
+export type BsPropsWithAs<As extends React.ElementType = React.ElementType> = BsPrefixProps<As>;
+/**
+ * This is a helper that can be used to define the type of a Paragon component
+ * that accepts an `as` prop.
+ *
+ * It:
+ *   - assumes you are using `forwardRef`, and sets the type of the `ref` prop
+ *     to match the type of the component passed in the `as` prop.
+ *   - assumes you are passing all unused props to the component, so adds any
+ *     props from the `as` component type to the props you specify as `Props`.
+ *
+ * Example;
+ * ```
+ * interface MyProps extends BsPropsWithAs {
+ *   customProp?: string;
+ * }
+ * export const MyComponent: ComponentWithAsProp<'div', MyProps> = (
+ *   React.forwardRef<HTMLDivElement, MyProps>(
+ *     ({ as: Inner = 'div', ...props }, ref) => <Inner {...props} ref={ref} />,
+ *   )
+ * );
+ * ```
+ * Note that you need to define the default (e.g. `'div'`) in three different places.
+ */
+export type ComponentWithAsProp<DefaultElementType extends React.ElementType, Props> = BsPrefixRefForwardingComponent<DefaultElementType, Props>;

package/dist/utils/types/bootstrap.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=bootstrap.js.map

package/dist/utils/types/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","names":[],"sources":["../../../src/utils/types/bootstrap.ts"],"sourcesContent":["/**\n * Types related to bootstrap components\n */\nimport React from 'react';\n\nimport type { BsPrefixProps, BsPrefixRefForwardingComponent } from 'react-bootstrap/esm/helpers';\n\n/**\n * Type helper for defining props of a component that wraps a bootstrap\n * component. This type defines three props:\n *    1. `className`: this component accepts additional CSS classes.\n *    2. `bsPrefix`: locally change the class name prefix used for this component.\n *    3. `as`: optionally specify which HTML element or Component is used, e.g. `\"div\"`\n *\n * This type assumes no `children` are allowed, but you can extend it to allow children.\n */\nexport type BsPropsWithAs<As extends React.ElementType = React.ElementType> = BsPrefixProps<As>;\n\n/**\n * This is a helper that can be used to define the type of a Paragon component\n * that accepts an `as` prop.\n *\n * It:\n *   - assumes you are using `forwardRef`, and sets the type of the `ref` prop\n *     to match the type of the component passed in the `as` prop.\n *   - assumes you are passing all unused props to the component, so adds any\n *     props from the `as` component type to the props you specify as `Props`.\n *\n * Example;\n * ```\n * interface MyProps extends BsPropsWithAs {\n *   customProp?: string;\n * }\n * export const MyComponent: ComponentWithAsProp<'div', MyProps> = (\n *   React.forwardRef<HTMLDivElement, MyProps>(\n *     ({ as: Inner = 'div', ...props }, ref) => <Inner {...props} ref={ref} />,\n *   )\n * );\n * ```\n * Note that you need to define the default (e.g. `'div'`) in three different places.\n */\nexport type ComponentWithAsProp<DefaultElementType extends React.ElementType, Props>\n  = BsPrefixRefForwardingComponent<DefaultElementType, Props>;\n"],"mappings":"","ignoreList":[]}

package/lib/build-tokens.js

@@ -31,8 +31,13 @@ async function buildTokensCommand(commandArgs) {
   } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' });
 
   const coreConfig = {
-    include: [path.resolve(__dirname, '../tokens/src/core/**/*.json')],
-    source: tokensSource ? [`${tokensSource}/core/**/*.json`] : [],
+    include: [
+      path.resolve(__dirname, '../tokens/src/core/**/*.json'),
+      path.resolve(__dirname, '../tokens/src/core/**/*.toml'),
+    ],
+    source: tokensSource
+      ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
+      : [],
     platforms: {
       css: {
         prefix: 'pgn',
@@ -67,8 +72,17 @@ async function buildTokensCommand(commandArgs) {
 
   const getStyleDictionaryConfig = (themeVariant) => ({
     ...coreConfig,
-    include: [...coreConfig.include, path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.json`)],
-    source: tokensSource ? [`${tokensSource}/themes/${themeVariant}/**/*.json`] : [],
+    include: [
+      ...coreConfig.include,
+      path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.json`),
+      path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.toml`),
+    ],
+    source: tokensSource
+      ? [
+        `${tokensSource}/themes/${themeVariant}/**/*.json`,
+        `${tokensSource}/themes/${themeVariant}/**/*.toml`,
+      ]
+      : [],
     transform: {
       'color/sass-color-functions': {
         ...StyleDictionary.transform['color/sass-color-functions'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.0.0-alpha.1",
+  "version": "23.0.0-alpha.3",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -68,6 +68,7 @@
     "file-selector": "^0.6.0",
     "glob": "^8.0.3",
     "inquirer": "^8.2.5",
+    "js-toml": "^1.0.0",
     "lodash.uniqby": "^4.7.0",
     "log-update": "^4.0.0",
     "mailto-link": "^2.0.0",
@@ -122,8 +123,8 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^29.5.10",
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.11",
+    "@types/react": "^17.0.80",
+    "@types/react-dom": "^17.0.11",
     "@types/react-responsive": "^8.0.8",
     "@types/react-table": "^7.7.19",
     "@types/react-test-renderer": "^18.0.0",
@@ -168,7 +169,7 @@
       "^.+\\.tsx?$": "ts-jest"
     },
     "setupFilesAfterEnv": [
-      "./src/setupTest.js"
+      "./src/setupTest.ts"
     ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
@@ -179,7 +180,7 @@
     ],
     "coveragePathIgnorePatterns": [
       "/node_modules/",
-      "src/setupTest.js",
+      "src/setupTest.ts",
       "src/index.js",
       "/tests/",
       "/www/",

package/src/Button/{Button.test.jsx → Button.test.tsx}

@@ -30,7 +30,7 @@ describe('<Button />', () => {
 
     it('renders with props iconAfter and size', () => {
       const tree = renderer.create((
-        <Button iconAfter={Close} size="md">Button</Button>
+        <Button iconAfter={Close} size="sm">Button</Button>
       )).toJSON();
       expect(tree).toMatchSnapshot();
     });
@@ -94,9 +94,21 @@ describe('<Button />', () => {
       });
 
       test('test button as hyperlink', () => {
-        render(<Button as={Hyperlink} destination="https://www.poop.com/💩">Button</Button>);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const ref = (_current: HTMLAnchorElement) => {}; // Check typing of a ref - should not show type errors.
+        render(<Button as={Hyperlink} ref={ref} destination="https://www.poop.com/💩">Button</Button>);
         expect(screen.getByRole('link').getAttribute('href')).toEqual('https://www.poop.com/💩');
       });
     });
+
+    test('with size="inline"', () => {
+      const tree = renderer.create((
+        <p>
+          <span className="mr-1">2 items selected.</span>
+          <Button variant="link" size="inline">Clear</Button>
+        </p>
+      )).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
 });

package/src/Button/__snapshots__/{Button.test.jsx.snap → Button.test.tsx.snap}

@@ -55,13 +55,13 @@ exports[`<Button /> correct rendering renders with props iconAfter 1`] = `
 
 exports[`<Button /> correct rendering renders with props iconAfter and size 1`] = `
 <button
-  className="btn btn-primary btn-md"
+  className="btn btn-primary btn-sm"
   disabled={false}
   type="button"
 >
   Button
   <span
-    className="pgn__icon pgn__icon__md btn-icon-after"
+    className="pgn__icon pgn__icon__sm btn-icon-after"
   >
     <svg
       aria-hidden={true}
@@ -197,3 +197,20 @@ exports[`<Button /> correct rendering renders without props 1`] = `
   Button
 </button>
 `;
+
+exports[`<Button /> correct rendering with size="inline" 1`] = `
+<p>
+  <span
+    className="mr-1"
+  >
+    2 items selected.
+  </span>
+  <button
+    className="btn btn-link btn-inline"
+    disabled={false}
+    type="button"
+  >
+    Clear
+  </button>
+</p>
+`;

package/src/Button/index.scss

@@ -91,8 +91,6 @@
     opacity: var(--pgn-other-btn-disabled-opacity);
   }
 
-  // Button Icon Sizes
-
   .btn-icon-before {
     margin-inline-end: .5rem;
     margin-left: -.25em;

package/src/Button/{index.jsx → index.tsx}

@@ -1,31 +1,55 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { type Requireable } from 'prop-types';
 import classNames from 'classnames';
-import BaseButton from 'react-bootstrap/Button';
-import BaseButtonGroup from 'react-bootstrap/ButtonGroup';
-import BaseButtonToolbar from 'react-bootstrap/ButtonToolbar';
+import BaseButton, { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button';
+import BaseButtonGroup, { type ButtonGroupProps as BaseButtonGroupProps } from 'react-bootstrap/ButtonGroup';
+import BaseButtonToolbar, { type ButtonToolbarProps } from 'react-bootstrap/ButtonToolbar';
+import type { ComponentWithAsProp } from '../utils/types/bootstrap';
 
 import Icon from '../Icon';
 
-const Button = React.forwardRef(({
+interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
+  /**
+   * An icon component to render. Example:
+   * ```
+   * import { Close } from '@openedx/paragon/icons';
+   * <Button iconBefore={Close}>Close</Button>
+   * ```
+   */
+  iconBefore?: React.ComponentType;
+  /**
+   * An icon component to render. Example:
+   * ```
+   * import { Close } from '@openedx/paragon/icons';
+   * <Button iconAfter={Close}>Close</Button>
+   * ```
+   */
+  iconAfter?: React.ComponentType;
+  size?: 'sm' | 'md' | 'lg' | 'inline';
+}
+
+type ButtonType = ComponentWithAsProp<'button', ButtonProps> & { Deprecated?: any };
+
+const Button: ButtonType = React.forwardRef<HTMLButtonElement, ButtonProps>(({
   children,
   iconAfter,
   iconBefore,
+  size,
   ...props
 }, ref) => (
   <BaseButton
+    size={size as 'sm' | 'lg' | undefined} // Bootstrap's <Button> types do not allow 'md' or 'inline', but we do.
     {...props}
     className={classNames(props.className)}
     ref={ref}
   >
-    {iconBefore && <Icon className="btn-icon-before" size={props.size} src={iconBefore} />}
+    {iconBefore && <Icon className="btn-icon-before" size={size} src={iconBefore} />}
     {children}
-    {iconAfter && <Icon className="btn-icon-after" size={props.size} src={iconAfter} />}
+    {iconAfter && <Icon className="btn-icon-after" size={size} src={iconAfter} />}
   </BaseButton>
 ));
 
 Button.propTypes = {
-  ...Button.propTypes,
   /** Specifies class name to apply to the button */
   className: PropTypes.string,
   /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */
@@ -51,10 +75,13 @@ Button.propTypes = {
   variant: PropTypes.string,
   /** An icon component to render.
   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
-  iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
+  iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,
   /** An icon component to render.
   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
-  iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
+  iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,
+  // The 'as' type casting above is required for TypeScript checking, because the 'PropTypes.elementType' type normally
+  // allows strings as a value (for use cases like 'div') but we don't support that for <Icon />/iconBefore/iconAfter.
+  // The React TypeScript type definitions are more specific (React.ComponentType vs React.ElementType).
 };
 
 Button.defaultProps = {
@@ -66,20 +93,29 @@ Button.defaultProps = {
   disabled: false,
 };
 
-function ButtonGroup(props) {
-  return <BaseButtonGroup {...props} />;
-}
-function ButtonToolbar(props) {
-  return <BaseButtonToolbar {...props} />;
+// We could just re-export 'ButtonGroup' and 'ButtonToolbar', but we currently
+// override them to add propTypes validation at runtime, since most Paragon
+// consumers aren't using TypeScript yet. We also force ButtonGroup's 'size'
+// prop to accept our custom values of 'md' and 'inline' which are used in
+// Paragon but not used in the base Bootstrap classes.
+
+interface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {
+  size?: 'sm' | 'md' | 'lg' | 'inline';
 }
 
+const ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = (
+  React.forwardRef<HTMLButtonElement, ButtonGroupProps>(({ size, ...props }, ref) => (
+    <BaseButtonGroup size={size as 'sm' | 'lg'} {...props} ref={ref} />
+  ))
+);
+
 ButtonGroup.propTypes = {
   /** Specifies element type for this component. */
   as: PropTypes.elementType,
   /** An ARIA role describing the button group. */
   role: PropTypes.string,
   /** Specifies the size for all Buttons in the group. */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: PropTypes.oneOf(['sm', 'md', 'lg', 'inline']),
   /** Display as a button toggle group. */
   toggle: PropTypes.bool,
   /** Specifies if the set of Buttons should appear vertically stacked. */
@@ -97,6 +133,12 @@ ButtonGroup.defaultProps = {
   size: 'md',
 };
 
+const ButtonToolbar: ComponentWithAsProp<'div', ButtonToolbarProps> = (
+  React.forwardRef<HTMLButtonElement, ButtonToolbarProps>((props, ref) => (
+    <BaseButtonToolbar {...props} ref={ref} />
+  ))
+);
+
 ButtonToolbar.propTypes = {
   /** An ARIA role describing the button group. */
   role: PropTypes.string,

package/src/Chip/{Chip.test.jsx → Chip.test.tsx}

@@ -7,7 +7,7 @@ import { Close } from '../../icons';
 import { STYLE_VARIANTS } from './constants';
 import Chip from '.';
 
-function TestChip(props) {
+function TestChip(props: Omit<React.ComponentProps<typeof Chip>, 'children'>) {
   return (
     <Chip {...props}>
       Test
@@ -42,15 +42,13 @@ describe('<Chip />', () => {
           iconBeforeAlt="close icon"
           iconAfter={Close}
           iconAfterAlt="close icon"
-        >
-          Chip
-        </TestChip>
+        />
       )).toJSON();
       expect(tree).toMatchSnapshot();
     });
     it('renders div with "button" role when onClick is provided', () => {
       const tree = renderer.create((
-        <TestChip onClick={jest.fn}>Chip</TestChip>
+        <TestChip onClick={jest.fn} />
       )).toJSON();
       expect(tree).toMatchSnapshot();
     });
@@ -104,7 +102,7 @@ describe('<Chip />', () => {
         />,
       );
       const iconAfter = screen.getByLabelText('icon-after');
-      await userEvent.click(iconAfter, '{enter}', { skipClick: true });
+      await userEvent.click(iconAfter);
       expect(func).toHaveBeenCalledTimes(1);
     });
     it('onIconBeforeClick is triggered', async () => {
@@ -130,7 +128,7 @@ describe('<Chip />', () => {
         />,
       );
       const iconBefore = screen.getByLabelText('icon-before');
-      await userEvent.click(iconBefore, '{enter}', { skipClick: true });
+      await userEvent.click(iconBefore);
       expect(func).toHaveBeenCalledTimes(1);
     });
     it('checks the absence of the `selected` class in the chip', async () => {

package/src/Chip/ChipIcon.tsx

@@ -1,19 +1,19 @@
 import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../Icon';
-// @ts-ignore
 import IconButton from '../IconButton';
-// @ts-ignore
 import { STYLE_VARIANTS } from './constants';
 
-export interface ChipIconProps {
+export type ChipIconProps = {
   className: string,
-  src: React.ReactElement | Function,
-  onClick?: KeyboardEventHandler & MouseEventHandler,
-  alt?: string,
-  variant: string,
+  src: React.ComponentType,
+  variant: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],
   disabled?: boolean,
-}
+} & (
+  // Either _both_ onClick and alt are provided, or neither is:
+  | { onClick: KeyboardEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLButtonElement>, alt: string }
+  | { onClick?: undefined, alt?: undefined }
+);
 
 function ChipIcon({
   className, src, onClick, alt, variant, disabled,

package/src/Chip/{constants.js → constants.ts}

@@ -2,4 +2,4 @@
 export const STYLE_VARIANTS = {
   DARK: 'dark',
   LIGHT: 'light',
-};
+} as const;

package/src/Chip/index.scss

@@ -93,11 +93,12 @@
     background-color: var(--pgn-color-chip-bg-dark);
 
     &.selected {
-      @include chip-outline(var(--pgn-color-chip-outline-dark),
-      calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1),
-      calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)),
-      var(--pgn-spacing-chip-outline-selected-distance-dark)
-    );
+      @include chip-outline(
+        var(--pgn-color-chip-outline-dark),
+        calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1),
+        calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)),
+        var(--pgn-spacing-chip-outline-selected-distance-dark)
+      );
 
       &:focus {
         border: 1px solid var(--pgn-color-chip-border-focus-selected-dark);

package/src/Chip/index.tsx

@@ -1,11 +1,9 @@
 import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { type Requireable } from 'prop-types';
 import classNames from 'classnames';
 // @ts-ignore
 import { requiredWhen } from '../utils/propTypes';
-// @ts-ignore
 import { STYLE_VARIANTS } from './constants';
-// @ts-ignore
 import ChipIcon from './ChipIcon';
 
 export const CHIP_PGN_CLASS = 'pgn__chip';
@@ -14,10 +12,10 @@ export interface IChip {
   children: React.ReactNode,
   onClick?: KeyboardEventHandler & MouseEventHandler,
   className?: string,
-  variant?: string,
-  iconBefore?: React.ReactElement | Function,
+  variant?: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],
+  iconBefore?: React.ComponentType,
   iconBeforeAlt?: string,
-  iconAfter?: React.ReactElement | Function,
+  iconAfter?: React.ComponentType,
   iconAfterAlt?: string,
   onIconBeforeClick?: KeyboardEventHandler & MouseEventHandler,
   onIconAfterClick?: KeyboardEventHandler & MouseEventHandler,
@@ -111,7 +109,7 @@ Chip.propTypes = {
    *
    * `import { Check } from '@openedx/paragon/icons';`
    */
-  iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,
   /** Specifies icon alt text. */
   iconBeforeAlt: requiredWhen(PropTypes.string, ['iconBefore', 'onIconBeforeClick']),
   /** A click handler for the `Chip` icon before. */
@@ -122,7 +120,7 @@ Chip.propTypes = {
    *
    * `import { Check } from '@openedx/paragon/icons';`
    */
-  iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,
   /** Specifies icon alt text. */
   iconAfterAlt: requiredWhen(PropTypes.string, ['iconAfter', 'onIconAfterClick']),
   /** A click handler for the `Chip` icon after. */

package/src/Chip/mixins.scss

@@ -1,8 +1,8 @@
 @mixin chip-outline(
   $outline-color: var(--pgn-color-white),
   $distance-to-border: 0,
-  $border-radius: 50%,
-  $border-width-value: .125rem
+  $outline-border-radius: 50%,
+  $outline-border-width: .125rem
 ) {
   &::before {
     content: "";
@@ -11,8 +11,8 @@
     right: $distance-to-border;
     bottom: $distance-to-border;
     left: $distance-to-border;
-    border: solid $border-width-value $outline-color;
-    border-radius: var(--pgn-size-border-radius-base);
+    border: solid $outline-border-width $outline-color;
+    border-radius: $outline-border-radius;
   }
 }
 

package/src/ChipCarousel/index.tsx

@@ -4,9 +4,7 @@ import { useIntl } from 'react-intl';
 import classNames from 'classnames';
 // @ts-ignore
 import { OverflowScroll, OverflowScrollContext } from '../OverflowScroll';
-// @ts-ignore
 import IconButton from '../IconButton';
-// @ts-ignore
 import Icon from '../Icon';
 // @ts-ignore
 import { ArrowForward, ArrowBack } from '../../icons';

package/src/Collapsible/index.scss

@@ -6,7 +6,7 @@
 
   .collapsible-trigger {
     padding: var(--pgn-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base);
-    border-radius: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
+    border-radius: var(--pgn-size-card-border-radius-inner);
     border-bottom: var(--pgn-size-card-border-width) solid transparent;
     transition: border-color 100ms ease 150ms;
     cursor: pointer;
@@ -22,8 +22,8 @@
 
     &[aria-expanded="true"] {
       border-radius:
-        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width))
-        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)) 0 0;
+        var(--pgn-size-card-border-radius-inner)
+        var(--pgn-size-card-border-radius-inner) 0 0;
       border-color: var(--pgn-color-card-border-base);
       transition: none;
       text-align: start;

package/src/Hyperlink/{Hyperlink.test.jsx → Hyperlink.test.tsx}

@@ -4,30 +4,34 @@ import userEvent from '@testing-library/user-event';
 
 import Hyperlink from '.';
 
-const content = 'content';
 const destination = 'destination';
+const content = 'content';
 const onClick = jest.fn();
 const props = {
-  content,
   destination,
   onClick,
 };
 const externalLinkAlternativeText = 'externalLinkAlternativeText';
 const externalLinkTitle = 'externalLinkTitle';
 const externalLinkProps = {
-  target: '_blank',
+  target: '_blank' as const,
   externalLinkAlternativeText,
   externalLinkTitle,
   ...props,
 };
 
 describe('correct rendering', () => {
+  beforeEach(() => {
+    onClick.mockClear();
+  });
+
   it('renders Hyperlink', async () => {
-    const { getByRole } = render(<Hyperlink {...props} />);
+    const { getByRole } = render(<Hyperlink {...props}>{content}</Hyperlink>);
     const wrapper = getByRole('link');
     expect(wrapper).toBeInTheDocument();
 
     expect(wrapper).toHaveClass('pgn__hyperlink');
+    expect(wrapper).toHaveClass('standalone-link');
     expect(wrapper).toHaveTextContent(content);
     expect(wrapper).toHaveAttribute('href', destination);
     expect(wrapper).toHaveAttribute('target', '_self');
@@ -36,8 +40,17 @@ describe('correct rendering', () => {
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
+  it('renders an underlined Hyperlink', async () => {
+    const { getByRole } = render(<Hyperlink isInline {...props}>{content}</Hyperlink>);
+    const wrapper = getByRole('link');
+    expect(wrapper).toBeInTheDocument();
+    expect(wrapper).toHaveClass('pgn__hyperlink');
+    expect(wrapper).not.toHaveClass('standalone-link');
+    expect(wrapper).toHaveClass('inline-link');
+  });
+
   it('renders external Hyperlink', () => {
-    const { getByRole, getByTestId } = render(<Hyperlink {...externalLinkProps} />);
+    const { getByRole, getByTestId } = render(<Hyperlink {...externalLinkProps}>{content}</Hyperlink>);
     const wrapper = getByRole('link');
     const icon = getByTestId('hyperlink-icon');
     const iconSvg = icon.querySelector('svg');
@@ -53,18 +66,16 @@ describe('correct rendering', () => {
 
 describe('security', () => {
   it('prevents reverse tabnabbing for links with target="_blank"', () => {
-    const { getByRole } = render(<Hyperlink {...externalLinkProps} />);
+    const { getByRole } = render(<Hyperlink {...externalLinkProps}>{content}</Hyperlink>);
     const wrapper = getByRole('link');
     expect(wrapper).toHaveAttribute('rel', 'noopener noreferrer');
   });
 });
 
 describe('event handlers are triggered correctly', () => {
-  let spy;
-  beforeEach(() => { spy = jest.fn(); });
-
   it('should fire onClick', async () => {
-    const { getByRole } = render(<Hyperlink {...props} onClick={spy} />);
+    const spy = jest.fn();
+    const { getByRole } = render(<Hyperlink {...props} onClick={spy}>{content}</Hyperlink>);
     const wrapper = getByRole('link');
     expect(spy).toHaveBeenCalledTimes(0);
     await userEvent.click(wrapper);