@digigov/react-core 1.1.0-2a507fd6 → 1.1.1

package/cjs/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/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/Unpurge/index.js

@@ -8,7 +8,7 @@ exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 function Unpurge() {
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "\n    govgr-m-0 \n    govgr-mt-0 \n    govgr-mb-0 \n    govgr-mr-0 \n    govgr-ml-0 \n    govgr-p-0 \n    govgr-pt-0 \n    govgr-pb-0 \n    govgr-pr-0 \n    govgr-pl-0 \n    govgr-m-1 \n    govgr-mt-1 \n    govgr-mb-1 \n    govgr-mr-1 \n    govgr-ml-1 \n    govgr-p-1 \n    govgr-pt-1 \n    govgr-pb-1 \n    govgr-pr-1 \n    govgr-pl-1 \n    govgr-m-2 \n    govgr-mt-2 \n    govgr-mb-2 \n    govgr-mr-2 \n    govgr-ml-2 \n    govgr-p-2 \n    govgr-pt-2 \n    govgr-pb-2 \n    govgr-pr-2 \n    govgr-pl-2 \n    govgr-m-3 \n    govgr-mt-3 \n    govgr-mb-3 \n    govgr-mr-3 \n    govgr-ml-3 \n    govgr-p-3 \n    govgr-pt-3 \n    govgr-pb-3 \n    govgr-pr-3 \n    govgr-pl-3 \n    govgr-m-4 \n    govgr-mt-4 \n    govgr-mb-4 \n    govgr-mr-4 \n    govgr-ml-4 \n    govgr-p-4 \n    govgr-pt-4 \n    govgr-pb-4 \n    govgr-pr-4 \n    govgr-pl-4 \n    govgr-m-5 \n    govgr-mt-5 \n    govgr-mb-5 \n    govgr-mr-5 \n    govgr-ml-5 \n    govgr-p-5 \n    govgr-pt-5 \n    govgr-pb-5 \n    govgr-pr-5 \n    govgr-pl-5 \n    govgr-m-6 \n    govgr-mt-6 \n    govgr-mb-6 \n    govgr-mr-6 \n    govgr-ml-6 \n    govgr-p-6 \n    govgr-pt-6 \n    govgr-pb-6 \n    govgr-pr-6 \n    govgr-pl-6 \n    govgr-m-7 \n    govgr-mt-7 \n    govgr-mb-7 \n    govgr-mr-7 \n    govgr-ml-7 \n    govgr-p-7 \n    govgr-pt-7 \n    govgr-pb-7 \n    govgr-pr-7 \n    govgr-pl-7 \n    govgr-m-8 \n    govgr-mt-8 \n    govgr-mb-8 \n    govgr-mr-8 \n    govgr-ml-8 \n    govgr-m-9 \n    govgr-mt-9 \n    govgr-mb-9 \n    govgr-mr-9 \n    govgr-ml-9 \n    govgr-m-10 \n    govgr-mt-10 \n    govgr-mb-10 \n    govgr-mr-10 \n    govgr-ml-10 \n    govgr-m-11 \n    govgr-mt-11 \n    govgr-mb-11 \n    govgr-mr-11 \n    govgr-ml-11 \n    govgr-m-12 \n    govgr-mt-12 \n    govgr-mb-12 \n    govgr-mr-12 \n    govgr-ml-12 \n    govgr-p-8 \n    govgr-pt-8 \n    govgr-pb-8 \n    govgr-pr-8 \n    govgr-pl-8 \n    govgr-p-9 \n    govgr-pt-9 \n    govgr-pb-9 \n    govgr-pr-9 \n    govgr-pl-9 \n    govgr-p-10\n    govgr-pt-10\n    govgr-pb-10\n    govgr-pr-10\n    govgr-pl-10\n    govgr-p-11\n    govgr-pt-11\n    govgr-pb-11\n    govgr-pr-11\n    govgr-pl-11\n    govgr-p-12\n    govgr-pt-12\n    govgr-pb-12\n    govgr-pr-12\n    govgr-pl-12\n    govgr-gap-1\n    govgr-gap-2\n    govgr-gap-4\n    govgr-gap-6\n    govgr-gap-8\n    govgr-gap-10\n    govgr-gap-12\n    govgr-gap-xs-1\n    govgr-gap-xs-2\n    govgr-gap-xs-4\n    govgr-gap-xs-5\n    govgr-gap-xs-6\n    govgr-gap-xs-8\n    govgr-gap-xs-10\n    govgr-gap-xs-12\n    govgr-gap-sm-1\n    govgr-gap-sm-2\n    govgr-gap-sm-4\n    govgr-gap-sm-5\n    govgr-gap-sm-6\n    govgr-gap-sm-8\n    govgr-gap-sm-10\n    govgr-gap-sm-12\n    govgr-gap-md-1\n    govgr-gap-md-2\n    govgr-gap-md-4\n    govgr-gap-md-5\n    govgr-gap-md-6\n    govgr-gap-md-8\n    govgr-gap-md-10\n    govgr-gap-md-12\n    govgr-gap-lg-1\n    govgr-gap-lg-2\n    govgr-gap-lg-4\n    govgr-gap-lg-5\n    govgr-gap-lg-6\n    govgr-gap-lg-8\n    govgr-gap-lg-10\n    govgr-gap-lg-12\n    govgr-gap-xl-1\n    govgr-gap-xl-2\n    govgr-gap-xl-4\n    govgr-gap-xl-5\n    govgr-gap-xl-6\n    govgr-gap-xl-8\n    govgr-gap-xl-10\n    govgr-gap-xl-12\n    govgr-!-font-size-14\n    govgr-!-font-size-16\n    govgr-!-font-size-19\n    govgr-!-font-size-24\n    govgr-!-font-size-30\n    govgr-!-font-size-36\n    govgr-!-font-size-48\n    govgr-!-font-size-72\n    govgr-!-font-weight-regular\n    govgr-!-font-weight-bold\n    govgr-print-hidden\n    govgr-svg-icon--arrow\n    govgr-svg-icon--chevron\n    govgr-svg-icon--burger\n    govgr-svg-icon--burger--active\n    govgr-svg-icon--caret\n    govgr-svg-icon--check\n    govgr-svg-icon--close\n    govgr-svg-icon--globe\n    govgr-svg-icon--moreVert\n    govgr-svg-icon--uncheck\n    xs:govgr-grid__col-span-1\n    xs:govgr-grid__col-span-2\n    xs:govgr-grid__col-span-3\n    xs:govgr-grid__col-span-4\n    xs:govgr-grid__col-span-5\n    xs:govgr-grid__col-span-6\n    xs:govgr-grid__col-span-7\n    xs:govgr-grid__col-span-8\n    xs:govgr-grid__col-span-9\n    xs:govgr-grid__col-span-10\n    xs:govgr-grid__col-span-11\n    xs:govgr-grid__col-span-12\n    sm:govgr-grid__col-span-1\n    sm:govgr-grid__col-span-2\n    sm:govgr-grid__col-span-3\n    sm:govgr-grid__col-span-4\n    sm:govgr-grid__col-span-5\n    sm:govgr-grid__col-span-6\n    sm:govgr-grid__col-span-7\n    sm:govgr-grid__col-span-8\n    sm:govgr-grid__col-span-9\n    sm:govgr-grid__col-span-10\n    sm:govgr-grid__col-span-11\n    sm:govgr-grid__col-span-12\n    md:govgr-grid__col-span-1\n    md:govgr-grid__col-span-2\n    md:govgr-grid__col-span-3\n    md:govgr-grid__col-span-4\n    md:govgr-grid__col-span-5\n    md:govgr-grid__col-span-6\n    md:govgr-grid__col-span-7\n    md:govgr-grid__col-span-8\n    md:govgr-grid__col-span-9\n    md:govgr-grid__col-span-10\n    md:govgr-grid__col-span-11\n    md:govgr-grid__col-span-12\n    lg:govgr-grid__col-span-1\n    lg:govgr-grid__col-span-2\n    lg:govgr-grid__col-span-3\n    lg:govgr-grid__col-span-4\n    lg:govgr-grid__col-span-5\n    lg:govgr-grid__col-span-6\n    lg:govgr-grid__col-span-7\n    lg:govgr-grid__col-span-8\n    lg:govgr-grid__col-span-9\n    lg:govgr-grid__col-span-10\n    lg:govgr-grid__col-span-11\n    lg:govgr-grid__col-span-12\n    govgr-stack--row\n    govgr-stack--row-reverse\n    govgr-stack--column\n    govgr-stack--column-reverse\n    govgr-stack--justify-flex-start\n    govgr-stack--justify-flex-end\n    govgr-stack--justify-center\n    govgr-stack--justify-space-between\n    govgr-stack--justify-space-around\n    govgr-stack--justify-space-evenly \n    govgr-stack--align-stretch\n    govgr-stack--align-flex-start\n    govgr-stack--align-flex-end\n    govgr-stack--align-center\n    govgr-stack--align-baseline\n    govgr-stack--content-flex-start\n    govgr-stack--content-flex-end\n    govgr-stack--content-center\n    govgr-stack--content-space-between\n    govgr-stack--content-space-around\n    govgr-stack--content-space-evenly \n    govgr-notification-banner--info\n    govgr-notification-banner--success\n    govgr-notification-banner--warning\n    govgr-notification-banner--error\n    govgr-input--width-2-char\n    govgr-input--width-3-char\n    govgr-input--width-4-char\n    govgr-input--width-5-char\n    govgr-input--width-10-char\n    govgr-input--width-20-char\n    govgr-!-width-one-quarter\n    govgr-!-width-one-third\n    govgr-!-width-one-half\n    govgr-!-width-two-thirds\n    govgr-!-width-three-quarters\n    govgr-!-width-one-third\n    govgr-!-width-one-half\n    govgr-!-width-two-thirds\n    govgr-!-width-three-quarters\n    govgr-!-width-full\n    govgr-table__caption--sm\n    govgr-table__caption--md\n    govgr-table__caption--lg\n    govgr-table__caption--xl\n    govgr-task-list__content__tag--primary\n    govgr-task-list__content__tag--secondary\n    govgr-task-list__content__tag--info\n    govgr-svg-icon--xs\n    govgr-svg-icon--sm\n    govgr-svg-icon--md\n    govgr-svg-icon--lg\n    govgr-svg-icon--xl\n    govgr-caption-md\n    govgr-caption-lg\n    govgr-caption-xl\n    govgr-heading-xs\n    govgr-heading-sm\n    govgr-heading-md\n    govgr-heading-lg\n    govgr-heading-xl\n    govgr-image-logo--light\n    govgr-image-logo--dark\n    "
+    className: "\n    govgr-m-0\n    govgr-m-1\n    govgr-m-2\n    govgr-m-3\n    govgr-m-4\n    govgr-m-5\n    govgr-m-6\n    govgr-m-7\n    govgr-m-8\n    govgr-m-9\n    govgr-m-10\n    govgr-m-11\n    govgr-m-12\n    govgr-m-14\n    govgr-m-16\n    govgr-m-20\n    govgr-m-24\n    govgr-m-28\n    govgr-m-32\n    govgr-m-36\n    govgr-m-40\n    govgr-m-44\n    govgr-m-48\n    govgr-m-52\n    govgr-m-56\n    govgr-m-60\n    govgr-m-64\n    govgr-m-72\n    govgr-m-80\n    govgr-m-96\n    govgr-m-px\n    govgr-m-0.5\n    govgr-m-1.5\n    govgr-m-2.5\n    govgr-m-3.5\n    govgr-mt-0\n    govgr-mt-1\n    govgr-mt-2\n    govgr-mt-3\n    govgr-mt-4\n    govgr-mt-5\n    govgr-mt-6\n    govgr-mt-7\n    govgr-mt-8\n    govgr-mt-9\n    govgr-mt-10\n    govgr-mt-11\n    govgr-mt-12\n    govgr-mt-14\n    govgr-mt-16\n    govgr-mt-20\n    govgr-mt-24\n    govgr-mt-28\n    govgr-mt-32\n    govgr-mt-36\n    govgr-mt-40\n    govgr-mt-44\n    govgr-mt-48\n    govgr-mt-52\n    govgr-mt-56\n    govgr-mt-60\n    govgr-mt-64\n    govgr-mt-72\n    govgr-mt-80\n    govgr-mt-96\n    govgr-mt-px\n    govgr-mt-0.5\n    govgr-mt-1.5\n    govgr-mt-2.5\n    govgr-mt-3.5\n    govgr-mr-0\n    govgr-mr-1\n    govgr-mr-2\n    govgr-mr-3\n    govgr-mr-4\n    govgr-mr-5\n    govgr-mr-6\n    govgr-mr-7\n    govgr-mr-8\n    govgr-mr-9\n    govgr-mr-10\n    govgr-mr-11\n    govgr-mr-12\n    govgr-mr-14\n    govgr-mr-16\n    govgr-mr-20\n    govgr-mr-24\n    govgr-mr-28\n    govgr-mr-32\n    govgr-mr-36\n    govgr-mr-40\n    govgr-mr-44\n    govgr-mr-48\n    govgr-mr-52\n    govgr-mr-56\n    govgr-mr-60\n    govgr-mr-64\n    govgr-mr-72\n    govgr-mr-80\n    govgr-mr-96\n    govgr-mr-px\n    govgr-mr-0.5\n    govgr-mr-1.5\n    govgr-mr-2.5\n    govgr-mr-3.5\n    govgr-ml-0\n    govgr-ml-1\n    govgr-ml-2\n    govgr-ml-3\n    govgr-ml-4\n    govgr-ml-5\n    govgr-ml-6\n    govgr-ml-7\n    govgr-ml-8\n    govgr-ml-9\n    govgr-ml-10\n    govgr-ml-11\n    govgr-ml-12\n    govgr-ml-14\n    govgr-ml-16\n    govgr-ml-20\n    govgr-ml-24\n    govgr-ml-28\n    govgr-ml-32\n    govgr-ml-36\n    govgr-ml-40\n    govgr-ml-44\n    govgr-ml-48\n    govgr-ml-52\n    govgr-ml-56\n    govgr-ml-60\n    govgr-ml-64\n    govgr-ml-72\n    govgr-ml-80\n    govgr-ml-96\n    govgr-ml-px\n    govgr-ml-0.5\n    govgr-ml-1.5\n    govgr-ml-2.5\n    govgr-ml-3.5\n    govgr-mb-0\n    govgr-mb-1\n    govgr-mb-2\n    govgr-mb-3\n    govgr-mb-4\n    govgr-mb-5\n    govgr-mb-6\n    govgr-mb-7\n    govgr-mb-8\n    govgr-mb-9\n    govgr-mb-10\n    govgr-mb-11\n    govgr-mb-12\n    govgr-mb-14\n    govgr-mb-16\n    govgr-mb-20\n    govgr-mb-24\n    govgr-mb-28\n    govgr-mb-32\n    govgr-mb-36\n    govgr-mb-40\n    govgr-mb-44\n    govgr-mb-48\n    govgr-mb-52\n    govgr-mb-56\n    govgr-mb-60\n    govgr-mb-64\n    govgr-mb-72\n    govgr-mb-80\n    govgr-mb-96\n    govgr-mb-px\n    govgr-mb-0.5\n    govgr-mb-1.5\n    govgr-mb-2.5\n    govgr-mb-3.5\n    govgr-p-0\n    govgr-p-1\n    govgr-p-2\n    govgr-p-3\n    govgr-p-4\n    govgr-p-5\n    govgr-p-6\n    govgr-p-7\n    govgr-p-8\n    govgr-p-9\n    govgr-p-10\n    govgr-p-11\n    govgr-p-12\n    govgr-p-14\n    govgr-p-16\n    govgr-p-20\n    govgr-p-24\n    govgr-p-28\n    govgr-p-32\n    govgr-p-36\n    govgr-p-40\n    govgr-p-44\n    govgr-p-48\n    govgr-p-52\n    govgr-p-56\n    govgr-p-60\n    govgr-p-64\n    govgr-p-72\n    govgr-p-80\n    govgr-p-96\n    govgr-p-px\n    govgr-p-0.5\n    govgr-p-1.5\n    govgr-p-2.5\n    govgr-p-3.5\n    govgr-pt-0\n    govgr-pt-1\n    govgr-pt-2\n    govgr-pt-3\n    govgr-pt-4\n    govgr-pt-5\n    govgr-pt-6\n    govgr-pt-7\n    govgr-pt-8\n    govgr-pt-9\n    govgr-pt-10\n    govgr-pt-11\n    govgr-pt-12\n    govgr-pt-14\n    govgr-pt-16\n    govgr-pt-20\n    govgr-pt-24\n    govgr-pt-28\n    govgr-pt-32\n    govgr-pt-36\n    govgr-pt-40\n    govgr-pt-44\n    govgr-pt-48\n    govgr-pt-52\n    govgr-pt-56\n    govgr-pt-60\n    govgr-pt-64\n    govgr-pt-72\n    govgr-pt-80\n    govgr-pt-96\n    govgr-pt-px\n    govgr-pt-0.5\n    govgr-pt-1.5\n    govgr-pt-2.5\n    govgr-pt-3.5\n    govgr-pr-0\n    govgr-pr-1\n    govgr-pr-2\n    govgr-pr-3\n    govgr-pr-4\n    govgr-pr-5\n    govgr-pr-6\n    govgr-pr-7\n    govgr-pr-8\n    govgr-pr-9\n    govgr-pr-10\n    govgr-pr-11\n    govgr-pr-12\n    govgr-pr-14\n    govgr-pr-16\n    govgr-pr-20\n    govgr-pr-24\n    govgr-pr-28\n    govgr-pr-32\n    govgr-pr-36\n    govgr-pr-40\n    govgr-pr-44\n    govgr-pr-48\n    govgr-pr-52\n    govgr-pr-56\n    govgr-pr-60\n    govgr-pr-64\n    govgr-pr-72\n    govgr-pr-80\n    govgr-pr-96\n    govgr-pr-px\n    govgr-pr-0.5\n    govgr-pr-1.5\n    govgr-pr-2.5\n    govgr-pr-3.5\n    govgr-pl-0\n    govgr-pl-1\n    govgr-pl-2\n    govgr-pl-3\n    govgr-pl-4\n    govgr-pl-5\n    govgr-pl-6\n    govgr-pl-7\n    govgr-pl-8\n    govgr-pl-9\n    govgr-pl-10\n    govgr-pl-11\n    govgr-pl-12\n    govgr-pl-14\n    govgr-pl-16\n    govgr-pl-20\n    govgr-pl-24\n    govgr-pl-28\n    govgr-pl-32\n    govgr-pl-36\n    govgr-pl-40\n    govgr-pl-44\n    govgr-pl-48\n    govgr-pl-52\n    govgr-pl-56\n    govgr-pl-60\n    govgr-pl-64\n    govgr-pl-72\n    govgr-pl-80\n    govgr-pl-96\n    govgr-pl-px\n    govgr-pl-0.5\n    govgr-pl-1.5\n    govgr-pl-2.5\n    govgr-pl-3.5\n    govgr-pb-0\n    govgr-pb-1\n    govgr-pb-2\n    govgr-pb-3\n    govgr-pb-4\n    govgr-pb-5\n    govgr-pb-6\n    govgr-pb-7\n    govgr-pb-8\n    govgr-pb-9\n    govgr-pb-10\n    govgr-pb-11\n    govgr-pb-12\n    govgr-pb-14\n    govgr-pb-16\n    govgr-pb-20\n    govgr-pb-24\n    govgr-pb-28\n    govgr-pb-32\n    govgr-pb-36\n    govgr-pb-40\n    govgr-pb-44\n    govgr-pb-48\n    govgr-pb-52\n    govgr-pb-56\n    govgr-pb-60\n    govgr-pb-64\n    govgr-pb-72\n    govgr-pb-80\n    govgr-pb-96\n    govgr-pb-px\n    govgr-pb-0.5\n    govgr-pb-1.5\n    govgr-pb-2.5\n    govgr-pb-3.5\n    govgr-gap-1\n    govgr-gap-2\n    govgr-gap-4\n    govgr-gap-6\n    govgr-gap-8\n    govgr-gap-10\n    govgr-gap-12\n    govgr-gap-xs-1\n    govgr-gap-xs-2\n    govgr-gap-xs-4\n    govgr-gap-xs-5\n    govgr-gap-xs-6\n    govgr-gap-xs-8\n    govgr-gap-xs-10\n    govgr-gap-xs-12\n    govgr-gap-sm-1\n    govgr-gap-sm-2\n    govgr-gap-sm-4\n    govgr-gap-sm-5\n    govgr-gap-sm-6\n    govgr-gap-sm-8\n    govgr-gap-sm-10\n    govgr-gap-sm-12\n    govgr-gap-md-1\n    govgr-gap-md-2\n    govgr-gap-md-4\n    govgr-gap-md-5\n    govgr-gap-md-6\n    govgr-gap-md-8\n    govgr-gap-md-10\n    govgr-gap-md-12\n    govgr-gap-lg-1\n    govgr-gap-lg-2\n    govgr-gap-lg-4\n    govgr-gap-lg-5\n    govgr-gap-lg-6\n    govgr-gap-lg-8\n    govgr-gap-lg-10\n    govgr-gap-lg-12\n    govgr-gap-xl-1\n    govgr-gap-xl-2\n    govgr-gap-xl-4\n    govgr-gap-xl-5\n    govgr-gap-xl-6\n    govgr-gap-xl-8\n    govgr-gap-xl-10\n    govgr-gap-xl-12\n    govgr-!-font-size-14\n    govgr-!-font-size-16\n    govgr-!-font-size-19\n    govgr-!-font-size-24\n    govgr-!-font-size-30\n    govgr-!-font-size-36\n    govgr-!-font-size-48\n    govgr-!-font-size-72\n    govgr-!-font-weight-regular\n    govgr-!-font-weight-bold\n    govgr-print-hidden\n    govgr-svg-icon--arrow\n    govgr-svg-icon--chevron\n    govgr-svg-icon--burger\n    govgr-svg-icon--burger--active\n    govgr-svg-icon--caret\n    govgr-svg-icon--check\n    govgr-svg-icon--close\n    govgr-svg-icon--globe\n    govgr-svg-icon--moreVert\n    govgr-svg-icon--uncheck\n    xs:govgr-grid__col-span-1\n    xs:govgr-grid__col-span-2\n    xs:govgr-grid__col-span-3\n    xs:govgr-grid__col-span-4\n    xs:govgr-grid__col-span-5\n    xs:govgr-grid__col-span-6\n    xs:govgr-grid__col-span-7\n    xs:govgr-grid__col-span-8\n    xs:govgr-grid__col-span-9\n    xs:govgr-grid__col-span-10\n    xs:govgr-grid__col-span-11\n    xs:govgr-grid__col-span-12\n    sm:govgr-grid__col-span-1\n    sm:govgr-grid__col-span-2\n    sm:govgr-grid__col-span-3\n    sm:govgr-grid__col-span-4\n    sm:govgr-grid__col-span-5\n    sm:govgr-grid__col-span-6\n    sm:govgr-grid__col-span-7\n    sm:govgr-grid__col-span-8\n    sm:govgr-grid__col-span-9\n    sm:govgr-grid__col-span-10\n    sm:govgr-grid__col-span-11\n    sm:govgr-grid__col-span-12\n    md:govgr-grid__col-span-1\n    md:govgr-grid__col-span-2\n    md:govgr-grid__col-span-3\n    md:govgr-grid__col-span-4\n    md:govgr-grid__col-span-5\n    md:govgr-grid__col-span-6\n    md:govgr-grid__col-span-7\n    md:govgr-grid__col-span-8\n    md:govgr-grid__col-span-9\n    md:govgr-grid__col-span-10\n    md:govgr-grid__col-span-11\n    md:govgr-grid__col-span-12\n    lg:govgr-grid__col-span-1\n    lg:govgr-grid__col-span-2\n    lg:govgr-grid__col-span-3\n    lg:govgr-grid__col-span-4\n    lg:govgr-grid__col-span-5\n    lg:govgr-grid__col-span-6\n    lg:govgr-grid__col-span-7\n    lg:govgr-grid__col-span-8\n    lg:govgr-grid__col-span-9\n    lg:govgr-grid__col-span-10\n    lg:govgr-grid__col-span-11\n    lg:govgr-grid__col-span-12\n    govgr-stack--row\n    govgr-stack--row-reverse\n    govgr-stack--column\n    govgr-stack--column-reverse\n    govgr-stack--justify-flex-start\n    govgr-stack--justify-flex-end\n    govgr-stack--justify-center\n    govgr-stack--justify-space-between\n    govgr-stack--justify-space-around\n    govgr-stack--justify-space-evenly \n    govgr-stack--align-stretch\n    govgr-stack--align-flex-start\n    govgr-stack--align-flex-end\n    govgr-stack--align-center\n    govgr-stack--align-baseline\n    govgr-stack--content-flex-start\n    govgr-stack--content-flex-end\n    govgr-stack--content-center\n    govgr-stack--content-space-between\n    govgr-stack--content-space-around\n    govgr-stack--content-space-evenly \n    govgr-notification-banner--info\n    govgr-notification-banner--success\n    govgr-notification-banner--warning\n    govgr-notification-banner--error\n    govgr-input--width-2-char\n    govgr-input--width-3-char\n    govgr-input--width-4-char\n    govgr-input--width-5-char\n    govgr-input--width-10-char\n    govgr-input--width-20-char\n    govgr-!-width-one-quarter\n    govgr-!-width-one-third\n    govgr-!-width-one-half\n    govgr-!-width-two-thirds\n    govgr-!-width-three-quarters\n    govgr-!-width-one-third\n    govgr-!-width-one-half\n    govgr-!-width-two-thirds\n    govgr-!-width-three-quarters\n    govgr-!-width-full\n    govgr-table__caption--sm\n    govgr-table__caption--md\n    govgr-table__caption--lg\n    govgr-table__caption--xl\n    govgr-task-list__content__tag--primary\n    govgr-task-list__content__tag--secondary\n    govgr-task-list__content__tag--info\n    govgr-svg-icon--xs\n    govgr-svg-icon--sm\n    govgr-svg-icon--md\n    govgr-svg-icon--lg\n    govgr-svg-icon--xl\n    govgr-caption-md\n    govgr-caption-lg\n    govgr-caption-xl\n    govgr-heading-xs\n    govgr-heading-sm\n    govgr-heading-md\n    govgr-heading-lg\n    govgr-heading-xl\n    govgr-image-logo--light\n    govgr-image-logo--dark\n    "
   });
 }
 var _default = exports["default"] = Unpurge;

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.1.0-2a507fd6
+/** @license Digigov v1.1.1
  *
  * 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.1.0-2a507fd6",
+  "version": "1.1.1",
   "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.1.0-2a507fd6",
-    "@digigov/react-icons": "1.1.0-2a507fd6",
+    "@digigov/css": "1.1.1",
+    "@digigov/react-icons": "1.1.1",
     "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)>
+`;