@digigov/react-core 1.0.3 → 1.1.0

package/cjs/Code/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Code = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Typography = _interopRequireDefault(require("@digigov/react-core/Typography"));
+var _excluded = ["color", "className", "children"];
+/**
+ * Code component is used for text formatting.
+ * If you need a paragraph, use the Paragraph component instead.
+ */
+var Code = exports.Code = /*#__PURE__*/_react["default"].forwardRef(function Code(_ref, ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
+    className = _ref.className,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_Typography["default"], (0, _extends2["default"])({
+    as: "code",
+    ref: ref,
+    className: (0, _clsx["default"])(className, color === 'attribute' && 'govgr-code--attr', color === 'keyword' && 'govgr-code--keyword', color === 'string' && 'govgr-code--string', color === 'name' && 'govgr-code--name', true && 'govgr-code')
+  }, props), children);
+});
+var _default = exports["default"] = Code;

package/cjs/Code/index.test/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _Code = _interopRequireDefault(require("@digigov/react-core/Code"));
+var _ref = /*#__PURE__*/_react["default"].createElement(_Code["default"], null, "hello");
+it('renders the Code with no props', function () {
+  expect((0, _enzyme.mount)(_ref)).toMatchSnapshot();
+});
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_Code["default"], {
+  color: "info"
+}, "hello");
+it('renders the Code with color="info" prop', function () {
+  expect((0, _enzyme.mount)(_ref2)).toMatchSnapshot();
+});
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_Code["default"], {
+  color: "attribute"
+}, "hello");
+it('renders the Code with color="attribute" prop', function () {
+  expect((0, _enzyme.mount)(_ref3)).toMatchSnapshot();
+});
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_Code["default"], {
+  color: "name"
+}, "hello");
+it('renders the Code with color="name" prop', function () {
+  expect((0, _enzyme.mount)(_ref4)).toMatchSnapshot();
+});
+var _ref5 = /*#__PURE__*/_react["default"].createElement(_Code["default"], {
+  color: "keyword"
+}, "hello");
+it('renders the Code with color="keyword" prop', function () {
+  expect((0, _enzyme.mount)(_ref5)).toMatchSnapshot();
+});

package/cjs/CodeBlock/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CodeBlock with no props 1`] = `
+<ForwardRef(Card)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-code-block__container"
+  >
+    <div
+      className="govgr-code-block__container"
+    >
+      <pre>
+        <code
+          className="govgr-code-block__content"
+        >
+          hello
+        </code>
+      </pre>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;

package/cjs/CodeBlock/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CodeBlock = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
+var _excluded = ["className", "children"];
+/**
+ * CodeBlock can be used as a colored container for text.
+ * 
+ */
+var CodeBlock = exports.CodeBlock = /*#__PURE__*/_react["default"].forwardRef(function Card(_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
+    as: "div",
+    ref: ref,
+    className: (0, _clsx["default"])(className, true && 'govgr-code-block__container')
+  }, props), /*#__PURE__*/_react["default"].createElement("pre", null, /*#__PURE__*/_react["default"].createElement("code", {
+    className: (0, _clsx["default"])(true && 'govgr-code-block__content')
+  }, children)));
+});
+var _default = exports["default"] = CodeBlock;

package/cjs/CodeBlock/index.test/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _CodeBlock = _interopRequireDefault(require("@digigov/react-core/CodeBlock"));
+var _ref = /*#__PURE__*/_react["default"].createElement(_CodeBlock["default"], null, "hello");
+it('renders the CodeBlock with no props', function () {
+  expect((0, _enzyme.mount)(_ref)).toMatchSnapshot();
+});

package/cjs/Hidden/index.js

@@ -8,9 +8,8 @@ exports["default"] = exports.Hidden = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
-var _excluded = ["className", "children", "xsUp", "smUp", "mdUp", "lgUp", "xlUp"];
+var _excluded = ["className", "children", "xsUp", "smUp", "mdUp", "lgUp", "xlUp", "xs", "sm", "md", "lg", "xl"];
 /**
  * Hidden is used to responsively hide children based on the screen size.
  * Each property refers to a specific screen sizes and applies the "invisible"
@@ -25,11 +24,25 @@ var Hidden = exports.Hidden = /*#__PURE__*/_react["default"].forwardRef(function
     mdUp = _ref.mdUp,
     lgUp = _ref.lgUp,
     xlUp = _ref.xlUp,
+    xs = _ref.xs,
+    sm = _ref.sm,
+    md = _ref.md,
+    lg = _ref.lg,
+    xl = _ref.xl,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
     as: "div",
     ref: ref,
-    className: (0, _clsx["default"])(className, lgUp && 'govgr-hidden-lg--up', mdUp && 'govgr-hidden-md--up', smUp && 'govgr-hidden-sm--up', xlUp && 'govgr-hidden-xl--up', xsUp && 'govgr-hidden-xs--up')
+    xsUpHidden: xsUp,
+    smUpHidden: smUp,
+    mdUpHidden: mdUp,
+    lgUpHidden: lgUp,
+    xlUpHidden: xlUp,
+    xsHidden: xs,
+    smHidden: sm,
+    mdHidden: md,
+    lgHidden: lg,
+    xlHidden: xl
   }, props), children);
 });
 var _default = exports["default"] = Hidden;

package/cjs/index.js

@@ -278,6 +278,28 @@ Object.keys(_ChoiceDividerText).forEach(function (key) {
     }
   });
 });
+var _Code = require("@digigov/react-core/Code");
+Object.keys(_Code).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Code[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Code[key];
+    }
+  });
+});
+var _CodeBlock = require("@digigov/react-core/CodeBlock");
+Object.keys(_CodeBlock).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CodeBlock[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CodeBlock[key];
+    }
+  });
+});
 var _Panel = require("@digigov/react-core/Panel");
 Object.keys(_Panel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/cjs/registry/index.js

@@ -59,6 +59,8 @@ var _digigov_react_core_ChipKeyValue = _interopRequireWildcard(require("@digigov
 var _digigov_react_core_ChoiceDividerText = _interopRequireWildcard(require("@digigov/react-core/ChoiceDividerText"));
 var _digigov_react_core_CircularProgress = _interopRequireWildcard(require("@digigov/react-core/CircularProgress"));
 var _digigov_react_core_CloseButton = _interopRequireWildcard(require("@digigov/react-core/CloseButton"));
+var _digigov_react_core_Code = _interopRequireWildcard(require("@digigov/react-core/Code"));
+var _digigov_react_core_CodeBlock = _interopRequireWildcard(require("@digigov/react-core/CodeBlock"));
 var _digigov_react_core_Container = _interopRequireWildcard(require("@digigov/react-core/Container"));
 var _digigov_react_core_CopyrightContainer = _interopRequireWildcard(require("@digigov/react-core/CopyrightContainer"));
 var _digigov_react_core_CopyToClipboardContainer = _interopRequireWildcard(require("@digigov/react-core/CopyToClipboardContainer"));
@@ -317,6 +319,8 @@ var _default = exports["default"] = {
   '@digigov/react-core/ChoiceDividerText': lazyImport(_digigov_react_core_ChoiceDividerText),
   '@digigov/react-core/CircularProgress': lazyImport(_digigov_react_core_CircularProgress),
   '@digigov/react-core/CloseButton': lazyImport(_digigov_react_core_CloseButton),
+  '@digigov/react-core/Code': lazyImport(_digigov_react_core_Code),
+  '@digigov/react-core/CodeBlock': lazyImport(_digigov_react_core_CodeBlock),
   '@digigov/react-core/Container': lazyImport(_digigov_react_core_Container),
   '@digigov/react-core/CopyrightContainer': lazyImport(_digigov_react_core_CopyrightContainer),
   '@digigov/react-core/CopyToClipboardContainer': lazyImport(_digigov_react_core_CopyToClipboardContainer),

package/index.d.ts

@@ -23,6 +23,8 @@ export * from '@digigov/react-core/Checkbox';
 export * from '@digigov/react-core/CheckboxConditional';
 export * from '@digigov/react-core/CheckboxItem';
 export * from '@digigov/react-core/ChoiceDividerText';
+export * from '@digigov/react-core/Code';
+export * from '@digigov/react-core/CodeBlock';
 export * from '@digigov/react-core/Panel';
 export * from '@digigov/react-core/PanelBody';
 export * from '@digigov/react-core/PanelBody';

package/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v1.0.3
+/** @license Digigov v1.1.0
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.
@@ -28,6 +28,8 @@ export * from '@digigov/react-core/Checkbox';
 export * from '@digigov/react-core/CheckboxConditional';
 export * from '@digigov/react-core/CheckboxItem';
 export * from '@digigov/react-core/ChoiceDividerText';
+export * from '@digigov/react-core/Code';
+export * from '@digigov/react-core/CodeBlock';
 export * from '@digigov/react-core/Panel';
 export * from '@digigov/react-core/PanelBody';
 export * from '@digigov/react-core/PanelBody';

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@digigov/react-core",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
   "main": "./cjs/index.js",
   "module": "./index.js",
   "peerDependencies": {
-    "@digigov/css": "1.0.3",
-    "@digigov/react-icons": "1.0.3",
+    "@digigov/css": "1.1.0",
+    "@digigov/react-icons": "1.1.0",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/registry/index.js

@@ -52,6 +52,8 @@ import * as _digigov_react_core_ChipKeyValue from '@digigov/react-core/ChipKeyVa
 import * as _digigov_react_core_ChoiceDividerText from '@digigov/react-core/ChoiceDividerText';
 import * as _digigov_react_core_CircularProgress from '@digigov/react-core/CircularProgress';
 import * as _digigov_react_core_CloseButton from '@digigov/react-core/CloseButton';
+import * as _digigov_react_core_Code from '@digigov/react-core/Code';
+import * as _digigov_react_core_CodeBlock from '@digigov/react-core/CodeBlock';
 import * as _digigov_react_core_Container from '@digigov/react-core/Container';
 import * as _digigov_react_core_CopyrightContainer from '@digigov/react-core/CopyrightContainer';
 import * as _digigov_react_core_CopyToClipboardContainer from '@digigov/react-core/CopyToClipboardContainer';
@@ -308,6 +310,8 @@ export default {
   '@digigov/react-core/ChoiceDividerText': lazyImport(_digigov_react_core_ChoiceDividerText),
   '@digigov/react-core/CircularProgress': lazyImport(_digigov_react_core_CircularProgress),
   '@digigov/react-core/CloseButton': lazyImport(_digigov_react_core_CloseButton),
+  '@digigov/react-core/Code': lazyImport(_digigov_react_core_Code),
+  '@digigov/react-core/CodeBlock': lazyImport(_digigov_react_core_CodeBlock),
   '@digigov/react-core/Container': lazyImport(_digigov_react_core_Container),
   '@digigov/react-core/CopyrightContainer': lazyImport(_digigov_react_core_CopyrightContainer),
   '@digigov/react-core/CopyToClipboardContainer': lazyImport(_digigov_react_core_CopyToClipboardContainer),

package/registry.d.ts

@@ -53,6 +53,8 @@ declare const _default: {
     '@digigov/react-core/ChoiceDividerText': {};
     '@digigov/react-core/CircularProgress': {};
     '@digigov/react-core/CloseButton': {};
+    '@digigov/react-core/Code': {};
+    '@digigov/react-core/CodeBlock': {};
     '@digigov/react-core/Container': {};
     '@digigov/react-core/CopyrightContainer': {};
     '@digigov/react-core/CopyToClipboardContainer': {};

package/src/Code/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Code with color="attribute" prop 1`] = `
+<ForwardRef(Code)
+  color="attribute"
+>
+  <ForwardRef(Typography)
+    as="code"
+    className="govgr-code--attr govgr-code"
+  >
+    <ForwardRef(Base)
+      as="code"
+      className="govgr-code--attr govgr-code"
+    >
+      <code
+        className="govgr-code--attr govgr-code"
+      >
+        hello
+      </code>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
+</ForwardRef(Code)>
+`;
+
+exports[`renders the Code with color="info" prop 1`] = `
+<ForwardRef(Code)
+  color="info"
+>
+  <ForwardRef(Typography)
+    as="code"
+    className="govgr-code"
+  >
+    <ForwardRef(Base)
+      as="code"
+      className="govgr-code"
+    >
+      <code
+        className="govgr-code"
+      >
+        hello
+      </code>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
+</ForwardRef(Code)>
+`;
+
+exports[`renders the Code with color="keyword" prop 1`] = `
+<ForwardRef(Code)
+  color="keyword"
+>
+  <ForwardRef(Typography)
+    as="code"
+    className="govgr-code--keyword govgr-code"
+  >
+    <ForwardRef(Base)
+      as="code"
+      className="govgr-code--keyword govgr-code"
+    >
+      <code
+        className="govgr-code--keyword govgr-code"
+      >
+        hello
+      </code>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
+</ForwardRef(Code)>
+`;
+
+exports[`renders the Code with color="name" prop 1`] = `
+<ForwardRef(Code)
+  color="name"
+>
+  <ForwardRef(Typography)
+    as="code"
+    className="govgr-code--name govgr-code"
+  >
+    <ForwardRef(Base)
+      as="code"
+      className="govgr-code--name govgr-code"
+    >
+      <code
+        className="govgr-code--name govgr-code"
+      >
+        hello
+      </code>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
+</ForwardRef(Code)>
+`;
+
+exports[`renders the Code with no props 1`] = `
+<ForwardRef(Code)>
+  <ForwardRef(Typography)
+    as="code"
+    className="govgr-code"
+  >
+    <ForwardRef(Base)
+      as="code"
+      className="govgr-code"
+    >
+      <code
+        className="govgr-code"
+      >
+        hello
+      </code>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
+</ForwardRef(Code)>
+`;

package/src/Code/index.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Code from '@digigov/react-core/Code';
+
+it('renders the Code with no props', () => {
+  expect(mount(<Code>hello</Code>)).toMatchSnapshot();
+});
+
+it('renders the Code with color="info" prop', () => {
+  expect(mount(<Code color="info">hello</Code>)).toMatchSnapshot();
+});
+
+it('renders the Code with color="attribute" prop', () => {
+  expect(mount(<Code color="attribute">hello</Code>)).toMatchSnapshot();
+});
+
+it('renders the Code with color="name" prop', () => {
+  expect(mount(<Code color="name">hello</Code>)).toMatchSnapshot();
+});
+
+it('renders the Code with color="keyword" prop', () => {
+  expect(mount(<Code color="keyword">hello</Code>)).toMatchSnapshot();
+});

package/src/Code/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import Typography, { TypographyProps } from '@digigov/react-core/Typography';
+export interface CodeProps extends TypographyProps {
+  /**
+   * size is optional.
+   * @value 'lg' Use it when a lg text is an introductory paragraph that you can use at the top of a page to summarize the content.
+   * @value 'md' The majority of your body should use the standard 'md' size.
+   * @value 'sm' Use it sparingly to make your text font size smaller: 16px on larger screens and 14px on smaller screens.
+   * @default 'md'
+   */
+  color?: 'default' | 'info'  | 'attribute' | 'string' | 'keyword' | 'name';
+}
+/**
+ * Code component is used for text formatting.
+ * If you need a paragraph, use the Paragraph component instead.
+ */
+export const Code = React.forwardRef<
+  HTMLElement | HTMLParagraphElement,
+  CodeProps
+>(function Code(
+  { color = 'default', className, children, ...props },
+  ref
+) {
+  return (
+    <Typography
+      as='code'
+      ref={ref}
+      className={clsx(className, {
+        'govgr-code': true,
+        'govgr-code--attr': color === 'attribute',
+        'govgr-code--string': color === 'string',
+        'govgr-code--keyword': color === 'keyword',
+        'govgr-code--name': color === 'name',
+
+      })}
+      {...props}
+    >
+      {children}
+    </Typography>
+  );
+});
+
+export default Code;

package/src/CodeBlock/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CodeBlock with no props 1`] = `
+<ForwardRef(Card)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-code-block__container"
+  >
+    <div
+      className="govgr-code-block__container"
+    >
+      <pre>
+        <code
+          className="govgr-code-block__content"
+        >
+          hello
+        </code>
+      </pre>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;

package/src/CodeBlock/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import CodeBlock from '@digigov/react-core/CodeBlock';
+
+it('renders the CodeBlock with no props', () => {
+  expect(mount(<CodeBlock>hello</CodeBlock>)).toMatchSnapshot();
+});

package/src/CodeBlock/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface CodeBlockProps extends BaseProps<'div'> {
+
+}
+/**
+ * CodeBlock can be used as a colored container for text.
+ * 
+ */
+export const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(function Card(
+  { className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-code-block__container': true,
+      })}
+      {...props}
+    >
+      <pre>
+        <code
+          className={clsx({
+            'govgr-code-block__content': true,
+          })}
+        >
+          {children}
+        </code>
+      </pre>
+    </Base>
+  );
+});
+
+export default CodeBlock;

package/src/DropdownButton/index.tsx

@@ -34,7 +34,7 @@ export interface DropdownButtonProps extends BaseProps<'summary'> {
   arrow?: boolean;
   /**
    * underline is optional.
-   * Use this prop when you want to use Dropdown button as <th> header in sorted table.
+   * Use this prop when you want to use Dropdown button as \<th\> header in sorted table.
    * @value true
    * @value false
    */

package/src/Hidden/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface HiddenProps extends BaseProps<'div'> {
@@ -33,6 +32,36 @@ export interface HiddenProps extends BaseProps<'div'> {
    * @default false
    */
   xlUp?: boolean;
+  /**
+   * @value true
+   * @value false
+   * @default false
+   */
+  xs?: boolean;
+  /**
+   * @value true
+   * @value false
+   * @default false
+   */
+  sm?: boolean;
+  /**
+   * @value true
+   * @value false
+   * @default false
+   */
+  md?: boolean;
+  /**
+   * @value true
+   * @value false
+   * @default false
+   */
+  lg?: boolean;
+  /**
+   * @value true
+   * @value false
+   * @default false
+   */
+  xl?: boolean;
 }
 /**
  * Hidden is used to responsively hide children based on the screen size.
@@ -41,20 +70,23 @@ export interface HiddenProps extends BaseProps<'div'> {
  */
 export const Hidden = React.forwardRef<HTMLDivElement, HiddenProps>(
   function Hidden(
-    { className, children, xsUp = false, smUp, mdUp, lgUp, xlUp, ...props },
+    { className, children, xsUp = false, smUp, mdUp, lgUp, xlUp, xs, sm, md, lg, xl, ...props },
     ref
   ) {
     return (
       <Base
         as="div"
         ref={ref}
-        className={clsx(className, {
-          'govgr-hidden-lg--up': lgUp,
-          'govgr-hidden-md--up': mdUp,
-          'govgr-hidden-sm--up': smUp,
-          'govgr-hidden-xl--up': xlUp,
-          'govgr-hidden-xs--up': xsUp,
-        })}
+        xsUpHidden={xsUp}
+        smUpHidden={smUp}
+        mdUpHidden={mdUp}
+        lgUpHidden={lgUp}
+        xlUpHidden={xlUp}
+        xsHidden={xs}
+        smHidden={sm}
+        mdHidden={md}
+        lgHidden={lg}
+        xlHidden={xl}
         {...props}
       >
         {children}

package/src/Typography/index.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TypographyProps
-  extends BaseProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span' | 'p'> {
+  extends BaseProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span' | 'p' | 'code'> {
   /**
    * fontSize is optional.
    * Add this fontSize override prop in order to change the font size.

package/src/index.ts

@@ -23,6 +23,8 @@ export * from '@digigov/react-core/Checkbox';
 export * from '@digigov/react-core/CheckboxConditional';
 export * from '@digigov/react-core/CheckboxItem';
 export * from '@digigov/react-core/ChoiceDividerText';
+export * from '@digigov/react-core/Code';
+export * from '@digigov/react-core/CodeBlock';
 export * from '@digigov/react-core/Panel';
 export * from '@digigov/react-core/PanelBody';
 export * from '@digigov/react-core/PanelBody';