agroptima-design-system 0.6.0 → 0.7.0

package/.github/workflows/run-linters.yml

@@ -25,3 +25,6 @@ jobs:
 
       - name: Lint
         run: npm run lint
+
+      - name: Types
+        run: npm run types

package/.github/workflows/run-tests.yml

@@ -0,0 +1,27 @@
+name: Run tests
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Test
+        run: npm run test

package/jest.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from 'jest'
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  dir: './',
+})
+
+const config: Config = {
+  testEnvironment: 'jsdom',
+  clearMocks: true,
+  moduleNameMapper: {
+    '^.+\\.(svg)$': '<rootDir>/tests/svg.mock.js',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+}
+
+export default createJestConfig(config)

package/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -8,7 +8,9 @@
     "build-storybook": "storybook build",
     "lint": "eslint",
     "lint:fix": "eslint src --fix",
-    "chromatic": "npx chromatic --exit-zero-on-changes"
+    "types": "tsc --noEmit",
+    "chromatic": "npx chromatic --exit-zero-on-changes",
+    "test": "jest"
   },
   "dependencies": {
     "@storybook/addon-designs": "^7.0.5",
@@ -28,6 +30,10 @@
     "@storybook/react": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
+    "@types/jest": "^29.5.12",
+    "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.9.4",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
@@ -36,7 +42,11 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-storybook": "^0.6.15",
+    "jest": "^29.7.0",
+    "jest-axe": "^8.0.0",
+    "jest-environment-jsdom": "^29.7.0",
     "storybook": "^7.6.6",
+    "ts-node": "^10.9.2",
     "typescript": "^5"
   },
   "description": "Agroptima design system",

package/src/atoms/Button.scss

@@ -1,183 +1,284 @@
 @use '../settings/color_alias';
-@use '../settings/typography';
+@use '../settings/typography/content' as typography;
 @use '../settings/config';
 
-.button {
-  &.primary,
-  &.primary-outlined,
-  &.primary-ghost {
-    --color-bg: #{color_alias.$primary-color-600};
-    --color-bg-hover: #{color_alias.$primary-color-1000};
-    --color-bg-hover-outlined: #{color_alias.$primary-color-50};
-    --color-fg: #{color_alias.$neutral-white};
-    --color-fg-reversed: #{color_alias.$primary-color-600};
-  }
-  &.error,
-  &.error-outlined,
-  &.error-ghost {
-    --color-bg: #{color_alias.$error-color-600};
-    --color-bg-hover: #{color_alias.$error-color-900};
-    --color-bg-hover-outlined: #{color_alias.$error-color-50};
-    --color-fg: #{color_alias.$neutral-white};
-    --color-fg-reversed: #{color_alias.$error-color-600};
-  }
-  &.success,
-  &.success-outlined,
-  &.success-ghost {
-    --color-bg: #{color_alias.$success-color-1000};
-    --color-bg-hover: #{color_alias.$success-color-700};
-    --color-bg-hover-outlined: #{color_alias.$success-color-50};
-    --color-fg: #{color_alias.$neutral-color-900};
-    --color-fg-reversed: #{color_alias.$success-color-1000};
-  }
-  &.warning,
-  &.warning-outlined,
-  &.warning-ghost {
-    --color-bg: #{color_alias.$warning-color-1000};
-    --color-bg-hover: #{color_alias.$warning-color-700};
-    --color-bg-hover-outlined: #{color_alias.$warning-color-50};
-    --color-fg: #{color_alias.$neutral-color-900};
-    --color-fg-reversed: #{color_alias.$warning-color-1000};
-  }
-  &.info,
-  &.info-outlined,
-  &.info-ghost {
-    --color-bg: #{color_alias.$info-color-600};
-    --color-bg-hover: #{color_alias.$info-color-900};
-    --color-bg-hover-outlined: #{color_alias.$info-color-50};
-    --color-fg: #{color_alias.$neutral-white};
-    --color-fg-reversed: #{color_alias.$info-color-600};
-  }
-  &.neutral,
-  &.neutral-outlined,
-  &.neutral-ghost {
-    --color-bg: #{color_alias.$neutral-color-100};
-    --color-bg-hover: #{color_alias.$neutral-color-300};
-    --color-bg-hover-outlined: #{color_alias.$neutral-color-50};
-    --color-fg: #{color_alias.$neutral-color-1000};
-    --color-fg-reversed: #{color_alias.$neutral-color-1000};
-    --color-fg-disabled: #{color_alias.$neutral-color-50};
+@mixin button-style($main-color, $secondary-color, $hover-color) {
+  background: $main-color;
+  color: $secondary-color;
+
+  > .icon {
+    > svg {
+      fill: $secondary-color;
+      path {
+        fill: $secondary-color;
+      }
+    }
   }
 
-  text-decoration: none;
+  &:not(:disabled):hover,
+  &:not(:disabled):active {
+    background: $hover-color;
+  }
+}
 
+.button {
   display: inline-flex;
-  height: fit-content;
-  background: var(--color-bg);
-  border: 1px solid transparent;
-  padding: config.$space-2x config.$space-3x;
-  // padding: var(--space-2-x, .5em) var(--space-3-x, .75em);
   justify-content: center;
   align-items: center;
-  gap: config.$space-1x;
   flex-shrink: 0;
+  gap: config.$space-1x;
+  height: fit-content;
+  padding: config.$space-2x config.$space-3x;
   border-radius: config.$corner-radius-m;
-  font: typography.$font-primary;
-  color: var(--color-fg);
-  > span {
+  text-decoration: none;
+  border: 1px solid transparent;
+
+  > .icon {
     width: config.$icon-size-3x;
     height: config.$icon-size-3x;
     > svg {
       width: 100%;
       height: 100%;
-      fill: var(--color-fg);
-      path {
-        fill: var(--color-fg);
+    }
+  }
+
+  @include typography.body-medium;
+
+  &.primary {
+    @include button-style(
+      color_alias.$primary-color-600,
+      color_alias.$neutral-white,
+      color_alias.$primary-color-1000
+    );
+  }
+
+  &.primary-outlined {
+    @include button-style(
+      color_alias.$neutral-white,
+      color_alias.$primary-color-600,
+      color_alias.$primary-color-50
+    );
+    border: 1px solid color_alias.$primary-color-600;
+  }
+
+  &.primary-ghost {
+    @include button-style(
+      transparent,
+      color_alias.$primary-color-600,
+      transparent
+    );
+    &:not(:disabled):hover,
+    &:not(:disabled):active {
+      border: 1px solid color_alias.$primary-color-600;
+    }
+  }
+
+  &.error {
+    @include button-style(
+      color_alias.$error-color-600,
+      color_alias.$neutral-white,
+      color_alias.$error-color-900
+    );
+  }
+
+  &.error-outlined {
+    @include button-style(
+      color_alias.$neutral-white,
+      color_alias.$error-color-600,
+      color_alias.$error-color-50
+    );
+    border: 1px solid color_alias.$error-color-600;
+  }
+
+  &.error-ghost {
+    @include button-style(
+      transparent,
+      color_alias.$error-color-600,
+      transparent
+    );
+    &:not(:disabled):hover,
+    &:not(:disabled):active {
+      border: 1px solid color_alias.$error-color-600;
+    }
+  }
+
+  &.success {
+    @include button-style(
+      color_alias.$success-color-1000,
+      color_alias.$neutral-color-900,
+      color_alias.$success-color-700
+    );
+    &:not(:disabled):hover,
+    &:not(:disabled):active {
+      color: color_alias.$neutral-white;
+      > .icon {
+        > svg {
+          fill: color_alias.$neutral-white;
+          path {
+            fill: color_alias.$neutral-white;
+          }
+        }
       }
     }
   }
 
-  &:not(:disabled):hover,
-  &:not(:disabled):active {
-    background: var(--color-bg-hover);
+  &.success-outlined {
+    @include button-style(
+      color_alias.$neutral-white,
+      color_alias.$neutral-color-900,
+      color_alias.$success-color-50
+    );
+    border: 1px solid color_alias.$success-color-1000;
+  }
+
+  &.success-ghost {
+    @include button-style(
+      transparent,
+      color_alias.$success-color-1000,
+      transparent
+    );
+    &:not(:disabled):hover,
+    &:not(:disabled):active {
+      border: 1px solid color_alias.$success-color-1000;
+    }
+  }
 
-    &.success,
-    &.warning {
+  &.warning {
+    @include button-style(
+      color_alias.$warning-color-1000,
+      color_alias.$neutral-color-900,
+      color_alias.$warning-color-700
+    );
+    &:not(:disabled):hover,
+    &:not(:disabled):active {
       color: color_alias.$neutral-white;
-      svg,
-      svg path {
-        fill: color_alias.$neutral-white;
+      > .icon {
+        > svg {
+          fill: color_alias.$neutral-white;
+          path {
+            fill: color_alias.$neutral-white;
+          }
+        }
       }
     }
   }
 
-  &:disabled {
-    background: color_alias.$neutral-color-50;
-    color: color_alias.$neutral-color-400;
-    svg,
-    svg path {
-      fill: color_alias.$neutral-color-400;
+  &.warning-outlined {
+    @include button-style(
+      color_alias.$neutral-white,
+      color_alias.$neutral-color-900,
+      color_alias.$warning-color-50
+    );
+    border: 1px solid color_alias.$warning-color-1000;
+  }
+
+  &.warning-ghost {
+    @include button-style(
+      transparent,
+      color_alias.$warning-color-1000,
+      transparent
+    );
+    &:not(:disabled):hover,
+    &:not(:disabled):active {
+      border: 1px solid color_alias.$warning-color-1000;
     }
   }
 
-  &.primary-outlined,
-  &.error-outlined,
-  &.info-outlined,
+  &.info {
+    @include button-style(
+      color_alias.$info-color-600,
+      color_alias.$neutral-white,
+      color_alias.$info-color-900
+    );
+  }
+
+  &.info-outlined {
+    @include button-style(
+      color_alias.$neutral-white,
+      color_alias.$info-color-600,
+      color_alias.$info-color-50
+    );
+    border: 1px solid color_alias.$info-color-600;
+  }
+
+  &.info-ghost {
+    @include button-style(
+      transparent,
+      color_alias.$info-color-600,
+      transparent
+    );
+    &:not(:disabled):hover,
+    &:not(:disabled):active {
+      border: 1px solid color_alias.$info-color-600;
+    }
+  }
+
+  &.neutral {
+    @include button-style(
+      color_alias.$neutral-color-100,
+      color_alias.$neutral-color-1000,
+      color_alias.$neutral-color-300
+    );
+  }
+
   &.neutral-outlined {
-    background: color_alias.$neutral-white;
-    color: var(--color-bg);
-    border: 1px solid var(--color-bg);
-    svg,
-    svg path {
-      fill: var(--color-bg);
+    @include button-style(
+      color_alias.$neutral-white,
+      color_alias.$neutral-color-1000,
+      color_alias.$neutral-color-50
+    );
+    border: 1px solid color_alias.$neutral-color-100;
+  }
+
+  &.neutral-ghost {
+    @include button-style(
+      transparent,
+      color_alias.$neutral-color-1000,
+      transparent
+    );
+    &:not(:disabled):hover,
+    &:not(:disabled):active {
+      border: 1px solid color_alias.$neutral-color-100;
     }
   }
 
-  &.success-outlined,
-  &.warning-outlined {
-    background: color_alias.$neutral-white;
-    color: var(--color-fg);
-    border: 1px solid var(--color-bg);
-    svg,
-    svg path {
-      fill: var(--color-fg);
+  &:disabled {
+    color: color_alias.$neutral-color-400;
+    > .icon {
+      > svg {
+        fill: color_alias.$neutral-color-400;
+        path {
+          fill: color_alias.$neutral-color-400;
+        }
+      }
     }
   }
 
+  &.primary,
+  &.error,
+  &.success,
+  &.warning,
+  &.info,
+  &.neutral,
   &.primary-outlined,
   &.error-outlined,
   &.success-outlined,
   &.warning-outlined,
   &.info-outlined,
   &.neutral-outlined {
-    &:not(:disabled):hover,
-    &:not(:disabled):active {
-      background: var(--color-bg-hover-outlined);
-    }
     &:disabled {
       background: color_alias.$neutral-color-50;
-      border: none;
-      color: color_alias.$neutral-color-400;
-      svg,
-      svg path {
-        fill: color_alias.$neutral-color-400;
-      }
     }
   }
 
-  &.primary-ghost,
-  &.error-ghost,
-  &.success-ghost,
-  &.warning-ghost,
-  &.info-ghost,
-  &.neutral-ghost {
-    background: transparent;
-    color: var(--color-fg-reversed);
-    svg,
-    svg path {
-      fill: var(--color-fg-reversed);
-    }
-    &:not(:disabled):hover,
-    &:not(:disabled):active {
-      background: transparent;
-      border: 1px solid var(--color-bg);
-    }
+  &.primary-outlined,
+  &.error-outlined,
+  &.success-outlined,
+  &.warning-outlined,
+  &.info-outlined,
+  &.neutral-outlined {
     &:disabled {
-      color: color_alias.$neutral-color-400;
-      svg,
-      svg path {
-        fill: color_alias.$neutral-color-400;
-      }
+      border: 1px solid transparent;
     }
   }
 }

package/src/atoms/CardsTable.scss

@@ -1,5 +1,5 @@
 @use '../settings/color_alias';
-@use '../settings/typography';
+@use '../settings/typography/cards_table' as typography;
 @use '../settings/config';
 
 .cards-table-list {

package/src/atoms/Checkbox.scss

@@ -1,5 +1,5 @@
 @use '../settings/color_alias';
-@use '../settings/typography';
+@use '../settings/typography/form' as typography;
 @use '../settings/config';
 
 .checkbox-group {

package/src/atoms/EmptyState.scss

@@ -1,5 +1,5 @@
 @use '../settings/color_alias';
-@use '../settings/typography';
+@use '../settings/typography/content' as typography;
 @use '../settings/config';
 @use '../settings/depth';
 
@@ -30,7 +30,8 @@
     }
 
     > p {
-      @include typography.empty-state-text;
+      @include typography.body-regular-primary;
+      text-align: center;
     }
   }
 }

package/src/atoms/Icon.scss

@@ -1,5 +1,4 @@
 @use '../settings/color_alias';
-@use '../settings/typography';
 
 .icon {
   display: inline-flex;

package/src/atoms/Icon.tsx

@@ -14,5 +14,9 @@ export const Icon: React.FC<IconProps> = ({ name, className, ...props }) => {
     className,
     name === 'Loading' ? 'rotate' : '',
   ].join(' ')
-  return <span className={cssClasses}>{icons[name](props)}</span>
+  return (
+    <span role="img" title={name} className={cssClasses}>
+      {icons[name](props)}
+    </span>
+  )
 }

package/src/atoms/IconButton.scss

@@ -1,5 +1,4 @@
 @use '../settings/color_alias';
-@use '../settings/typography';
 @use '../settings/config';
 
 .icon-button {

package/src/atoms/Input.scss

@@ -1,5 +1,5 @@
 @use '../settings/color_alias';
-@use '../settings/typography';
+@use '../settings/typography/form' as typography;
 @use '../settings/config';
 
 .input-group {
@@ -13,7 +13,7 @@
 
   &:has(.input.invalid) {
     & .input-help-text {
-      color: color_alias.$error-color-1000;
+      @include typography.form-help-text-error;
     }
   }