@sats-group/ui-lib 74.2.0

package/.nvmrc

@@ -0,0 +1 @@
+v18

package/README.md

@@ -0,0 +1,35 @@
+# 📚 SATS Web UI Library
+
+This repo is the home of reusable SATS themed components and tokens, implemented using several parts of [SATS Design System](https://www.figma.com/files/project/2752581/SATS-Design-System):
+
+- [Styles](https://www.figma.com/file/WzKCwRY09zn4rzRVfY0YvdRt/sats-ds-styles) includes primitives like color, apect ratio, elevation, spacing, and more.
+- [Assets](https://www.figma.com/file/ZigDYZUrzJDM8RQumAFozjYJ/sats-ds-assets), which we only use for logos. These are also exported and processed with a tool (see the `logos` script).
+- [Shared Web Components](https://www.figma.com/file/CemEcLe6DpoD5ELrFqlwZ7/shared-web-components) includes web UI meant to be the same across all SATS web applications.
+
+## 🍽 Consuming the Library
+
+Installing the library as a dependency would in this case be done using
+
+```bash
+npm install --save sats-ui-lib
+```
+
+## 📖 More Documentation
+
+### 👩‍💻 Using This Library
+
+- [Colors](docs/colors.md)
+- [Corner radius](docs/corner-radius.md)
+- [Elevation](docs/elevation.md)
+- [Fonts](docs/fonts.md)
+- [Logos](docs/logos.md)
+- [React components](docs/react.md)
+- [Spacing](docs/spacing.md)
+
+### 🌍 Visualising the components
+
+To see the components online, head to [SATS UI Library](https://ui-lib.sats.com/)
+
+### 👷‍♀️ Making This Library
+
+- [Contribute](docs/contributing.md)

package/catalog-info.yaml

@@ -0,0 +1,14 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: sats-ui-lib
+  title: SATS UI Library
+  links:
+    - url: https://ui-lib.sats.com
+      title: Website
+    - url: https://satsdigital.slack.com/archives/C02U0R4004F
+      title: Slack Channel
+spec:
+  type: library
+  lifecycle: production
+  owner: sats-internal-apps-team

package/eslint.config.mjs

@@ -0,0 +1,94 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import prettier from 'eslint-plugin-prettier';
+import react from 'eslint-plugin-react';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: [
+      '**/.vscode',
+      '**/site/build',
+      '**/dist',
+      '**/docs',
+      '**/node_modules',
+      '**/test-results',
+    ],
+  },
+  ...compat.extends(
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+  ),
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      prettier,
+      react,
+    },
+    languageOptions: {
+      globals: {},
+      parser: tsParser,
+    },
+    settings: {
+      'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
+      react: {
+        version: '18',
+      },
+    },
+    rules: {
+      '@typescript-eslint/no-require-imports': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/ban-types': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-redeclare': 'error',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          args: 'after-used',
+          argsIgnorePattern: '(^_|^next$)',
+        },
+      ],
+      '@typescript-eslint/prefer-literal-enum-member': 'error',
+      'arrow-parens': ['warn', 'as-needed'],
+      eqeqeq: 'error',
+      'no-console': 'warn',
+      'no-dupe-args': 'error',
+      'no-dupe-keys': 'error',
+      'no-irregular-whitespace': 'warn',
+      'no-unreachable': 'error',
+      'no-use-before-define': 'off',
+      'no-warning-comments': 'warn',
+      'prettier/prettier': [
+        'warn',
+        {
+          endOfLine: 'auto',
+          singleQuote: true,
+        },
+      ],
+      semi: 'error',
+      strict: 'off',
+    },
+  },
+  {
+    files: ['**/*.js', '**/*.ts'],
+    rules: {
+      '@typescript-eslint/no-var-requires': 'off',
+    },
+  },
+];

package/fonts/LICENSE.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2016-2019 The Inter Project Authors (me@rsms.me)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/logos/e-avatar.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="72" viewBox="0 0 73 72" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.2873 24.4807L36.2664 31.382H49.0655L46.6545 39.8283H33.8555L31.6218 47.5537H48.7818L46.3 56H19L30.6291 16H58L55.5182 24.4464H38.2873V24.4807Z" />
+</svg>

package/logos/elixia-letter.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="51" viewBox="0 0 48 51" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.7382 10.7782L21.2509 19.5491H37.0036L34.0364 30.2836H18.2836L15.5345 40.1018H36.6545L33.6 50.8364H0L14.3127 0H48L44.9455 10.7345H23.7382V10.7782Z" />
+</svg>

package/logos/elixia-small.svg

@@ -0,0 +1,8 @@
+<svg width="93" height="21" viewBox="0 0 93 21" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.93959 4.2794L8.90242 7.80361H15.3848L14.1747 12.1669H7.60595L6.48234 16.1107H15.2983L14.0019 20.474H0L5.96376 0H19.9656L18.6691 4.36331H9.93959V4.2794Z" />
+<path d="M32.5846 16.1946L31.2881 20.5579H17.8048L23.7686 0.0839119H28.9545L24.2872 16.2785H32.5846V16.1946Z" />
+<path d="M40.5362 0H45.7221L39.7584 20.474H34.5725L40.5362 0Z" />
+<path d="M58.5139 10.4887L62.0576 20.474H56.7853L54.6245 14.0129L49.0065 20.474H43.0427L52.6366 9.81744L49.0929 0H54.3652L56.526 6.29323L61.9712 0H67.9349L58.5139 10.4887Z" />
+<path d="M71.0465 0H76.2323L70.2686 20.474H65.0827L71.0465 0Z" />
+<path d="M93 0V20.474H88.4191V16.1946H81.4182L78.9981 20.474H73.4665L85.9991 0H93ZM88.4191 11.8313V3.85985L83.8383 11.8313H88.4191Z" />
+</svg>

package/logos/elixia.svg

@@ -0,0 +1,8 @@
+<svg width="229" height="52" viewBox="0 0 229 52" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.4082 10.8245L21.8612 19.7388H37.7796L34.8082 30.7755H18.6776L15.9184 40.751H37.5674L34.3837 51.7877H0L14.6449 0H49.0286L45.8449 11.0367H24.4082V10.8245Z" />
+<path d="M80.0163 40.9633L76.8327 52H43.7225L58.3673 0.21225H71.102L59.6408 41.1755H80.0163V40.9633Z" />
+<path d="M99.5429 0H112.278L97.6327 51.7877H84.898L99.5429 0Z" />
+<path d="M143.69 26.5306L152.392 51.7877H139.445L134.139 35.4449L120.343 51.7877H105.698L129.257 24.8326L120.555 0H133.502L138.808 15.9184L152.18 0H166.825L143.69 26.5306Z" />
+<path d="M174.465 0H187.2L172.555 51.7877H159.82L174.465 0Z" />
+<path d="M228.376 0V51.7877H217.127V40.9633H199.935L193.992 51.7877H180.408L211.184 0H228.376ZM217.127 29.9265V9.76326L205.878 29.9265H217.127Z" />
+</svg>

package/logos/s-avatar.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="72" viewBox="0 0 73 72" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.7539 33.8218L40.1797 31.5776C38.6351 30.2574 37.7663 29.1683 37.7663 27.6832C37.7663 25.802 39.1178 24.1188 41.9817 24.1188C43.9124 24.1188 45.7143 24.8119 47.3554 26.429L54.4668 20.9835C52.5683 18.4422 48.7069 16 43.0114 16C34.6129 16 28.499 21.6106 28.499 29.0033C28.499 32.7327 30.494 35.3069 33.1005 37.5842L35.6747 39.8284C37.4445 41.4125 38.1846 42.4026 38.1846 43.7888C38.1846 45.868 36.7366 47.8482 33.1005 47.8482C30.3975 47.8482 27.9841 46.7591 26.1822 44.6799L19.1351 50.0924C21.7737 53.4257 26.2787 56 32.4569 56C41.9495 56 47.452 50.1254 47.452 42.3696C47.4841 38.4422 45.2317 35.967 42.7539 33.8218Z" />
+</svg>

package/logos/sats-letter.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="52" viewBox="0 0 48 52" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.9917 23.1683L28.5594 20.2508C26.5 18.5347 25.3416 17.1188 25.3416 15.1881C25.3416 12.7426 27.1436 10.5545 30.962 10.5545C33.5363 10.5545 35.9389 11.4554 38.1271 13.5578L47.6089 6.47855C45.0776 3.17492 39.929 0 32.335 0C21.137 0 12.9851 7.29373 12.9851 16.9043C12.9851 21.7525 15.6452 25.099 19.1205 28.0594L22.5528 30.9769C24.9125 33.0363 25.8993 34.3234 25.8993 36.1254C25.8993 38.8284 23.9686 41.4026 19.1205 41.4026C15.5165 41.4026 12.2987 39.9868 9.89604 37.2838L0.5 44.3201C4.01815 48.6535 10.0248 52 18.2624 52C30.9191 52 38.2558 44.363 38.2558 34.2805C38.2987 29.1749 35.2954 25.9571 31.9917 23.1683Z" />
+</svg>

package/logos/sats-small.svg

@@ -0,0 +1,3 @@
+<svg width="79" height="25" viewBox="0 0 79 25" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.51429 17.4039L0.282146 20.6731C1.88096 22.9808 4.70238 24.7115 8.65238 24.7115C14.4833 24.7115 17.869 21.1539 17.869 16.4423C17.869 14.0385 16.4583 12.5962 14.9536 11.25L13.4488 9.80769C12.5083 8.94231 12.0381 8.26923 12.0381 7.40385C12.0381 6.25 12.7905 5.19231 14.5774 5.19231C15.8 5.19231 17.0226 5.67308 18.1512 6.92308L22.3833 3.65385C21.3488 2.01924 18.9036 0.288467 15.1417 0.288467C10.0631 0.288467 6.30119 3.75 6.30119 8.26923C6.30119 10.4808 7.52381 12.0192 9.12262 13.4615L10.6274 14.9039C11.6619 15.8654 12.1321 16.4423 12.1321 17.3077C12.1321 18.4615 11.2857 19.7115 9.02857 19.7115C7.24167 19.7115 5.64286 18.8462 4.51429 17.4039ZM60.7548 17.4039L56.5226 20.6731C58.0274 22.9808 60.9429 24.7115 64.8929 24.7115C70.7238 24.7115 74.1095 21.1539 74.1095 16.4423C74.1095 14.0385 72.6988 12.5962 71.194 11.25L69.6893 9.80769C68.7488 8.94231 68.2786 8.26923 68.2786 7.40385C68.2786 6.25 69.031 5.19231 70.8179 5.19231C72.0405 5.19231 73.2631 5.67308 74.3917 6.92308L78.6238 3.65385C77.5893 2.01924 75.144 0.288467 71.3821 0.288467C66.3036 0.288467 62.5417 3.75 62.5417 8.26923C62.5417 10.4808 63.7643 12.0192 65.3631 13.4615L66.8679 14.9039C67.9024 15.8654 68.3726 16.4423 68.3726 17.3077C68.3726 18.4615 67.5262 19.7115 65.269 19.7115C63.4821 19.7115 61.8833 18.8462 60.7548 17.4039ZM60.0024 5.67308H54.5476L49.4691 24.1346H43.8262L48.9048 5.67308H43.0738L44.4845 0.673077H61.5071L60.0024 5.67308ZM39.3119 24.2308V0.769237H31.506L17.9631 24.2308H23.9821L26.6155 19.3269H34.3274V24.2308H39.3119ZM34.3274 5.28846V14.3269H29.3429L34.3274 5.28846Z" />
+</svg>

package/logos/sats.svg

@@ -0,0 +1,4 @@
+<svg width="168" height="52" viewBox="0 0 168 52" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.60001 36.2L0.600006 43C4.00001 47.8 9.99999 51.4 18.4 51.4C30.8 51.4 38 44 38 34.2C38 29.2 35 26.2 31.8 23.4L28.6 20.4C26.6 18.6 25.6 17.2 25.6 15.4C25.6 13 27.2 10.8 31 10.8C33.6 10.8 36.2 11.8 38.6 14.4L47.6 7.60001C45.4 4.20001 40.2 0.600006 32.2 0.600006C21.4 0.600006 13.4 7.8 13.4 17.2C13.4 21.8 16 25 19.4 28L22.6 31C24.8 33 25.8 34.2 25.8 36C25.8 38.4 24 41 19.2 41C15.4 41 12 39.2 9.60001 36.2ZM129.2 36.2L120.2 43C123.4 47.8 129.6 51.4 138 51.4C150.4 51.4 157.6 44 157.6 34.2C157.6 29.2 154.6 26.2 151.4 23.4L148.2 20.4C146.2 18.6 145.2 17.2 145.2 15.4C145.2 13 146.8 10.8 150.6 10.8C153.2 10.8 155.8 11.8 158.2 14.4L167.2 7.60001C165 4.20001 159.8 0.600006 151.8 0.600006C141 0.600006 133 7.8 133 17.2C133 21.8 135.6 25 139 28L142.2 31C144.4 33 145.4 34.2 145.4 36C145.4 38.4 143.6 41 138.8 41C135 41 131.6 39.2 129.2 36.2ZM127.6 11.8H116L105.2 50.2H93.2L104 11.8H91.6L94.6 1.39999H130.8L127.6 11.8ZM83.6 50.4V1.60001H67L38.2 50.4H51L56.6 40.2H73V50.4H83.6ZM73 11V29.8H62.4L73 11Z" />
+
+</svg>

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@sats-group/ui-lib",
+  "version": "74.2.0",
+  "description": "SATS web user interface library",
+  "engines": {
+    "node": "^18 || ^20",
+    "npm": "^8 || ^9 || ^10"
+  },
+  "scripts": {
+    "build": "run-s clean logos typecheck colour",
+    "clean": "node rimraf.mjs",
+    "colour": "node codegen/colours.mjs",
+    "dev": "npm run dev --workspace=site",
+    "lint": "eslint",
+    "lint:ci": "eslint --max-warnings 0",
+    "logos": "svgr --expand-props none --typescript --out-dir react/logos --filename-case kebab logos && rimraf react/logos/**/index.*",
+    "typecheck": "tsc --noEmit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@ssh.dev.azure.com:v3/sats-group/SATS%20Web/ui-lib"
+  },
+  "author": "developer@sats.no",
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "classnames": "^2.5.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@svgr/cli": "^8.1.0",
+    "@types/fuzzy-search": "^2.1.5",
+    "@types/node": "^18.16.19",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.12.2",
+    "@typescript-eslint/parser": "^8.12.2",
+    "eslint": "^9.13.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "globby": "^14.0.2",
+    "npm-run-all": "^4.1.5",
+    "pascal-case": "^4.0.0",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "fuzzy-search": "^3.2.1",
+    "react-tiny-collapse": "^2.0.0"
+  },
+  "workspaces": [
+    "site"
+  ]
+}

package/react/add-bem-modifiers.ts

@@ -0,0 +1,51 @@
+/* eslint-disable no-var, @typescript-eslint/no-explicit-any */
+var hasOwn = {}.hasOwnProperty;
+
+// NOTE: This is copied from the source of 'classnames' and modified to produce BEM modifier classes. (source: https://github.com/JedWatson/classnames/blob/master/index.js)
+
+/** Creates modifier classnames of the provided values. The API is similar to `classnames`. All values passed will be prefixed by `className` (the first argument)
+ *
+ * Note that unlike with `classnames`, when an array is passed all elements must be strings
+
+```
+mod("block__element", "something", { "is-active": true });
+// Returns "block__element block__element--something block__element--is-active"
+```
+ */
+export function mod(...args: any[]) {
+  var baseName = args[0];
+  if (!baseName) return '';
+
+  var classes = [baseName];
+
+  for (var i = 1; i < args.length; i++) {
+    var arg = args[i];
+    if (!arg) continue;
+
+    var argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(baseName + '--' + arg);
+    } else if (Array.isArray(arg)) {
+      if (arg.length) {
+        for (var el of arg) {
+          if (el) {
+            classes.push(baseName + '--' + el);
+          }
+        }
+      }
+    } else if (argType === 'object') {
+      if (arg.toString !== Object.prototype.toString) {
+        classes.push(baseName + '--' + arg.toString());
+      } else {
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes.push(baseName + '--' + key);
+          }
+        }
+      }
+    }
+  }
+
+  return classes.join(' ');
+}

package/react/badge/badge.scss

@@ -0,0 +1,53 @@
+@use '../../tokens/light';
+@use '../../tokens/spacing';
+@use '../../tokens/corner-radius';
+
+.badge {
+  min-width: 20px;
+  height: 20px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 spacing.$xxs;
+  border-radius: corner-radius.$l;
+
+  &--padding-tight {
+    padding: 0;
+    height: auto;
+    min-height: 20px;
+  }
+
+  &--theme-light {
+    &-primary {
+      color: light.$on-ge-on-badge-primary;
+      background: light.$ge-badge-primary;
+    }
+
+    &-secondary {
+      color: light.$on-ge-on-badge-secondary;
+      background: light.$ge-badge-secondary;
+    }
+
+    &-tertiary {
+      color: light.$on-ge-on-badge-tertiary;
+      background: light.$ge-badge-tertiary;
+    }
+  }
+
+  &--theme-fixed {
+    &-primary {
+      color: light.$on-ge-on-badge-primary;
+      background: light.$ge-badge-primary;
+    }
+
+    &-secondary {
+      color: light.$on-ge-on-fixed-badge-secondary;
+      background: light.$ge-fixed-badge-secondary;
+    }
+
+    &-tertiary {
+      color: light.$on-ge-on-fixed-badge-tertiary;
+      background: light.$ge-fixed-badge-tertiary;
+    }
+  }
+}

package/react/badge/badge.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { Badge as Props, variants, themes, Types } from './badge.types';
+import Text from '../text';
+
+const Badge: React.FunctionComponent<Props> & {
+  variants: typeof variants;
+  themes: typeof themes;
+} = ({ content, theme = themes.light, variant = variants.primary }) => (
+  <Text
+    size={Text.sizes.interface}
+    className={cn('badge', `badge--theme-${theme}-${variant}`, {
+      'badge--padding-tight': content.type === Types.Icon,
+    })}
+    tight
+  >
+    {content.type === Types.Numerical
+      ? content.content >= 1000
+        ? '999+'
+        : content.content
+      : content.content}
+  </Text>
+);
+
+Badge.variants = variants;
+Badge.themes = themes;
+export default Badge;

package/react/badge/badge.types.ts

@@ -0,0 +1,34 @@
+import type { ReactElement } from 'react';
+import type { ObjectValues } from '../types';
+
+export const variants = {
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+} as const;
+
+export const themes = {
+  light: 'light',
+  fixed: 'fixed',
+} as const;
+
+export enum Types {
+  Numerical = 'Numerical',
+  Icon = 'Icon',
+}
+
+type Icon = {
+  type: Types.Icon;
+  content: ReactElement;
+};
+
+type Numerical = {
+  type: Types.Numerical;
+  content: number;
+};
+
+export type Badge = {
+  content: Numerical | Icon;
+  theme?: ObjectValues<typeof themes>;
+  variant?: ObjectValues<typeof variants>;
+};

package/react/badge/index.ts

@@ -0,0 +1,2 @@
+import Badge from './badge';
+export default Badge;