@onfido/castor - npm Package Compare versions

Comparing version 1.5.4 to 2.0.0

package.json

 {
   "name": "@onfido/castor",
-  "version": "1.5.4",
+  "version": "2.0.0",
   "description": "Onfido's design system.",
@@ -30,4 +30,4 @@ "author": "Onfido",
   "dependencies": {
-    "@onfido/castor-tokens": "^1.0.0-beta.4",
-    "csstype": "^3.0.8"
+    "@onfido/castor-tokens": "^1.0.0-beta.5",
+    "csstype": "^3.0.9"
   },
@@ -34,0 +34,0 @@ "peerDependencies": {

src/components/button/button.stories.ts

@@ -11,3 +11,3 @@ import { iconNames } from '@onfido/castor-icons';
 export default {
-  title: 'Core/Button',
+  title: 'CSS/Button',
   component: Button,
@@ -14,0 +14,0 @@ argTypes: {

src/components/field-label/field-label.stories.ts

@@ -12,3 +12,3 @@ import { color } from '@onfido/castor';
 export default {
-  title: 'Core/FieldLabel',
+  title: 'CSS/FieldLabel',
   component: FieldLabel,
@@ -15,0 +15,0 @@ argTypes: omit('for'),

src/components/icon/icon.stories.ts

@@ -0,3 +1,5 @@
+import { IconProps } from '@onfido/castor';
 import { iconNames } from '@onfido/castor-icons';
 import {
+  aria,
   colors,
@@ -10,3 +12,3 @@ htmlMatrix,
 } from '../../../../../docs';
-import { Icon, IconProps } from './icon.story';
+import { Icon } from './icon.story';
 
@@ -16,3 +18,3 @@ const [firstIconName] = iconNames;
 export default {
-  title: 'Core/Icon',
+  title: 'CSS/Icon',
   component: Icon,
@@ -34,2 +36,4 @@ argTypes: {
     },
+    'aria-hidden': aria.hidden,
+    'aria-label': aria.label,
   },
@@ -42,2 +46,5 @@ args: {
 export const Playground: Story<IconProps> = (props) => Icon(props);
+Playground.args = {
+  'aria-label': 'A label for an icon',
+};
 
@@ -49,2 +56,5 @@ export const Name = htmlMatrix(
 );
+Name.args = {
+  'aria-hidden': 'true',
+};
 Name.parameters = {
@@ -51,0 +61,0 @@ display: 'grid',

src/components/icon/icon.ts

 import { Color } from '@onfido/castor';
 import { IconName } from '@onfido/castor-icons';
 
-export interface IconProps {
+export type IconProps = (Hidden | Labeled) & {
   name: IconName;
   color?: Color;
-}
+};
+
+type Hidden = { 'aria-hidden': 'true'; 'aria-label'?: never };
+type Labeled = { 'aria-hidden'?: 'false'; 'aria-label': string };

src/components/input/input.stories.ts

@@ -27,3 +27,3 @@ import {
 export default {
-  title: 'Core/Input',
+  title: 'CSS/Input',
   component: Input,
@@ -30,0 +30,0 @@ argTypes: {

src/components/popover/popover.stories.ts

@@ -10,2 +10,3 @@ import {
 import { Button } from '../button/button.story';
+import styles from './popover.stories.scss';
 import { Popover, PopoverProps } from './popover.story';
@@ -17,3 +18,3 @@
 export default {
-  title: 'Core/Popover',
+  title: 'CSS/Popover',
   component: Popover,
@@ -39,5 +40,11 @@ argTypes: {
     },
+    show: {
+      description: 'Show or hide the Popover. This example uses HTML presence.',
+      name: '[story only] show',
+      table: { control: 'boolean' },
+    },
   },
   args: {
     children: 'Popover content',
+    show: true,
   },
@@ -52,3 +59,4 @@ parameters: {
 
-export const Playground: Story<PopoverProps> = (props) =>
+type PlaygroundProps = PopoverProps & { show?: boolean };
+export const Playground: Story<PlaygroundProps> = ({ show, ...props }) =>
   html('div', {
@@ -58,6 +66,32 @@ style: { position: 'relative' },
       Button({ children: 'Target', kind: 'action', variant: 'primary' }),
-      Popover(props),
+      show && Popover(props),
     ],
   });
 
+export const ShowHideWithCSS: Story<PopoverProps> = (props) =>
+  html('div', {
+    style: { position: 'relative' },
+    children: [
+      Button({ children: 'Target', kind: 'action', variant: 'primary' }),
+      Popover({ ...props, class: styles['story-popover-on-hover'] }),
+    ],
+  });
+ShowHideWithCSS.storyName = 'show/hide with CSS';
+ShowHideWithCSS.parameters = {
+  docs: {
+    source: {
+      code: `
+// CSS must be set outside of Castor, e.g.
+// :not(:focus, :hover) + .ods-popover {
+//   opacity: 0;
+// }
+<div style={{ position: 'relative' }}>
+  <button class="ods-button -action--primary">Target</button>
+  <div class="ods-popover -center--top">Popover content</div>
+</div>
+        `,
+    },
+  },
+};
+
 export const AllCombinations = htmlMatrix(
@@ -64,0 +98,0 @@ Popover,

src/components/progress/progress.stories.ts

@@ -15,3 +15,3 @@ import {
 export default {
-  title: 'Core/Progress',
+  title: 'CSS/Progress',
   component: Progress,
@@ -18,0 +18,0 @@ argTypes: {

src/components/select/select.stories.ts

@@ -13,3 +13,3 @@ import { classy, m } from '@onfido/castor';
 export default {
-  title: 'Core/Select',
+  title: 'CSS/Select',
   component: Select,
@@ -25,9 +25,23 @@ argTypes: {
     },
+    borderless: {
+      table: { type: { summary: 'boolean' } },
+    },
+    disabled: {
+      table: { type: { summary: 'boolean' } },
+    },
+    invalid: {
+      table: { type: { summary: 'boolean' } },
+    },
   },
   args: {
     children: [
-      html('option', { children: 'Select an option...', selected: true }),
-      html('option', { children: 'Option 1' }),
-      html('option', { children: 'Option 2' }),
-      html('option', { children: 'Option 3' }),
+      html('option', {
+        children: 'Select an option...',
+        disabled: true,
+        selected: true,
+        value: '',
+      }),
+      html('option', { children: 'Option 1', value: 1 }),
+      html('option', { children: 'Option 2', value: 2 }),
+      html('option', { children: 'Option 3', value: 3 }),
     ],
@@ -60,6 +74,7 @@ borderless: false,
       selected: true,
+      value: '',
     }),
-    html('option', { children: 'Option 1' }),
-    html('option', { children: 'Option 2' }),
-    html('option', { children: 'Option 3' }),
+    html('option', { children: 'Option 1', value: 1 }),
+    html('option', { children: 'Option 2', value: 2 }),
+    html('option', { children: 'Option 3', value: 3 }),
   ],
@@ -69,3 +84,3 @@ };
 export const WithEmptyModifier: Story<SelectProps> = (props) =>
-  Select({ ...props, class: classy(m({ empty: true })) });
+  Select({ ...props, class: classy(m('empty')) });
 WithEmptyModifier.args = {
@@ -77,2 +92,3 @@ children: [
       selected: true,
+      value: '',
     }),
@@ -113,3 +129,8 @@ ],
 );
-AllCombinations.argTypes = omit('children');
+AllCombinations.argTypes = omit(
+  'children',
+  'borderless',
+  'disabled',
+  'invalid'
+);
 AllCombinations.args = {
@@ -123,11 +144,15 @@ children: null,
 
-const children = ({ borderless, disabled, invalid }: SelectProps) => [
-  html('option', {
-    children: [
-      invalid ? 'invalid' : 'valid',
-      borderless ? 'borderless' : '',
-      disabled ? 'disabled' : '',
-    ].join(' '),
-    selected: true,
-  }),
-];
+const children = ({ borderless, disabled, invalid }: SelectProps) => {
+  const variation = [
+    invalid ? 'invalid' : 'valid',
+    borderless ? 'borderless' : '',
+    disabled ? 'disabled' : '',
+  ];
+  return [
+    html('option', {
+      children: variation.join(' '),
+      selected: true,
+      value: variation.join('-'),
+    }),
+  ];
+};

src/components/spinner/spinner.stories.ts

@@ -13,3 +13,3 @@ import {
 export default {
-  title: 'Core/Spinner',
+  title: 'CSS/Spinner',
   component: Spinner,
@@ -16,0 +16,0 @@ argTypes: {

src/components/textarea/textarea.stories.ts

@@ -18,3 +18,3 @@ import {
 export default {
-  title: 'Core/Textarea',
+  title: 'CSS/Textarea',
   component: Textarea,
@@ -21,0 +21,0 @@ argTypes: {

src/components/tooltip/tooltip.stories.ts

@@ -15,3 +15,3 @@ import {
 export default {
-  title: 'Core/Tooltip',
+  title: 'CSS/Tooltip',
   component: Tooltip,
@@ -18,0 +18,0 @@ argTypes: {

src/integrated/tokens/definitions/colorPalette.ts

@@ -12,2 +12,3 @@ // generated by Theo (https://github.com/salesforce-ux/theo)
   | 'neutral-200'
+  | 'neutral-100'
   | 'neutral-050'
@@ -14,0 +15,0 @@ | 'neutral-white'

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

181486

increased by6.86%

Number of package files

194

increased by1.57%

Lines of code

2181

increased by7.65%

Dependency changes

• Updated@onfido/castor-tokens@^1.0.0-beta.5

• Updatedcsstype@^3.0.9