Merge branch 'next' into dependabot/npm_and_yarn/qs-6.5.3

italia · Dec 4, 2023 · dc1aa9b · dc1aa9b
2 parents 5955af2 + 53278bd
commit dc1aa9b
Show file tree

Hide file tree

Showing 327 changed files with 10,964 additions and 8,711 deletions.
diff --git a/.github/workflows/publish-release.yml b/.github/workflows/publish-release.yml
@@ -0,0 +1,26 @@
+name: Generate new release
+on:
+  push:
+    tags:
+      - 'v5*'
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+      - name: git config
+        run: |
+          git config user.name "${GITHUB_ACTOR}"
+          git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
+      - run: yarn
+      - run: yarn build
+      - name: Publish package to NPM
+        run: yarn publish --tag unstable
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,28 +1,27 @@
 const CircularDependencyPlugin = require('circular-dependency-plugin')
 
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   addons: [
     '@storybook/addon-postcss',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-a11y'
   ],
+  reactOptions: { legacyRootApi: true },
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
     check: true, // type-check stories during Storybook build
-    // allow react-select types to be imported for docgen
-    // allow also explicit types from other modules within the repo
+    reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
-      shouldExtractLiteralValuesFromEnum: true,
-      propFilter: (prop) => {
-        if(prop.parent){
-          return /src/.test(prop.parent.fileName) || (/node_modules/.test(prop.parent.fileName) && /react-select/.test(prop.parent.fileName));
-        }
-        return true;
-      }
-    },
-    reactDocgen: "react-docgen-typescript",
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+    }
   },
   webpackFinal: async (config, { configType }) => {
     const assetRule = config.module.rules.find(({ test }) => test && test.test(".svg"));
@@ -44,4 +43,8 @@ module.exports = {
 
     return config;
   },
+  staticDirs: [
+    '../static',
+    { from: '../assets', to: '/' },
+  ],
 };
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -3,4 +3,4 @@ import {theme} from './theme';
 
 addons.setConfig({
   theme
-})
+})
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -12,7 +12,7 @@ const order = {
   'componenti': 1000,
 };
 
-const prioritySections = ['welcome-page', 'organizzare', 'menu', 'componenti', 'form', 'utilities', 'domande-frequenti-page', 'changelog-page'];
+const prioritySections = ['welcome-page', 'organizzare', 'menu', 'componenti', 'form', 'utilities', 'domande-frequenti-page', 'changelog-page', 'migrazione-da-v1-page'];
 const priorityPages = ["introduzione"];
 
 const customStyle = {
@@ -38,7 +38,7 @@ export const parameters = {
 
       const aFullStoryName = `${aSubSections.join('-')}-${aStory}`
       const bFullStoryName = `${bSubSections.join('-')}-${bStory}`
-      // Sort by Section 
+      // Sort by Section
       const groupScore = (order[aSection as MainSection] - order[bSection as MainSection]);
 
 
@@ -78,4 +78,4 @@ export const parameters = {
 
 export const decorators = [
   (Story: Function) => <div style={customStyle}><FontLoader /><Story/></div>
-]
+]
diff --git a/assets/css/fonts.css b/assets/css/fonts.css
diff --git a/assets/css/storybook-fixes.css b/assets/css/storybook-fixes.css
@@ -146,4 +146,18 @@ div[id*='componenti-bottomnav'] .bottom-nav {
 .toolbar-docs-style {
   max-width: 400px;
   height: 400px;
+}
+
+/* =======================================
+// Display Back to top button inline in the docs
+// ======================================= */
+
+.back-to-top:not(.example) {
+  position: relative;
+  bottom: unset;
+  right: unset;
+  visibility: visible;
+  margin: 0 auto;
+  opacity: 1;
+  transform: scale(1);
 }
diff --git a/example/footer.tsx b/example/footer.tsx
@@ -177,7 +177,7 @@ export default ({ townName, townTagLine }) => (
               </h4>
               <Form action='#' className='form-newsletter' method='post'>
                 <Label
-                  className='text-white font-weight-semibold active'
+                  className='text-white fw-semibold active'
                   htmlFor='input-newsletter'
                   style={{ transition: 'none 0s ease 0s' }}
                 >
@@ -201,7 +201,7 @@ export default ({ townName, townTagLine }) => (
                   Seguici su
                 </a>
               </h4>
-              <ul className='list-inline text-left social'>
+              <ul className='list-inline text-start social'>
                 <li className='list-inline-item'>
                   <a className='p-2 text-white' href='#' target='_blank'>
                     <Icon
@@ -210,7 +210,7 @@ export default ({ townName, townTagLine }) => (
                       size='sm'
                       className='align-top'
                     />
-                    <span className='sr-only'>Designers Italia</span>
+                    <span className='visually-hidden'>Designers Italia</span>
                   </a>
                 </li>
                 <li className='list-inline-item'>
@@ -221,7 +221,7 @@ export default ({ townName, townTagLine }) => (
                       size='sm'
                       className='align-top'
                     />
-                    <span className='sr-only'>Twitter</span>
+                    <span className='visually-hidden'>Twitter</span>
                   </a>
                 </li>
                 <li className='list-inline-item'>
@@ -232,7 +232,7 @@ export default ({ townName, townTagLine }) => (
                       size='sm'
                       className='align-top'
                     />
-                    <span className='sr-only'>Medium</span>
+                    <span className='visually-hidden'>Medium</span>
                   </a>
                 </li>
                 <li className='list-inline-item'>
@@ -243,7 +243,7 @@ export default ({ townName, townTagLine }) => (
                       size='sm'
                       className='align-top'
                     />
-                    <span className='sr-only'>Behance</span>
+                    <span className='visually-hidden'>Behance</span>
                   </a>
                 </li>
               </ul>
@@ -254,7 +254,7 @@ export default ({ townName, townTagLine }) => (
     </div>
     <div className='it-footer-small-prints clearfix'>
       <Container>
-        <h3 className='sr-only'>Sezione Link Utili</h3>
+        <h3 className='visually-hidden'>Sezione Link Utili</h3>
         <ul className='it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row'>
           <li className='list-inline-item'>
             <a href='#' title='Note Legali'>

diff --git a/example/header.tsx b/example/header.tsx
@@ -186,7 +186,7 @@ export class NavHeader extends React.Component<
                     <NavItem active={isActive} key={label}>
                       <NavLink href='#' active={isActive}>
                         <span>{label}</span>
-                        {isActive && <span className='sr-only'>current</span>}
+                        {isActive && <span className='visually-hidden'>current</span>}
                       </NavLink>
                     </NavItem>
                   );
@@ -201,7 +201,7 @@ export class NavHeader extends React.Component<
                   return (
                     <NavItem key={label}>
                       <NavLink href='#'>
-                        <span className={`${bold ? 'font-weight-bold' : ''}`}>
+                        <span className={`${bold ? 'fw-bold' : ''}`}>
                           {label}
                         </span>
                       </NavLink>

diff --git a/example/homepage.tsx b/example/homepage.tsx
@@ -90,7 +90,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                         <Icon icon='it-pa' />
                         Giunta e consiglio
                       </CardCategory>
-                      <CardTitle className='font-weight-semibold'>
+                      <CardTitle className='fw-semibold'>
                         Mario Rossi
                       </CardTitle>
                       <CardText className='card-text'>
@@ -105,7 +105,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                     </div>
                   </div>
                   <CardReadMore
-                    className='pl-4'
+                    className='ps-4'
                     iconName='it-arrow-right'
                     text="Tutta l'amministrazione"
                     href='/design-comuni-prototipi/esempi/bootstrap-italia/template-amministrazione.html'
@@ -117,7 +117,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                       <Icon icon='it-pa' />
                       Pagamenti
                     </CardCategory>
-                    <CardTitle className='font-weight-semibold'>
+                    <CardTitle className='fw-semibold'>
                       TARI - Tassa dei rifiuti
                     </CardTitle>
                     <CardText>
@@ -138,7 +138,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                       <Icon icon='it-pa' />
                       Bandi
                     </CardCategory>
-                    <CardTitle className='font-weight-semibold'>
+                    <CardTitle className='fw-semibold'>
                       Come partecipare ad un bando
                     </CardTitle>
                     <CardText>
@@ -522,7 +522,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                         noWrapper
                         className='card-bg-primary no-after mt-0'
                       >
-                        <div className='avatar size-lg mr-3'>
+                        <div className='avatar size-lg me-3'>
                           <img
                             src='https://picsum.photos/200/200'
                             alt='Immagine'
@@ -690,7 +690,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
             <div className='py-4'>
               <div className='card-wrapper card-teaser-wrapper card-teaser-wrapper-equal card-teaser-block-3'>
                 <Card teaser noWrapper className='card-bg-primary rounded'>
-                  <div className='avatar size-lg mr-3'>
+                  <div className='avatar size-lg me-3'>
                     <img src='https://picsum.photos/200/200' alt='Immagine' />
                   </div>
                   <CardBody>
@@ -701,7 +701,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                   </CardBody>
                 </Card>
                 <Card teaser noWrapper className='card-bg-warning rounded'>
-                  <div className='avatar size-lg mr-3'>
+                  <div className='avatar size-lg me-3'>
                     <img src='https://picsum.photos/200/200' alt='Immagine' />
                   </div>
                   <CardBody>
@@ -713,7 +713,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                   </CardBody>
                 </Card>
                 <Card teaser noWrapper className='card-bg-dark rounded'>
-                  <div className='avatar size-lg mr-3'>
+                  <div className='avatar size-lg me-3'>
                     <img src='https://picsum.photos/200/200' alt='Immagine' />
                   </div>
                   <CardBody tag='h5'>