@spark-ui/badge 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.1.0 (2023-05-09)
+
+### Bug Fixes
+
+- **badge:** apply some new agreements like for the aria-label ([8cd2b72](https://github.com/adevinta/spark/commit/8cd2b72d632e2f4ea6884cda9b4a114e2bed62f7))
+- **badge:** fix types ([71ddf42](https://github.com/adevinta/spark/commit/71ddf42c786c142441cb6b35c49f8932ffa2f113))
+- **badge:** fix types ([3a71a7f](https://github.com/adevinta/spark/commit/3a71a7f5528801be78424fcac9245475f3ac2c1e))
+- **badge:** fix types ([9ba5b3b](https://github.com/adevinta/spark/commit/9ba5b3b3956b7632034703ad98f1acbcd2504b30))
+- **badge:** pass classname prop ([b72f4a7](https://github.com/adevinta/spark/commit/b72f4a7331ae245782c8b3ad06deda5fc13a9e07))
+
+### Features
+
+- **badge:** adapt styles to design specs ([e7ffded](https://github.com/adevinta/spark/commit/e7ffded6231272f383d74ab5e06a80c2f6535e12))
+- **badge:** add code suggestions ([266f99f](https://github.com/adevinta/spark/commit/266f99f716a93c11007af4b56a941576203ff500))
+- **badge:** add first changes ([45ffb3d](https://github.com/adevinta/spark/commit/45ffb3d75f49a7becc0a7f05809e27e4d1d00729))
+- **badge:** apply code suggestions and fixes ([7675009](https://github.com/adevinta/spark/commit/7675009488c89c30fce01241c480901d115a4245))
+- **badge:** apply final intents ([bb5963a](https://github.com/adevinta/spark/commit/bb5963a5845b4b29aa19ec0bfc0696521ff8f31f))
+- **badge:** implement accessibility specs ([0875116](https://github.com/adevinta/spark/commit/087511607515c13bafeac0affc365395d7e34c64))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Adevinta ASA.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Badge.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { BadgeItemProps } from './BadgeItem';
+export type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>>;
+export declare const Badge: import("react").ForwardRefExoticComponent<Omit<BadgeItemProps, "type"> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/BadgeItem.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, PropsWithRef } from 'react';
+import { type StylesProps } from './BadgeItem.styles';
+export interface BadgeItemProps extends PropsWithRef<Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>>, StylesProps {
+    /**
+     * Numeric value used as indicator inside the component.
+     */
+    count?: number;
+    /**
+     * Maximum numeric value to be dispayed as a count value.
+     */
+    overflowCount?: number;
+    /**
+     * A custom label for accessibility purposes. It can also be defined as a builder function
+     * to handle dynamic inner data to create a custom label.
+     */
+    'aria-label'?: string | (({ count, overflowCount }: {
+        count?: number;
+        overflowCount?: number;
+    }) => string);
+    /**
+     * Describes the way the component is displayed: relative to another element or just standalone.
+     */
+    type?: 'relative' | 'standalone';
+}
+export declare const BadgeItem: import("react").ForwardRefExoticComponent<BadgeItemProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/BadgeItem.styles.d.ts

@@ -0,0 +1,7 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const styles: (props?: ({
+    intent?: "primary" | "secondary" | "success" | "alert" | "danger" | "info" | "neutral" | "surface" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+    type?: "relative" | "standalone" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export type StylesProps = VariantProps<typeof styles>;

package/dist/config.d.ts

@@ -0,0 +1,4 @@
+export declare const DEFAULT_INTENT = "danger";
+export declare const DEFAULT_SIZE = "md";
+export declare const DEFAULT_TYPE = "relative";
+export declare const DEFAULT_OVERFLOW_COUNT = 99;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './Badge';

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),y=require("class-variance-authority");Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"})),Object.freeze(Object.defineProperty({__proto__:null,designs:["filled","outlined","tinted","ghost","contrast"],intents:["current","primary","secondary","success","error","info","alert","danger","neutral","surface"],shapes:["rounded","square","pill"],sizes:["current","sm","md","lg"]},Symbol.toStringTag,{value:"Module"}));const c="danger",d="relative",b=y.cva(["inline-flex h-fit","empty:p-none","text-center font-bold","rounded-full ring-2"],{variants:{intent:{primary:["bg-primary","text-on-primary","ring-on-primary"],secondary:["bg-secondary","text-on-secondary","ring-on-secondary"],success:["bg-success","text-on-success","ring-on-success"],alert:["bg-alert","text-on-alert","ring-on-alert"],danger:["bg-error","text-on-error","ring-on-error"],info:["bg-info","text-on-info","ring-on-info"],neutral:["bg-neutral","text-on-neutral","ring-on-neutral"],surface:["bg-surface","text-on-surface","ring-on-surface"]},size:{sm:["text-small","px-[var(--sz-6)] py-[var(--sz-2)]","empty:h-sz-12 empty:w-sz-12"],md:["text-caption","px-md py-sm","empty:h-sz-16 empty:w-sz-16"]},type:{relative:["relative -translate-x-2/4 -translate-y-2/4"],standalone:[]}},defaultVariants:{intent:c,size:"md",type:d}}),l=e.forwardRef(({intent:t=c,size:r="md",type:n=d,count:a,overflowCount:o=99,"aria-label":s,className:u,...m},f)=>{const p=a&&a>o,g={...m,"aria-label":typeof s=="function"?s({count:a,overflowCount:o}):s};return e.createElement("span",{ref:f,"data-spark-component":"badge",role:"status",className:b({intent:t,size:r,type:n,className:u}),...g},p?`${o}+`:a)});l.displayName="BadgeItem";const i=e.forwardRef(({children:t,...r},n)=>t?e.createElement("div",{className:"relative flex"},t,e.createElement(l,{ref:n,...r})):e.createElement(l,{ref:n,type:"standalone",...r}));i.displayName="Badge",exports.Badge=i;

package/dist/index.mjs

@@ -0,0 +1,13 @@
+import a, { forwardRef as i } from "react";
+import { cva as y } from "class-variance-authority";
+Object.freeze(Object.defineProperty({ __proto__: null }, Symbol.toStringTag, { value: "Module" })), Object.freeze(Object.defineProperty({ __proto__: null, designs: ["filled", "outlined", "tinted", "ghost", "contrast"], intents: ["current", "primary", "secondary", "success", "error", "info", "alert", "danger", "neutral", "surface"], shapes: ["rounded", "square", "pill"], sizes: ["current", "sm", "md", "lg"] }, Symbol.toStringTag, { value: "Module" }));
+const c = "danger", d = "relative", b = y(["inline-flex h-fit", "empty:p-none", "text-center font-bold", "rounded-full ring-2"], { variants: { intent: { primary: ["bg-primary", "text-on-primary", "ring-on-primary"], secondary: ["bg-secondary", "text-on-secondary", "ring-on-secondary"], success: ["bg-success", "text-on-success", "ring-on-success"], alert: ["bg-alert", "text-on-alert", "ring-on-alert"], danger: ["bg-error", "text-on-error", "ring-on-error"], info: ["bg-info", "text-on-info", "ring-on-info"], neutral: ["bg-neutral", "text-on-neutral", "ring-on-neutral"], surface: ["bg-surface", "text-on-surface", "ring-on-surface"] }, size: { sm: ["text-small", "px-[var(--sz-6)] py-[var(--sz-2)]", "empty:h-sz-12 empty:w-sz-12"], md: ["text-caption", "px-md py-sm", "empty:h-sz-16 empty:w-sz-16"] }, type: { relative: ["relative -translate-x-2/4 -translate-y-2/4"], standalone: [] } }, defaultVariants: { intent: c, size: "md", type: d } }), l = i(({ intent: e = c, size: t = "md", type: r = d, count: n, overflowCount: o = 99, "aria-label": s, className: m, ...p }, u) => {
+  const f = n && n > o, g = { ...p, "aria-label": typeof s == "function" ? s({ count: n, overflowCount: o }) : s };
+  return a.createElement("span", { ref: u, "data-spark-component": "badge", role: "status", className: b({ intent: e, size: t, type: r, className: m }), ...g }, f ? `${o}+` : n);
+});
+l.displayName = "BadgeItem";
+const x = i(({ children: e, ...t }, r) => e ? a.createElement("div", { className: "relative flex" }, e, a.createElement(l, { ref: r, ...t })) : a.createElement(l, { ref: r, type: "standalone", ...t }));
+x.displayName = "Badge";
+export {
+  x as Badge
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@spark-ui/badge",
+  "version": "0.1.0",
+  "description": "Badge component is a visual indicator for numeric values such as tallies and scores.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:adevinta/spark.git",
+    "directory": "packages/components/badge"
+  },
+  "devDependencies": {
+    "@spark-ui/icon": "1",
+    "@spark-ui/icons": "1",
+    "@spark-ui/radio": "1"
+  },
+  "bugs": {
+    "url": "https://github.com/adevinta/spark/issues"
+  },
+  "homepage": "https://sparkui.vercel.app",
+  "license": "MIT",
+  "gitHead": "a6d74d7b4702f93fcc9fe9bc382337ec07067699"
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*", "../../../global.d.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,6 @@
+import path from 'path'
+import { getComponentConfiguration } from '../../../config/index'
+
+const { name } = require(path.resolve(__dirname, 'package.json'))
+
+export default getComponentConfiguration(process.cwd(), name)