@onfido/castor - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

dist/helpers/font/font.js

@@ -52,4 +52,4 @@ import { toCSS } from '../../utils';
     allcaps: { textTransform: 'uppercase' },
-    mono: { fontFamily: '"Roboto Mono", monospace' },
+    mono: { fontFamily: '"Roboto Mono", Consolas, Menlo, monospace' },
 };
 //# sourceMappingURL=font.js.map

package.json

 {
   "name": "@onfido/castor",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Onfido's design system.",
@@ -5,0 +5,0 @@ "author": "Onfido",

README.md

@@ -1,3 +0,6 @@
-# Castor · [![npm version](https://img.shields.io/npm/v/@onfido/castor.svg?style=flat-square)](https://www.npmjs.com/package/@onfido/castor)
+# Castor
 
+[![npm version](https://badgen.net/npm/v/@onfido/castor)](https://www.npmjs.com/package/@onfido/castor)
+[![Bundle size](https://badgen.net/bundlephobia/minzip/@onfido/castor)](https://bundlephobia.com/result?p=@onfido/castor)
+
 _Castor_ is Onfido's design system.
@@ -4,0 +7,0 @@

src/components/input/input.stories.ts

 import { htmlMatrix, Meta, omit, Story } from '../../../../../docs';
+import { FieldLabel } from '../field-label/field-label.story';
+import { Field } from '../field/field.story';
+import { HelperText } from '../helper-text/helper-text.story';
 import { Input, InputProps } from './input.story';
@@ -22,3 +25,3 @@
   argTypes: {
-    ...omit<InputProps>('value'),
+    ...omit<InputProps>('id', 'value'),
     disabled: {
@@ -55,2 +58,24 @@ table: { type: { summary: 'boolean' } },
 
+interface InputWithLabelAndHelperTextProps extends InputProps {
+  label: string;
+  helperText: string;
+}
+
+export const WithLabelAndHelperText = ({
+  label,
+  helperText,
+  ...props
+}: InputWithLabelAndHelperTextProps) =>
+  Field({
+    children: [
+      FieldLabel({
+        children: [label, HelperText({ children: helperText }), Input(props)],
+      }),
+    ],
+  });
+WithLabelAndHelperText.args = {
+  label: 'Label',
+  helperText: 'Helper text',
+};
+
 export const AllCombinations = htmlMatrix(
@@ -57,0 +82,0 @@ Input,

src/components/textarea/textarea.stories.ts

 import { htmlMatrix, Meta, omit, Story } from '../../../../../docs';
+import { FieldLabel } from '../field-label/field-label.story';
+import { Field } from '../field/field.story';
+import { HelperText } from '../helper-text/helper-text.story';
 import { Textarea, TextareaProps } from './textarea.story';
@@ -19,2 +22,3 @@
   argTypes: {
+    ...omit<TextareaProps>('id'),
     disabled: {
@@ -59,2 +63,28 @@ table: { type: { summary: 'boolean' } },
 
+interface TextareaWithLabelAndHelperTextProps extends TextareaProps {
+  label: string;
+  helperText: string;
+}
+
+export const WithLabelAndHelperText = ({
+  label,
+  helperText,
+  ...props
+}: TextareaWithLabelAndHelperTextProps) =>
+  Field({
+    children: [
+      FieldLabel({
+        children: [
+          label,
+          HelperText({ children: helperText }),
+          Textarea(props),
+        ],
+      }),
+    ],
+  });
+WithLabelAndHelperText.args = {
+  label: 'Label',
+  helperText: 'Helper text',
+};
+
 export const AllCombinations = htmlMatrix(
@@ -61,0 +91,0 @@ Textarea,

src/helpers/font/font.ts

@@ -74,3 +74,3 @@ import { CSSProperties } from 'react';
   allcaps: { textTransform: 'uppercase' },
-  mono: { fontFamily: '"Roboto Mono", monospace' },
+  mono: { fontFamily: '"Roboto Mono", Consolas, Menlo, monospace' },
 };

src/theme/tokens.json

 {
-  "aliases": {
-    "border-radius-small": "2px",
-    "border-radius-medium": "4px",
-    "border-radius-large": "8px",
-    "border-radius-full": "100vw",
-    "color-neutral-900": "30, 30, 36",
-    "color-neutral-800": "43, 45, 51",
-    "color-neutral-700": "99, 102, 112",
-    "color-neutral-600": "130, 136, 147",
-    "color-neutral-500": "180, 186, 197",
-    "color-neutral-400": "213, 218, 224",
-    "color-neutral-300": "233, 236, 240",
-    "color-neutral-200": "247, 249, 250",
-    "color-neutral-050": "252, 252, 253",
-    "color-neutral-white": "255, 255, 255",
-    "color-neutral-black": "0, 0, 0",
-    "color-primary-700": "28, 19, 101",
-    "color-primary-600": "35, 42, 173",
-    "color-primary-500": "54, 64, 245",
-    "color-primary-400": "92, 108, 255",
-    "color-primary-300": "130, 143, 255",
-    "color-primary-200": "189, 195, 255",
-    "color-primary-100": "235, 237, 255",
-    "color-primary-050": "245, 246, 255",
-    "color-primary-muted-600": "101, 105, 160",
-    "color-primary-muted-300": "149, 185, 255",
-    "color-accent-1-600": "255, 100, 100",
-    "color-accent-1-500": "255, 137, 125",
-    "color-accent-1-400": "255, 172, 163",
-    "color-accent-2-600": "249, 178, 20",
-    "color-accent-2-500": "255, 221, 84",
-    "color-accent-2-400": "255, 236, 112",
-    "color-accent-3-600": "129, 35, 173",
-    "color-accent-3-500": "175, 95, 239",
-    "color-accent-3-400": "222, 189, 255",
-    "color-success-600": "0, 107, 36",
-    "color-success-500": "5, 125, 39",
-    "color-success-400": "21, 179, 18",
-    "color-success-300": "81, 209, 123",
-    "color-success-200": "157, 239, 184",
-    "color-success-100": "203, 248, 218",
-    "color-success-050": "236, 253, 241",
-    "color-success-vivid-300": "145, 232, 123",
-    "color-success-muted-500": "108, 137, 94",
-    "color-success-muted-300": "137, 211, 163",
-    "color-info-700": "28, 19, 101",
-    "color-info-600": "35, 42, 173",
-    "color-info-500": "54, 64, 245",
-    "color-info-400": "92, 108, 255",
-    "color-info-300": "130, 143, 255",
-    "color-info-200": "189, 195, 255",
-    "color-info-100": "235, 237, 255",
-    "color-info-050": "245, 246, 255",
-    "color-info-muted-600": "101, 105, 160",
-    "color-info-muted-300": "149, 185, 255",
-    "color-warning-600": "158, 75, 8",
-    "color-warning-500": "196, 107, 4",
-    "color-warning-400": "227, 133, 25",
-    "color-warning-300": "251, 194, 127",
-    "color-warning-200": "250, 218, 181",
-    "color-warning-100": "253, 237, 219",
-    "color-warning-050": "255, 245, 235",
-    "color-warning-vivid-300": "253, 168, 70",
-    "color-warning-muted-500": "150, 125, 96",
-    "color-warning-muted-300": "235, 193, 144",
-    "color-error-600": "170, 0, 0",
-    "color-error-500": "195, 47, 47",
-    "color-error-400": "245, 78, 78",
-    "color-error-300": "252, 123, 123",
-    "color-error-200": "255, 185, 185",
-    "color-error-100": "252, 229, 229",
-    "color-error-050": "255, 246, 246",
-    "color-error-muted-500": "152, 93, 97",
-    "color-error-muted-300": "239, 169, 169"
-  },
+  "imports": ["./aliases.json"],
   "props": [
     {
+      "type": "duration",
+      "category": "transition",
+      "name": "duration",
+      "value": "0.15s"
+    },
+    {
       "type": "size",
@@ -80,0 +12,0 @@ "category": "border-radius",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

174097

increased by23.59%

Number of package files

149

increased by7.19%

Lines of code

3077

increased by90.17%

Number of lines in readme file

202

increased by1.51%

No dependency changes