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

package/icons/es5/Newsstand.js

@@ -0,0 +1,15 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from "react";
+var SvgNewsstand = function SvgNewsstand(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    height: 24,
+    viewBox: "0 -960 960 960",
+    width: 24,
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z",
+    fill: "currentColor"
+  }));
+};
+export default SvgNewsstand;

package/icons/es5/index.js

@@ -1381,6 +1381,7 @@ export { default as NetworkWifi3Bar } from "./NetworkWifi3Bar";
 export { default as NewLabel } from "./NewLabel";
 export { default as NewReleases } from "./NewReleases";
 export { default as Newspaper } from "./Newspaper";
+export { default as Newsstand } from "./Newsstand";
 export { default as NextPlan } from "./NextPlan";
 export { default as NextWeek } from "./NextWeek";
 export { default as Nfc } from "./Nfc";

package/icons/es5/index.ts

@@ -1382,6 +1382,7 @@ export { default as NetworkWifi3Bar } from "./NetworkWifi3Bar";
 export { default as NewLabel } from "./NewLabel";
 export { default as NewReleases } from "./NewReleases";
 export { default as Newspaper } from "./Newspaper";
+export { default as Newsstand } from "./Newsstand";
 export { default as NextPlan } from "./NextPlan";
 export { default as NextWeek } from "./NextWeek";
 export { default as Nfc } from "./Nfc";

package/icons/jsx/Newsstand.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+const SvgNewsstand = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    viewBox="0 -960 960 960"
+    width={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+export default SvgNewsstand;

package/icons/jsx/index.jsx

@@ -1381,6 +1381,7 @@ export { default as NetworkWifi3Bar } from "./NetworkWifi3Bar";
 export { default as NewLabel } from "./NewLabel";
 export { default as NewReleases } from "./NewReleases";
 export { default as Newspaper } from "./Newspaper";
+export { default as Newsstand } from "./Newsstand";
 export { default as NextPlan } from "./NextPlan";
 export { default as NextWeek } from "./NextWeek";
 export { default as Nfc } from "./Nfc";

package/icons/svg/newsstand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z"/></svg>

package/lib/build-tokens.js

@@ -1,6 +1,10 @@
 const path = require('path');
 const minimist = require('minimist');
-const { StyleDictionary, colorTransform, createCustomCSSVariables } = require('../tokens/style-dictionary');
+const {
+  initializeStyleDictionary,
+  getTokensStudioTransforms,
+  colorTransform,
+} = require('../tokens/style-dictionary');
 const { createIndexCssFile } = require('../tokens/utils');
 
 /**
@@ -16,19 +20,34 @@ async function buildTokensCommand(commandArgs) {
   const defaultParams = {
     themes: ['light'],
     'build-dir': './build/',
+    'source-tokens-only': false,
+    'output-references': true,
+    verbose: false,
   };
 
   const alias = {
     'build-dir': 'b',
     themes: 't',
+    verbose: '-v',
   };
 
   const {
     'build-dir': buildDir,
     source: tokensSource,
-    'source-tokens-only': hasSourceTokensOnly,
+    'source-tokens-only': transformSourceTokensOnly,
+    'output-references': outputReferences,
     themes,
-  } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' });
+    verbose,
+  } = minimist(
+    commandArgs,
+    {
+      alias,
+      default: defaultParams,
+      boolean: ['source-tokens-only', 'output-references', 'verbose'],
+    },
+  );
+
+  const StyleDictionary = await initializeStyleDictionary({ themes });
 
   const coreConfig = {
     include: [
@@ -38,36 +57,42 @@ async function buildTokensCommand(commandArgs) {
     source: tokensSource
       ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
       : [],
+    preprocessors: ['pgn-annotate-token-extensions-with-references', 'tokens-studio'],
+    expand: {
+      typesMap: (await getTokensStudioTransforms()).expandTypesMap,
+    },
     platforms: {
       css: {
         prefix: 'pgn',
-        transformGroup: 'css',
+        transformGroup: 'paragon-css',
         // NOTE: buildPath must end with a slash
         buildPath: buildDir.slice(-1) === '/' ? buildDir : `${buildDir}/`,
+        options: {
+          fileHeader: 'customFileHeader',
+        },
         files: [
           {
             format: 'css/custom-variables',
             destination: 'core/variables.css',
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: transformSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
             },
           },
           {
             format: 'css/custom-media-breakpoints',
             destination: 'core/custom-media-breakpoints.css',
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: transformSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
             },
           },
         ],
-        transforms: StyleDictionary.transformGroup.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
-        options: {
-          fileHeader: 'customFileHeader',
-        },
       },
     },
+    log: {
+      verbosity: verbose ? 'verbose' : 'default',
+    },
   };
 
   const getStyleDictionaryConfig = (themeVariant) => ({
@@ -85,16 +110,10 @@ async function buildTokensCommand(commandArgs) {
       : [],
     transform: {
       'color/sass-color-functions': {
-        ...StyleDictionary.transform['color/sass-color-functions'],
-        transformer: (token) => colorTransform(token, themeVariant),
+        ...StyleDictionary.hooks.transforms['color/sass-color-functions'],
+        transform: (token) => colorTransform(token, themeVariant),
       },
     },
-    format: {
-      'css/custom-variables': formatterArgs => createCustomCSSVariables({
-        formatterArgs,
-        themeVariant,
-      }),
-    },
     platforms: {
       css: {
         ...coreConfig.platforms.css,
@@ -102,17 +121,19 @@ async function buildTokensCommand(commandArgs) {
           {
             format: 'css/custom-variables',
             destination: `themes/${themeVariant}/variables.css`,
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: transformSourceTokensOnly
+              ? `isSource.${themeVariant}`
+              : `isThemeVariant.${themeVariant}`,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
             },
           },
           {
             format: 'css/utility-classes',
             destination: `themes/${themeVariant}/utility-classes.css`,
-            filter: hasSourceTokensOnly ? 'isSource' : undefined,
+            filter: transformSourceTokensOnly ? 'isSource' : undefined,
             options: {
-              outputReferences: !hasSourceTokensOnly,
+              outputReferences,
             },
           },
         ],
@@ -120,14 +141,29 @@ async function buildTokensCommand(commandArgs) {
     },
   });
 
-  StyleDictionary.extend(coreConfig).buildAllPlatforms();
-  createIndexCssFile({ buildDir, isTheme: false });
+  // Create list of style-dictionary configurations to build (core + theme variants)
+  const configs = [
+    { config: coreConfig },
+    ...themes.map((themeVariant) => {
+      const config = getStyleDictionaryConfig(themeVariant);
+      return {
+        config,
+        themeVariant,
+      };
+    }),
+  ];
 
-  themes.forEach((themeVariant) => {
-    const config = getStyleDictionaryConfig(themeVariant);
-    StyleDictionary.extend(config).buildAllPlatforms();
-    createIndexCssFile({ buildDir, isTheme: true, themeVariant });
-  });
+  // Build tokens for each configuration
+  await Promise.all(configs.map(async ({ config, themeVariant }) => {
+    const sd = new StyleDictionary(config);
+    await sd.cleanAllPlatforms();
+    await sd.buildAllPlatforms();
+    createIndexCssFile({
+      buildDir,
+      isThemeVariant: !!themeVariant,
+      themeVariant,
+    });
+  }));
 }
 
 module.exports = buildTokensCommand;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.0.0-alpha.3",
+  "version": "23.0.0-alpha.5",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -51,11 +51,14 @@
     "playroom:build": "npm run playroom:build --workspace=www",
     "prepare": "husky || true",
     "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css",
+    "build-tokens:watch": "npx nodemon --ignore styles/css -x \"npm run build-tokens\"",
     "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage",
-    "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition"
+    "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition",
+    "cli:help": "./bin/paragon-scripts.js help"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.4",
+    "@tokens-studio/sd-transforms": "^1.2.4",
     "axios": "^0.27.2",
     "bootstrap": "^4.6.2",
     "chalk": "^4.1.2",
@@ -93,7 +96,7 @@
     "react-table": "^7.7.0",
     "react-transition-group": "^4.4.2",
     "sass": "^1.58.3",
-    "style-dictionary": "^3.7.1",
+    "style-dictionary": "^4.0.1",
     "tabbable": "^5.3.3",
     "uncontrollable": "^7.2.1",
     "uuid": "^9.0.0"
@@ -112,9 +115,9 @@
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@edx/eslint-config": "^3.2.0",
+    "@edx/eslint-config": "^4.2.0",
     "@edx/stylelint-config-edx": "^2.3.0",
-    "@edx/typescript-config": "^1.0.1",
+    "@edx/typescript-config": "^1.1.0",
     "@formatjs/cli": "^5.0.2",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",

package/src/Annotation/index.scss

@@ -1,5 +1,21 @@
 @import "mixins";
 
+:root {
+  --pgn-elevation-annotation-box-shadow:
+    drop-shadow(
+      var(--pgn-elevation-annotation-box-shadow-1-offset-x)
+      var(--pgn-elevation-annotation-box-shadow-1-offset-y)
+      var(--pgn-elevation-annotation-box-shadow-1-blur)
+      var(--pgn-elevation-annotation-box-shadow-1-color)
+    )
+    drop-shadow(
+      var(--pgn-elevation-annotation-box-shadow-2-offset-x)
+      var(--pgn-elevation-annotation-box-shadow-2-offset-y)
+      var(--pgn-elevation-annotation-box-shadow-2-blur)
+      var(--pgn-elevation-annotation-box-shadow-2-color)
+    );
+}
+
 .pgn__annotation {
   padding: var(--pgn-spacing-annotation-padding);
   border-radius: var(--pgn-size-annotation-border-radius);

package/src/Card/CardDeck.jsx

@@ -1,7 +1,6 @@
 import React, { Children, useMemo } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import BaseCardDeck from 'react-bootstrap/CardDeck';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import { useOverflowScrollItems } from '../OverflowScroll';
@@ -102,6 +101,4 @@ CardDeck.defaultProps = {
   hasEqualColumnHeights: true,
 };
 
-CardDeck.Deprecated = BaseCardDeck;
-
 export default CardDeck;

package/src/Card/README.md

@@ -899,37 +899,6 @@ For accessibility, if the child `Card` components are interactive (e.g., `isClic
 }
 ```
 
-### CardDeck.Deprecated
-
-Gives any child `Card` components equal height with an appropriate gutter between cards. Each child `Card` component's width will be adjusted (e.g., become more narrow) to ensure all `Card` components fit within its parent's width.
-
-Note: This component is a pass-thru from `react-bootstrap`.
-
-```jsx live
-() => {
-  const CardComponent = () => (
-    <Card>
-      <Card.ImageCap
-        src="https://picsum.photos/360/200/"
-        srcAlt="Card image"
-      />
-      <Card.Header title="Card title" />
-      <Card.Section title="Section title">
-        <HipsterIpsum numShortParagraphs={1} />
-      </Card.Section>
-    </Card>
-  );
-
-  return (
-    <CardDeck.Deprecated>
-      <CardComponent />
-      <CardComponent />
-      <CardComponent />
-    </CardDeck.Deprecated>
-  )
-}
-```
-
 ## CardCarousel
 
 Extends `CardDeck` to support navigating between any overflow `Card` components via left and right `IconButton` components as a scrollable carousel.

package/src/Card/index.scss

@@ -136,11 +136,11 @@ a.pgn__card {
     }
 
     .pgn__card-header-title-sm {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: var(--pgn-typography-font-size-h4-base);
     }
 
     .pgn__card-header-title-md {
-      font-size: var(--pgn-typography-font-size-h3);
+      font-size: var(--pgn-typography-font-size-h3-base);
     }
 
     %header-subtitle {
@@ -155,11 +155,11 @@ a.pgn__card {
     }
 
     .pgn__card-header-subtitle-sm {
-      font-size: var(--pgn-typography-font-size-h5);
+      font-size: var(--pgn-typography-font-size-h5-base);
     }
 
     .pgn__card-header-subtitle-md {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: var(--pgn-typography-font-size-h4-base);
     }
 
     .pgn__card-header-actions {
@@ -271,7 +271,7 @@ a.pgn__card {
     .pgn__card-section-title {
       color: var(--pgn-color-black);
       font-weight: var(--pgn-typography-font-weight-bold);
-      font-size: var(--pgn-typography-font-size-h5);
+      font-size: var(--pgn-typography-font-size-h5-base);
       margin-bottom: var(--pgn-spacing-card-spacer-y);
     }
 
@@ -352,6 +352,8 @@ a.pgn__card {
       bottom: calc(-1 * var(--pgn-spacing-card-logo-bottom-offset-base));
       width: var(--pgn-size-card-logo-width);
       height: var(--pgn-size-card-logo-height);
+      object-fit: scale-down;
+      object-position: center center;
       border-radius: var(--pgn-size-card-border-radius-logo);
       box-shadow: var(--pgn-elevation-box-shadow-level-1);
       padding: map_get($spacers, 2);
@@ -392,7 +394,7 @@ a.pgn__card {
     }
 
     .pgn__card-status__heading {
-      font-size: var(--pgn-typography-font-size-h4);
+      font-size: var(--pgn-typography-font-size-h4-base);
       color: var(--pgn-color-black);
       display: flex;
       font-weight: var(--pgn-typography-font-weight-bold);

package/src/Carousel/index.scss

@@ -1,3 +1,26 @@
+:root {
+  --pgn-transition-carousel-base:
+    var(--pgn-transition-carousel-base-property)
+    var(--pgn-transition-carousel-base-duration)
+    var(--pgn-transition-carousel-base-timing-function)
+    var(--pgn-transition-carousel-base-delay)
+    var(--pgn-transition-carousel-base-behavior);
+
+  --pgn-transition-carousel-indicator:
+    var(--pgn-transition-carousel-indicator-property)
+    var(--pgn-transition-carousel-indicator-duration)
+    var(--pgn-transition-carousel-indicator-timing-function)
+    var(--pgn-transition-carousel-indicator-delay)
+    var(--pgn-transition-carousel-indicator-behavior);
+
+  --pgn-transition-carousel-control:
+    var(--pgn-transition-carousel-control-property)
+    var(--pgn-transition-carousel-control-duration)
+    var(--pgn-transition-carousel-control-timing-function)
+    var(--pgn-transition-carousel-control-delay)
+    var(--pgn-transition-carousel-control-behavior);
+}
+
 .carousel {
   position: relative;
 }
@@ -58,7 +81,7 @@
   .active.carousel-item-right {
     z-index: 0;
     opacity: 0;
-    transition: opacity 0s var(--pgn-transition-carousel-base);
+    transition: var(--pgn-transition-carousel-base);
   }
 }
 

package/src/CloseButton/index.scss

@@ -1,3 +1,11 @@
+:root {
+  --pgn-elevation-close-button-text-shadow:
+    var(--pgn-elevation-close-button-text-shadow-offset-x)
+    var(--pgn-elevation-close-button-text-shadow-offset-y)
+    var(--pgn-elevation-close-button-text-shadow-blur)
+    var(--pgn-elevation-close-button-text-shadow-color);
+}
+
 .close {
   float: right;
   font-weight: var(--pgn-typography-close-button-font-weight);

package/src/ColorPicker/index.scss

@@ -37,7 +37,7 @@
 
 .pgn__hex-label {
   font-weight: bold;
-  font-size: var(--pgn-typography-font-size-mobile-h5);
+  font-size: var(--pgn-typography-font-size-h5-mobile);
   padding: .5rem;
   margin-bottom: 0 !important;
 }

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Container from '.';
+import Container, { type ContainerSize } from '.';
 
-const getClassNames = (container) => container.className.split(' ');
+const getClassNames = (container: HTMLElement) => container.className.split(' ');
 
 describe('<Container />', () => {
   it('displays children', () => {
@@ -12,32 +12,38 @@ describe('<Container />', () => {
 
   it('adds the .container-fluid class', () => {
     const { container } = render(<Container>Content</Container>);
-    const containerElement = container.firstChild;
+    const containerElement = container.firstChild as HTMLElement;
     expect(getClassNames(containerElement)).toContain('container-fluid');
   });
 
   it('adds the .container class', () => {
     const { container } = render(<Container fluid={false}>Content</Container>);
-    const containerElement = container.firstChild;
-    expect(getClassNames(containerElement)).toContain('container');
+    const containerElement = container.firstChild as HTMLElement;
+    expect(getClassNames(containerElement!)).toContain('container');
     expect(getClassNames(containerElement)).not.toContain('container-fluid');
   });
 
-  ['xs', 'sm', 'md', 'lg', 'xl'].forEach((size) => {
+  ['xs', 'sm', 'md', 'lg', 'xl'].forEach((size: ContainerSize) => {
     it(`adds the .container-mw-${size} class`, () => {
       const { container } = render(<Container size={size}>Content</Container>);
-      const containerElement = container.firstChild;
+      const containerElement = container.firstChild as HTMLElement;
       expect(getClassNames(containerElement)).toContain(`container-mw-${size}`);
     });
   });
 
+  it('does not add a size class when size is not specified', () => {
+    const { container } = render(<Container>Content</Container>);
+    const containerElement = container.firstChild as HTMLElement;
+    expect(getClassNames(containerElement)).toEqual(['container-fluid']);
+  });
+
   it('preserves custom class names', () => {
     const { container } = render(
       <Container className="custom-class" size="md">
         Content
       </Container>,
     );
-    const containerElement = container.firstChild;
+    const containerElement = container.firstChild as HTMLElement;
     expect(getClassNames(containerElement)).toContain('container-mw-md');
     expect(getClassNames(containerElement)).toContain('container-fluid');
     expect(getClassNames(containerElement)).toContain('custom-class');

package/src/Container/README.md

@@ -19,6 +19,10 @@ The base container to contain, pad, and center content in the viewport. This com
 ```jsx live
 <div style={{ overflowX: 'auto' }}>
     <div style={{ width: '1500px', border: 'solid 3px red' }}>
+        <Container className="bg-danger-300 my-4">
+          The content in this container doesn't have a max width
+        </Container>
+        
         <Container size="xl" className="bg-danger-300 my-4">
           The content in this container won't exceed the extra large width.
         </Container>

package/src/Container/index.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import RBContainer, { type ContainerProps as RBContainerProps } from 'react-bootstrap/Container';
+
+import type { ComponentWithAsProp } from '../utils/types/bootstrap';
+
+enum ContainerSizeClass {
+  xs = 'container-mw-xs',
+  sm = 'container-mw-sm',
+  md = 'container-mw-md',
+  lg = 'container-mw-lg',
+  xl = 'container-mw-xl',
+}
+
+export type ContainerSize = keyof typeof ContainerSizeClass;
+
+interface ContainerProps extends RBContainerProps {
+  size?: ContainerSize;
+}
+
+type ContainerType = ComponentWithAsProp<'div', ContainerProps>;
+
+const Container: ContainerType = React.forwardRef<Element, ContainerProps>(({
+  size,
+  children,
+  ...props
+}, ref) => (
+  <RBContainer
+    {...props}
+    ref={ref}
+    className={classNames(
+      props.className,
+      size && ContainerSizeClass[size],
+    )}
+  >
+    {children}
+  </RBContainer>
+));
+
+Container.propTypes = {
+  ...RBContainer.propTypes,
+  /** Override the base element */
+  as: PropTypes.elementType,
+  /** Specifies the contents of the container */
+  children: PropTypes.node,
+  /** Fill all available space at any breakpoint */
+  fluid: PropTypes.bool,
+  /** Set the maximum width for the container. Omiting the prop will remove the max-width */
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /** Overrides underlying component base CSS class name */
+  bsPrefix: PropTypes.string,
+};
+
+Container.defaultProps = {
+  as: 'div',
+  children: undefined,
+  fluid: true,
+  size: undefined,
+  bsPrefix: 'container',
+};
+
+export default Container;

package/src/DataTable/index.scss

@@ -1,3 +1,15 @@
+:root {
+  --pgn-elevation-data-table-box-shadow:
+    var(--pgn-elevation-data-table-box-shadow-offset-x)
+    var(--pgn-elevation-data-table-box-shadow-offset-y)
+    var(--pgn-elevation-data-table-box-shadow-blur)
+    var(--pgn-elevation-data-table-box-shadow-color);
+
+  --pgn-spacing-data-table-padding-cell:
+    var(--pgn-spacing-data-table-padding-cell-x)
+    var(--pgn-spacing-data-table-padding-cell-y);
+}
+
 .pgn__data-table-wrapper {
   font-size: var(--pgn-typography-font-size-sm);
   border-radius: var(--pgn-size-border-radius-base);

package/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx

@@ -8,6 +8,13 @@ import DataTableContext from '../../DataTableContext';
 import * as selectActions from '../data/actions';
 import { getRowIds } from '../data/helpers';
 
+function DataTableContextChild() {
+  const contextValue = useContext(DataTableContext);
+  return (
+    <div className="context-value" data-contextvalue={contextValue} />
+  );
+}
+
 // eslint-disable-next-line react/prop-types
 function ControlledSelectHeaderWrapper({ tableProps, selectProps, ...rest }) {
   return (
@@ -18,13 +25,6 @@ function ControlledSelectHeaderWrapper({ tableProps, selectProps, ...rest }) {
   );
 }
 
-function DataTableContextChild() {
-  const contextValue = useContext(DataTableContext);
-  return (
-    <div className="context-value" data-contextvalue={contextValue} />
-  );
-}
-
 const mockToggleAllPageRowsSelectedProps = jest.fn();
 const rows = [{ id: 1 }, { id: 2 }];
 const tableProps = {

package/src/Dropdown/dropdown-bootstrap.scss

@@ -1,3 +1,9 @@
+:root {
+  --pgn-spacing-dropdown-padding-header:
+    var(--pgn-spacing-dropdown-padding-header-y)
+    var(--pgn-spacing-dropdown-padding-header-x);
+}
+
 .dropup,
 .dropright,
 .dropdown,