npm - agroptima-design-system - Versions diffs - 1.2.15 → 1.2.16 - Mend

agroptima-design-system 1.2.15 → 1.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/package.json +1 -1
package/src/atoms/Checkbox/Checkbox.scss +1 -1
package/src/atoms/Checkbox/Checkbox.tsx +10 -8
package/src/atoms/Checkbox/CheckboxIcons.tsx +113 -0
package/src/globals.d.ts +2 -0
package/src/stories/Changelog.mdx +5 -0
package/src/stories/Checkbox.stories.tsx +27 -1
package/tsconfig.json +1 -1
package/src/atoms/Checkbox/CheckboxActiveIcon.tsx +0 -20
package/src/atoms/Checkbox/CheckboxCheckedIcon.tsx +0 -20
package/src/atoms/Checkbox/CheckboxDisabledCheckedIcon.tsx +0 -22
package/src/atoms/Checkbox/CheckboxDisabledIcon.tsx +0 -16
package/src/atoms/Checkbox/CheckboxDisabledIndeterminateIcon.tsx +0 -19
package/src/atoms/Checkbox/CheckboxIndeterminateIcon.tsx +0 -19
package/src/atoms/Checkbox/CheckboxUncheckedHoverIcon.tsx +0 -18
package/src/atoms/Checkbox/CheckboxUncheckedIcon.tsx +0 -16

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.2.15",
+  "version": "1.2.16",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Checkbox/Checkbox.scss CHANGED Viewed

@@ -37,7 +37,7 @@
   }
   /* Disabled common state */
-  .checkbox-input:checked:disabled {
+  .checkbox-input:disabled {
     cursor: not-allowed;
   }

package/src/atoms/Checkbox/Checkbox.tsx CHANGED Viewed

@@ -1,14 +1,16 @@
 import './Checkbox.scss'
-import React, { useEffect, useRef } from 'react'
+import React from 'react'
 import { classNames } from '../../utils/classNames'
 import { Label } from '../Label'
-import { CheckboxCheckedIcon } from './CheckboxCheckedIcon'
-import { CheckboxDisabledCheckedIcon } from './CheckboxDisabledCheckedIcon'
-import { CheckboxDisabledIcon } from './CheckboxDisabledIcon'
-import { CheckboxDisabledIndeterminateIcon } from './CheckboxDisabledIndeterminateIcon'
-import { CheckboxIndeterminateIcon } from './CheckboxIndeterminateIcon'
-import { CheckboxUncheckedHoverIcon } from './CheckboxUncheckedHoverIcon'
-import { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon'
+import {
+  CheckboxCheckedIcon,
+  CheckboxDisabledCheckedIcon,
+  CheckboxDisabledIcon,
+  CheckboxDisabledIndeterminateIcon,
+  CheckboxIndeterminateIcon,
+  CheckboxUncheckedHoverIcon,
+  CheckboxUncheckedIcon,
+} from './CheckboxIcons'
 export type Variant = 'primary'

package/src/atoms/Checkbox/CheckboxIcons.tsx ADDED Viewed

@@ -0,0 +1,113 @@
+import React from 'react'
+interface CheckboxIconProps extends React.SVGProps<SVGSVGElement> {
+  fill: string
+  stroke: string
+}
+function CheckboxSVG({ fill, stroke, children, ...props }: CheckboxIconProps) {
+  return (
+    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"
+        fill={fill}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"
+        fill={stroke}
+      />
+      {children}
+    </svg>
+  )
+}
+function CheckPath({ fill }: { fill: string }) {
+  return (
+    <path
+      d="m7.085 13.699-3.793-3.98L2 11.063 7.085 16.4 18 4.946 16.718 3.6 7.085 13.699Z"
+      fill={fill}
+    />
+  )
+}
+function LinePath({ fill }: { fill: string }) {
+  return <path d="M18 10.8H2V8.4h16v2.4Z" fill={fill} />
+}
+function CheckboxUncheckedIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <CheckboxSVG
+      fill="var(--neutral-white)"
+      stroke="var(--neutral-color-500)"
+      {...props}
+    />
+  )
+}
+function CheckboxCheckedIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <CheckboxSVG
+      fill="var(--primary-color-600)"
+      stroke="var(--primary-color-600)"
+      {...props}
+    >
+      <CheckPath fill="var(--neutral-white)" />
+    </CheckboxSVG>
+  )
+}
+function CheckboxDisabledIcon(props: React.SVGProps<SVGSVGElement>) {
+  return <CheckboxSVG fill="#f3f3f5" stroke="#c3c7cf" {...props} />
+}
+function CheckboxDisabledCheckedIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <CheckboxDisabledIcon {...props}>
+      <CheckPath fill="#c3c7cf" />
+    </CheckboxDisabledIcon>
+  )
+}
+function CheckboxDisabledIndeterminateIcon(
+  props: React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <CheckboxDisabledIcon {...props}>
+      <LinePath fill="#c3c7cf" />
+    </CheckboxDisabledIcon>
+  )
+}
+function CheckboxIndeterminateIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <CheckboxSVG
+      fill="var(--primary-color-600)"
+      stroke="var(--primary-color-600)"
+      {...props}
+    >
+      <LinePath fill="#F3F3F3" />
+    </CheckboxSVG>
+  )
+}
+function CheckboxUncheckedHoverIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <CheckboxSVG
+      fill="var(--neutral-white)"
+      stroke="var(--primary-color-600)"
+      {...props}
+    />
+  )
+}
+export {
+  CheckboxCheckedIcon,
+  CheckboxDisabledCheckedIcon,
+  CheckboxDisabledIcon,
+  CheckboxDisabledIndeterminateIcon,
+  CheckboxIndeterminateIcon,
+  CheckboxUncheckedHoverIcon,
+  CheckboxUncheckedIcon,
+}

package/src/globals.d.ts CHANGED Viewed

@@ -3,3 +3,5 @@ declare module '*.svg' {
   const content: FC<SVGProps<SVGElement>>
   export default content
 }
+declare module '*.scss' {}

package/src/stories/Changelog.mdx CHANGED Viewed

@@ -4,6 +4,11 @@ import { Meta } from "@storybook/addon-docs/blocks";
 # Changelog
+## 1.2.16
+* Fix disabled styles on Checkbox component
+* Add not-allowed cursor on disabled Checkbox component
 ## 1.2.15
 * Add ChangeStatus icon

package/src/stories/Checkbox.stories.tsx CHANGED Viewed

@@ -78,11 +78,36 @@ export const PrimaryWithoutLabel: Story = {
   parameters: figmaPrimaryDesign,
 }
+export const Disabled: Story = {
+  args: {
+    accessibilityLabel: 'Marks if the user likes videogames',
+    variant: 'primary',
+    disabled: true,
+    defaultChecked: false,
+    children: 'Do you like videogames?',
+    id: 'checkbox-videogames-preference',
+  },
+  parameters: figmaPrimaryDesign,
+}
+export const DisabledChecked: Story = {
+  args: {
+    accessibilityLabel: 'Marks if the user likes videogames',
+    variant: 'primary',
+    disabled: true,
+    defaultChecked: true,
+    children: 'Do you like videogames?',
+    id: 'checkbox-videogames-preference',
+  },
+  parameters: figmaPrimaryDesign,
+}
 export const Indeterminate: Story = {
   args: {
     accessibilityLabel: 'Marks if the user likes videogames',
     variant: 'primary',
     disabled: false,
+    defaultChecked: true,
     children: 'Do you like videogames?',
     id: 'checkbox-videogames-preference',
     indeterminate: true,
@@ -90,12 +115,13 @@ export const Indeterminate: Story = {
   parameters: figmaPrimaryDesign,
 }
-export const Disabled: Story = {
+export const IntermediateDisabled: Story = {
   args: {
     accessibilityLabel: 'Marks if the user likes videogames',
     variant: 'primary',
     disabled: true,
     defaultChecked: true,
+    indeterminate: true,
     children: 'Do you like videogames?',
     id: 'checkbox-videogames-preference',
   },

package/tsconfig.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,

package/src/atoms/Checkbox/CheckboxActiveIcon.tsx DELETED Viewed

@@ -1,20 +0,0 @@
-export function CheckboxActiveIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"
-        fill="var(--primary-color-600)"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"
-        fill="var(--primary-color-600)"
-      />
-      <path
-        d="m7.085 13.699-3.793-3.98L2 11.063 7.085 16.4 18 4.946 16.718 3.6 7.085 13.699Z"
-        fill="var(--neutral-white)"
-      />
-    </svg>
-  )
-}

package/src/atoms/Checkbox/CheckboxCheckedIcon.tsx DELETED Viewed

@@ -1,20 +0,0 @@
-export function CheckboxCheckedIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"
-        fill="var(--primary-color-600)"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"
-        fill="var(--primary-color-600)"
-      />
-      <path
-        d="m7.085 13.699-3.793-3.98L2 11.063 7.085 16.4 18 4.946 16.718 3.6 7.085 13.699Z"
-        fill="var(--neutral-white)"
-      />
-    </svg>
-  )
-}

package/src/atoms/Checkbox/CheckboxDisabledCheckedIcon.tsx DELETED Viewed

@@ -1,22 +0,0 @@
-export function CheckboxDisabledCheckedIcon(
-  props: React.SVGProps<SVGSVGElement>,
-) {
-  return (
-    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"
-        fill="#F3F3F3"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"
-        fill="var(--neutral-color-500)"
-      />
-      <path
-        d="m7.085 13.699-3.793-3.98L2 11.063 7.085 16.4 18 4.946 16.718 3.6 7.085 13.699Z"
-        fill="var(--neutral-color-500)"
-      />
-    </svg>
-  )
-}

package/src/atoms/Checkbox/CheckboxDisabledIcon.tsx DELETED Viewed

@@ -1,16 +0,0 @@
-export function CheckboxDisabledIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"
-        fill="#F3F3F3"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"
-        fill="var(--neutral-color-500)"
-      />
-    </svg>
-  )
-}

package/src/atoms/Checkbox/CheckboxDisabledIndeterminateIcon.tsx DELETED Viewed

@@ -1,19 +0,0 @@
-export function CheckboxDisabledIndeterminateIcon(
-  props: React.SVGProps<SVGSVGElement>,
-) {
-  return (
-    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"
-        fill="var(--neutral-color-500)"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"
-        fill="var(--neutral-color-500)"
-      />
-      <path d="M18 10.8H2V8.4h16v2.4Z" fill="var(--neutral-white)" />
-    </svg>
-  )
-}

package/src/atoms/Checkbox/CheckboxIndeterminateIcon.tsx DELETED Viewed

@@ -1,19 +0,0 @@
-export function CheckboxIndeterminateIcon(
-  props: React.SVGProps<SVGSVGElement>,
-) {
-  return (
-    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"
-        fill="var(--primary-color-600)"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"
-        fill="var(--primary-color-600)"
-      />
-      <path d="M18 10.8H2V8.4h16v2.4Z" fill="#F3F3F3" />
-    </svg>
-  )
-}

package/src/atoms/Checkbox/CheckboxUncheckedHoverIcon.tsx DELETED Viewed

@@ -1,18 +0,0 @@
-export function CheckboxUncheckedHoverIcon(
-  props: React.SVGProps<SVGSVGElement>,
-) {
-  return (
-    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"
-        fill="var(--neutral-white)"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"
-        fill="var(--primary-color-600)"
-      />
-    </svg>
-  )
-}

package/src/atoms/Checkbox/CheckboxUncheckedIcon.tsx DELETED Viewed

@@ -1,16 +0,0 @@
-export function CheckboxUncheckedIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z"
-        fill="var(--neutral-white)"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"
-        fill="var(--neutral-color-500)"
-      />
-    </svg>
-  )
-}