@axa-fr/design-system-look-and-feel-css 1.0.4 → 1.0.5-ci.100

package/dist/look-and-feel.scss

@@ -3,7 +3,6 @@
 @use "Grid/DebugGrid";
 @use "Accordion/Accordion";
 @use "AccordionCore/AccordionCore";
-@use "Button/Button";
 @use "Card/Card";
 @use "Divider/Divider";
 @use "Layout/Footer/Footer";
@@ -22,7 +21,6 @@
 @use "Pagination/Pagination";
 @use "Pagination/PaginationDesktop";
 @use "Pagination/PaginationMobile";
-@use "Loader/Loader";
 @use "./List/List";
 @use "List/ClickList/ClickList";
 @use "./List/ContentItemDuo/ContentItemDuo";

package/package.json

@@ -1,29 +1,32 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-css",
-  "version": "1.0.4",
+  "version": "1.0.5-ci.100",
   "description": "",
-  "main": "index.js",
+  "sass": "dist/look-and-feel.scss",
+  "style": "dist/look-and-feel.css",
+  "exports": {
+    "./logo-axa.svg": "./files/assets/logo-axa.svg",
+    "./dist/common/assets/logo-axa.svg": "./files/assets/logo-axa.svg",
+    "./dist/*": {
+      "development": "./src/*",
+      "default": "./dist/*"
+    }
+  },
   "files": [
-    "dist"
+    "dist",
+    "files"
   ],
   "scripts": {
+    "predev": "rimraf dist",
     "prebuild": "rimraf dist",
-    "start": "postcss \"src/**/*.scss\" --base src --dir dist --ext css --verbose --watch --config ../../config/postcss.config.js",
-    "build": "postcss \"src/**/*.scss\" --base src --dir dist --ext css --verbose --env production --config ../../config/postcss.config.js",
-    "start:storybook": "storybook dev -p 6008",
-    "build:storybook": "storybook build",
-    "build-storybook": "storybook build",
+    "dev": "postcss \"src/**/*.scss\" --base src --dir dist --ext css --verbose --watch --env development --config ../../../config/postcss.config.js",
+    "build": "postcss \"src/**/*.scss\" --base src --dir dist --ext css --verbose --env production --config ../../../config/postcss.config.js",
     "eslint": "eslint src --ext js,jsx,ts,tsx",
     "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
     "stylelint": "stylelint \"src/**/*.{scss,css}\"",
     "stylelint:fix": "stylelint \"src/**/*.{scss,css}\" --fix",
     "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx|scss|css)\" --check --ignore-unknown",
-    "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx|scss|css)\" --write --ignore-unknown",
-    "tsc": "tsc --noEmit",
-    "chromatic": "npx chromatic"
-  },
-  "dependencies": {
-    "rc-slider": "^11.1.7"
+    "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx|scss|css)\" --write --ignore-unknown"
   },
   "peerDependencies": {
     "@material-symbols/svg-400": ">= 0.19.0"
@@ -33,52 +36,6 @@
       "optional": true
     }
   },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^2.0.2",
-    "@csstools/postcss-sass": "^5.1.1",
-    "@material-symbols/svg-400": "*",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-storysource": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/html": "^8.3.5",
-    "@storybook/html-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
-    "@storybook/theming": "^8.3.5",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
-    "browserslist": "^4.23.3",
-    "chromatic": "^11.12.0",
-    "copyfiles": "^2.4.1",
-    "cssnano": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.0",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.9.0",
-    "postcss": "^8.4.35",
-    "postcss-cli": "^11.0.0",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^9.5.2",
-    "postcss-scss": "^4.0.9",
-    "prettier": "^3.3.3",
-    "rimraf": "^6.0.1",
-    "storybook": "^8.3.5",
-    "stylelint": "^16.11.0",
-    "stylelint-config-pretty-order": "^0.5.1",
-    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-config-standard": "^36.0.0",
-    "stylelint-prettier": "^5.0.0",
-    "tsc-files": "^1.1.4",
-    "vite": "^5.4.8"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AxaFrance/design-system.git"
@@ -106,11 +63,9 @@
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": "eslint --fix",
     "*.(ts|tsx)": "tsc-files --noEmit",
-    "*.(scss|css)": "stylelint --fix",
-    "*.mdx": "prettier --write"
+    "*.(scss|css)": "stylelint --fix"
   },
   "volta": {
-    "node": "20.10.0",
-    "npm": "10.2.5"
+    "extends": "../../../package.json"
   }
 }

package/dist/Button/Button.css

@@ -1 +0,0 @@
-.af-btn-client{align-items:center;background-color:var(--color-axa);border:0;border-radius:8px;cursor:pointer;display:flex;font-family:var(--font-family-base);font-weight:600;gap:1rem;justify-content:center;min-height:3.5rem;padding:.8rem 1.2rem;transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client,.af-btn-client:hover{color:var(--color-white);text-decoration:none}.af-btn-client:hover{background-color:var(--color-blue-1)}.af-btn-client:active,.af-btn-client:focus{background-color:var(--color-btn-light);color:var(--color-white);outline:none}.af-btn-client:focus-visible{outline:2px solid var(--color-blue-3);outline-offset:3px}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{background-color:initial;color:var(--color-axa);gap:.25rem;min-height:auto;min-width:auto;padding:0}.af-btn-client--ghost:hover{background-color:initial;color:var(--color-blue-1)}.af-btn-client--ghost:active,.af-btn-client--ghost:focus{background-color:initial;color:var(--color-btn-light)}.af-btn-client--primary-business{background-color:var(--color-btn-business)}.af-btn-client--primary-business:hover{background-color:var(--color-btn-business-dark)}.af-btn-client--primary-business:focus{background-color:var(--color-btn-business-light)}.af-btn-client--tertiary{background-color:var(--color-btn-tertiary-bg);color:var(--color-axa)}.af-btn-client--tertiary:hover{background-color:var(--color-btn-tertiary-bg-darker);color:var(--color-axa)}.af-btn-client--tertiary:active,.af-btn-client--tertiary:focus{background-color:var(--color-btn-tertiary-bg-lighter);color:var(--color-axa)}.af-btn-client--secondary{background-color:var(--color-white);box-shadow:0 0 0 1px var(--color-axa) inset;color:var(--color-axa)}.af-btn-client--secondary:active,.af-btn-client--secondary:focus,.af-btn-client--secondary:hover{background-color:var(--color-white);box-shadow:0 0 0 2px var(--color-blue-1) inset;color:var(--color-blue-1)}.af-btn-client--secondary:active{background-color:var(--color-blue-2)}.af-btn-client--secondary-error{background-color:var(--color-white);box-shadow:0 0 0 1px var(--color-red-700) inset;color:var(--color-red-700)}.af-btn-client--secondary-error:active,.af-btn-client--secondary-error:focus,.af-btn-client--secondary-error:hover{background-color:var(--color-white);box-shadow:0 0 0 2px var(--color-btn-error-text) inset;color:var(--color-btn-error-text)}.af-btn-client--secondary-error:active{background-color:var(--color-btn-error-bg)}.af-btn-client__wrapper{align-items:center;display:flex;justify-content:center;line-height:1}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{background-color:var(--color-gray-300);box-shadow:none;color:var(--color-btn-disabled-text);cursor:not-allowed}.af-btn-client:disabled:focus,.af-btn-client:disabled:hover,.af-btn-client[aria-disabled=true]:focus,.af-btn-client[aria-disabled=true]:hover{background-color:var(--color-gray-300);border-color:#0000;color:var(--color-btn-disabled-text)}

package/dist/Button/Button.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Button/Button.scss%23sass","../../src/Button/Button.scss"],"names":[],"mappings":"AAAA,eAME,kBAAA,CAOA,iCAAA,CATA,QAAA,CACA,iBAAA,CAaA,cAAA,CAjBA,YAAA,CAQA,mCAAA,CACA,eAAA,CAFA,QAAA,CADA,sBAAA,CALA,iBAAA,CACA,oBAAA,CAWA,8CAAA,CACA,iFAAA,CAEA,iCAAA,CAEA,wBAAA,CAAA,gBCAF,CDEE,oCATA,wBAAA,CADA,oBCaF,CDHE,qBAGE,oCCAJ,CDGE,2CAGE,uCAAA,CADA,wBAAA,CAEA,YCFJ,CDKE,6BACE,qCAAA,CACA,kBCHJ,CDME,mBACE,cAAA,CACA,iBCJJ,CDOE,sBAME,wBAAA,CADA,sBAAA,CADA,UAAA,CAFA,eAAA,CADA,cAAA,CAEA,SCFJ,CDOI,4BAEE,wBAAA,CADA,yBCJN,CDQI,yDAGE,wBAAA,CADA,4BCNN,CDWE,iCACE,0CCTJ,CDWI,uCACE,+CCTN,CDYI,uCACE,gDCVN,CDcE,yBAEE,6CAAA,CADA,sBCXJ,CDcI,+BAEE,oDAAA,CADA,sBCXN,CDeI,+DAGE,qDAAA,CADA,sBCbN,CDkBE,0BAEE,mCAAA,CACA,2CAAA,CAFA,sBCdJ,CDkBI,iGAIE,mCAAA,CACA,8CAAA,CAFA,yBChBN,CDqBI,iCACE,oCCnBN,CDuBE,gCAEE,mCAAA,CACA,+CAAA,CAFA,0BCnBJ,CDuBI,mHAIE,mCAAA,CACA,sDAAA,CAFA,iCCrBN,CD0BI,uCACE,0CCxBN,CD4BE,wBAEE,kBAAA,CADA,YAAA,CAEA,sBAAA,CACA,aC1BJ,CD6BE,2DAGE,sCAAA,CACA,eAAA,CAFA,oCAAA,CAGA,kBC5BJ,CD8BI,8IAIE,sCAAA,CAFA,kBAAA,CACA,oCC5BN","file":"Button.css","sourcesContent":[".af-btn-client {\n  display: flex;\n  min-height: 3.5rem;\n  padding: 0.8rem 1.2rem;\n  border: 0;\n  border-radius: 8px;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  font-family: var(--font-family-base);\n  font-weight: 600;\n  text-decoration: none;\n  color: var(--color-white);\n  background-color: var(--color-axa);\n  transition-duration: var(--transition-duration);\n  transition-property: width, height, border, color, background-color, outline,\n    box-shadow;\n  transition-timing-function: linear;\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    text-decoration: none;\n    color: var(--color-white);\n    background-color: var(--color-blue-1);\n  }\n\n  &:active,\n  &:focus {\n    color: var(--color-white);\n    background-color: var(--color-btn-light);\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--color-blue-3);\n    outline-offset: 3px;\n  }\n\n  & > svg {\n    aspect-ratio: 1;\n    fill: currentcolor;\n  }\n\n  &--ghost {\n    min-width: auto;\n    min-height: auto;\n    padding: 0;\n    gap: 0.25rem;\n    color: var(--color-axa);\n    background-color: transparent;\n\n    &:hover {\n      color: var(--color-blue-1);\n      background-color: transparent;\n    }\n\n    &:focus,\n    &:active {\n      color: var(--color-btn-light);\n      background-color: transparent;\n    }\n  }\n\n  &--primary-business {\n    background-color: var(--color-btn-business);\n\n    &:hover {\n      background-color: var(--color-btn-business-dark);\n    }\n\n    &:focus {\n      background-color: var(--color-btn-business-light);\n    }\n  }\n\n  &--tertiary {\n    color: var(--color-axa);\n    background-color: var(--color-btn-tertiary-bg);\n\n    &:hover {\n      color: var(--color-axa);\n      background-color: var(--color-btn-tertiary-bg-darker);\n    }\n\n    &:focus,\n    &:active {\n      color: var(--color-axa);\n      background-color: var(--color-btn-tertiary-bg-lighter);\n    }\n  }\n\n  &--secondary {\n    color: var(--color-axa);\n    background-color: var(--color-white);\n    box-shadow: 0 0 0 1px var(--color-axa) inset;\n\n    &:hover,\n    &:focus,\n    &:active {\n      color: var(--color-blue-1);\n      background-color: var(--color-white);\n      box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n    }\n\n    &:active {\n      background-color: var(--color-blue-2);\n    }\n  }\n\n  &--secondary-error {\n    color: var(--color-red-700);\n    background-color: var(--color-white);\n    box-shadow: 0 0 0 1px var(--color-red-700) inset;\n\n    &:hover,\n    &:focus,\n    &:active {\n      color: var(--color-btn-error-text);\n      background-color: var(--color-white);\n      box-shadow: 0 0 0 2px var(--color-btn-error-text) inset;\n    }\n\n    &:active {\n      background-color: var(--color-btn-error-bg);\n    }\n  }\n\n  &__wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    color: var(--color-btn-disabled-text);\n    background-color: var(--color-gray-300);\n    box-shadow: none;\n    cursor: not-allowed;\n\n    &:hover,\n    &:focus {\n      border-color: transparent;\n      color: var(--color-btn-disabled-text);\n      background-color: var(--color-gray-300);\n    }\n  }\n}\n",".af-btn-client {\n  display: flex;\n  min-height: 3.5rem;\n  padding: 0.8rem 1.2rem;\n  border: 0;\n  border-radius: 8px;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  font-family: var(--font-family-base);\n  font-weight: 600;\n  text-decoration: none;\n  color: var(--color-white);\n  background-color: var(--color-axa);\n  transition-duration: var(--transition-duration);\n  transition-property: width, height, border, color, background-color, outline,\n    box-shadow;\n  transition-timing-function: linear;\n  cursor: pointer;\n  user-select: none;\n\n  &:hover {\n    text-decoration: none;\n    color: var(--color-white);\n    background-color: var(--color-blue-1);\n  }\n\n  &:active,\n  &:focus {\n    color: var(--color-white);\n    background-color: var(--color-btn-light);\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--color-blue-3);\n    outline-offset: 3px;\n  }\n\n  & > svg {\n    aspect-ratio: 1;\n    fill: currentcolor;\n  }\n\n  &--ghost {\n    min-width: auto;\n    min-height: auto;\n    padding: 0;\n    gap: 0.25rem;\n    color: var(--color-axa);\n    background-color: transparent;\n\n    &:hover {\n      color: var(--color-blue-1);\n      background-color: transparent;\n    }\n\n    &:focus,\n    &:active {\n      color: var(--color-btn-light);\n      background-color: transparent;\n    }\n  }\n\n  &--primary-business {\n    background-color: var(--color-btn-business);\n\n    &:hover {\n      background-color: var(--color-btn-business-dark);\n    }\n\n    &:focus {\n      background-color: var(--color-btn-business-light);\n    }\n  }\n\n  &--tertiary {\n    color: var(--color-axa);\n    background-color: var(--color-btn-tertiary-bg);\n\n    &:hover {\n      color: var(--color-axa);\n      background-color: var(--color-btn-tertiary-bg-darker);\n    }\n\n    &:focus,\n    &:active {\n      color: var(--color-axa);\n      background-color: var(--color-btn-tertiary-bg-lighter);\n    }\n  }\n\n  &--secondary {\n    color: var(--color-axa);\n    background-color: var(--color-white);\n    box-shadow: 0 0 0 1px var(--color-axa) inset;\n\n    &:hover,\n    &:focus,\n    &:active {\n      color: var(--color-blue-1);\n      background-color: var(--color-white);\n      box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n    }\n\n    &:active {\n      background-color: var(--color-blue-2);\n    }\n  }\n\n  &--secondary-error {\n    color: var(--color-red-700);\n    background-color: var(--color-white);\n    box-shadow: 0 0 0 1px var(--color-red-700) inset;\n\n    &:hover,\n    &:focus,\n    &:active {\n      color: var(--color-btn-error-text);\n      background-color: var(--color-white);\n      box-shadow: 0 0 0 2px var(--color-btn-error-text) inset;\n    }\n\n    &:active {\n      background-color: var(--color-btn-error-bg);\n    }\n  }\n\n  &__wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    color: var(--color-btn-disabled-text);\n    background-color: var(--color-gray-300);\n    box-shadow: none;\n    cursor: not-allowed;\n\n    &:hover,\n    &:focus {\n      border-color: transparent;\n      color: var(--color-btn-disabled-text);\n      background-color: var(--color-gray-300);\n    }\n  }\n}\n"]}

package/dist/Button/Button.scss

@@ -1,150 +0,0 @@
-.af-btn-client {
-  display: flex;
-  min-height: 3.5rem;
-  padding: 0.8rem 1.2rem;
-  border: 0;
-  border-radius: 8px;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  font-family: var(--font-family-base);
-  font-weight: 600;
-  text-decoration: none;
-  color: var(--color-white);
-  background-color: var(--color-axa);
-  transition-duration: var(--transition-duration);
-  transition-property: width, height, border, color, background-color, outline,
-    box-shadow;
-  transition-timing-function: linear;
-  cursor: pointer;
-  user-select: none;
-
-  &:hover {
-    text-decoration: none;
-    color: var(--color-white);
-    background-color: var(--color-blue-1);
-  }
-
-  &:active,
-  &:focus {
-    color: var(--color-white);
-    background-color: var(--color-btn-light);
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-blue-3);
-    outline-offset: 3px;
-  }
-
-  & > svg {
-    aspect-ratio: 1;
-    fill: currentcolor;
-  }
-
-  &--ghost {
-    min-width: auto;
-    min-height: auto;
-    padding: 0;
-    gap: 0.25rem;
-    color: var(--color-axa);
-    background-color: transparent;
-
-    &:hover {
-      color: var(--color-blue-1);
-      background-color: transparent;
-    }
-
-    &:focus,
-    &:active {
-      color: var(--color-btn-light);
-      background-color: transparent;
-    }
-  }
-
-  &--primary-business {
-    background-color: var(--color-btn-business);
-
-    &:hover {
-      background-color: var(--color-btn-business-dark);
-    }
-
-    &:focus {
-      background-color: var(--color-btn-business-light);
-    }
-  }
-
-  &--tertiary {
-    color: var(--color-axa);
-    background-color: var(--color-btn-tertiary-bg);
-
-    &:hover {
-      color: var(--color-axa);
-      background-color: var(--color-btn-tertiary-bg-darker);
-    }
-
-    &:focus,
-    &:active {
-      color: var(--color-axa);
-      background-color: var(--color-btn-tertiary-bg-lighter);
-    }
-  }
-
-  &--secondary {
-    color: var(--color-axa);
-    background-color: var(--color-white);
-    box-shadow: 0 0 0 1px var(--color-axa) inset;
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--color-blue-1);
-      background-color: var(--color-white);
-      box-shadow: 0 0 0 2px var(--color-blue-1) inset;
-    }
-
-    &:active {
-      background-color: var(--color-blue-2);
-    }
-  }
-
-  &--secondary-error {
-    color: var(--color-red-700);
-    background-color: var(--color-white);
-    box-shadow: 0 0 0 1px var(--color-red-700) inset;
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--color-btn-error-text);
-      background-color: var(--color-white);
-      box-shadow: 0 0 0 2px var(--color-btn-error-text) inset;
-    }
-
-    &:active {
-      background-color: var(--color-btn-error-bg);
-    }
-  }
-
-  &__wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-  }
-
-  &:disabled,
-  &[aria-disabled="true"] {
-    color: var(--color-btn-disabled-text);
-    background-color: var(--color-gray-300);
-    box-shadow: none;
-    cursor: not-allowed;
-
-    &:hover,
-    &:focus {
-      border-color: transparent;
-      color: var(--color-btn-disabled-text);
-      background-color: var(--color-gray-300);
-    }
-  }
-}