Merge branch 'main' into feat/new-monorepo

PrestaShopCorp · Jan 23, 2024 · e3d93a2 · e3d93a2
2 parents 9593734 + e5aa555
commit e3d93a2
Show file tree

Hide file tree

Showing 54 changed files with 3,128 additions and 796 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,8 +2,8 @@
   "cSpell.words": ["Puik", "puik"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "source.fixAll": false,
-    "source.fixAll.eslint": false
+    "source.fixAll": "never",
+    "source.fixAll.eslint": "explicit"
   },
   "npm.packageManager": "pnpm",
   "eslint.probe": [
@@ -29,5 +29,6 @@
   "i18n-ally.localesPaths": "packages/locale/lang",
   "i18n-ally.enabledParsers": ["ts"],
   "i18n-ally.enabledFrameworks": ["vue", "vue-sfc"],
-  "i18n-ally.keystyle": "nested"
+  "i18n-ally.keystyle": "nested",
+  "eslint.format.enable": true
 }
diff --git a/docs/package.json b/docs/package.json
@@ -9,21 +9,21 @@
     "build": "storybook build"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.6.4",
-    "@storybook/addon-actions": "^7.6.4",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/vue3": "^7.6.4",
-    "@storybook/vue3-vite": "^7.6.4",
+    "@storybook/addon-a11y": "^7.6.10",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/blocks": "^7.6.10",
+    "@storybook/vue3": "^7.6.10",
+    "@storybook/vue3-vite": "^7.6.10",
     "@vitejs/plugin-vue": "^4.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.6.4",
+    "storybook": "^7.6.10",
     "vite": "^5.0.8"
   },
   "dependencies": {
-    "@storybook/client-api": "^7.6.4",
+    "@storybook/client-api": "^7.6.10",
     "typescript": "^5.3.3",
     "vue": "3.3.10"
   }

diff --git a/packages/components/accordion/src/accordion.ts b/packages/components/accordion/src/accordion.ts
@@ -6,6 +6,7 @@ export interface AccordionProps {
   subTitle?: string
   icon?: string
   disabled?: boolean
+  borderNone?: boolean
   dataTest?: string
 }
 

diff --git a/packages/components/accordion/src/accordion.vue b/packages/components/accordion/src/accordion.vue
@@ -5,6 +5,7 @@
     :class="{
       'puik-accordion--expanded': isExpanded,
       'puik-accordion--disabled': disabled,
+      'puik-accordion--border-none': borderNone,
     }"
   >
     <button

diff --git a/packages/components/accordion/stories/accordion.stories.ts b/packages/components/accordion/stories/accordion.stories.ts
@@ -35,6 +35,15 @@ export default {
       control: 'none',
       description: 'Accordion content'
     },
+    borderNone: {
+      control: 'boolean',
+      description: 'remove borders',
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
     dataTest: {
       control: 'text',
       description:
@@ -157,3 +166,46 @@ export const Disabled = {
     }
   }
 };
+
+export const NoBorders = {
+  render: Template,
+
+  args: {
+    name: 'accordion-1',
+    title: 'Accordion title',
+    subTitle: 'Accordion subtitle',
+    icon: 'home',
+    borderNone: true
+  },
+
+  parameters: {
+    docs: {
+      source: {
+        code: `
+  <!--VueJS Snippet-->
+  <puik-accordion-group>
+    <puik-accordion name="accordion-1" border-none>
+      Content 1
+    </puik-accordion>
+  </puik-accordion-group>
+
+  <!--HTML/CSS Snippet-->
+  <div class="puik-accordion-group">
+    <div class="puik-accordion puik-accordion--border-none">
+      <button aria-expanded="true" aria-controls="accordion-id" class="puik-accordion__header">
+        <div class="puik-icon material-icons-round puik-accordion__header__icon" style="font-size: 24px;">home</div>
+        <div class="puik-accordion__header__content">
+          <div class="puik-accordion__header__content__title">Accordion title</div>
+          <div class="puik-accordion__header__content__sub-title">Accordion subtitle</div>
+        </div>
+        <div class="puik-icon material-icons-round puik-accordion__header__expand__icon" style="font-size: 24px;">keyboard_arrow_up</div>
+      </button>
+      <div id="accordion-id" class="puik-accordion__content"> Content 1 </div>
+    </div>
+  </div>
+        `,
+        language: 'html'
+      }
+    }
+  }
+};
diff --git a/packages/components/accordion/test/accordion.spec.ts b/packages/components/accordion/test/accordion.spec.ts
@@ -180,4 +180,19 @@ describe('Accordion tests', () => {
       'icon-accordion'
     );
   });
+
+  it('should not contain borders', () => {
+    const template = `
+    <puik-accordion-group>
+      <puik-accordion name="accordion-1" title="title-1" border-none>
+        Content 1
+      </puik-accordion>
+    </puik-accordion-group>
+  `;
+    factory(template);
+    const accordion = getAccordion(wrapper);
+    expect(getAccordionContainer(accordion).classes()).toContain(
+      'puik-accordion--border-none'
+    );
+  });
 });
diff --git a/packages/components/link/src/link.ts b/packages/components/link/src/link.ts
@@ -20,6 +20,7 @@ export interface LinkProps {
   to?: RouteLocationRaw
   target?: `${PuikLinkTargetVariants}`
   title?: string
+  highContrast?: boolean
   dataTest?: string
 }
 

diff --git a/packages/components/link/src/link.vue b/packages/components/link/src/link.vue
@@ -4,7 +4,11 @@
     v-bind="pathProp"
     :target="target"
     :title="title"
-    :class="['puik-link', `puik-link--${size}`]"
+    :class="[
+      'puik-link',
+      `puik-link--${size}`,
+      { 'puik-link--high-contrast': highContrast },
+    ]"
     :data-test="dataTest"
   >
     <slot />

diff --git a/packages/components/link/stories/link.stories.ts b/packages/components/link/stories/link.stories.ts
@@ -46,6 +46,15 @@ export default {
         }
       }
     },
+    highContrast: {
+      description:
+        'Sets the link in high contrast mode by disabling the purple color for the visited stated',
+      table: {
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
     default: {
       control: 'text',
       description: 'Label of the link'
@@ -62,6 +71,7 @@ export default {
     href: '#',
     to: undefined,
     target: '_self',
+    highContrast: false,
     default: "I'm a cool link",
     title: "I'm a tooltip for your link",
     size: 'md',
@@ -100,8 +110,9 @@ export const Default = {
   <!--
   $sizes: ${linkSizesSummary}
   $targets: ${targetVariantsSummary}
+  $variants: high-contrast (optional)
   -->
-  <a class="puik-link puik-link--{$sizes}" href="#" target="$targets" title="I'm a tooltip for your link">
+  <a class="puik-link puik-link--{$sizes} puik-link--{$variants}" href="#" target="$targets" title="I'm a tooltip for your link">
     I'm a cool link
   </a>
         `,

diff --git a/packages/components/link/test/link.spec.ts b/packages/components/link/test/link.spec.ts
@@ -38,4 +38,9 @@ describe('Link tests', () => {
     factory({ href: '/test', dataTest: 'test' });
     expect(findLink().attributes('data-test')).toBe('test');
   });
+
+  it('should set the link in high-contrast mode', () => {
+    factory({ highContrast: true });
+    expect(findLink().classes()).toContain('puik-link--high-contrast');
+  });
 });
diff --git a/packages/components/modal/src/modal.vue b/packages/components/modal/src/modal.vue
@@ -16,7 +16,7 @@
             v-if="titleIcon || PuikModalVariants.Destructive === variant"
             class="puik-modal__dialogPanelContainer__dialogPanel__header__icon"
             :icon="getTitleIconName ?? ''"
-            :font-size="24"
+            :font-size="ICON_SIZE"
           />
 
           <puik-tooltip
@@ -48,7 +48,7 @@
           >
             <puik-icon
               icon="close"
-              :font-size="CLOSE_ICON_SIZE"
+              :font-size="ICON_SIZE"
             />
           </puik-button>
         </header>
@@ -122,7 +122,7 @@ defineOptions({
   name: 'PuikModal'
 });
 
-const CLOSE_ICON_SIZE = 24;
+const ICON_SIZE = 24;
 
 const props = withDefaults(defineProps<ModalProps>(), {
   variant: PuikModalVariants.Feedback,

diff --git a/packages/components/select/test/select.spec.ts b/packages/components/select/test/select.spec.ts
@@ -306,33 +306,33 @@ describe('Select tests', () => {
     expect(findSelected().classes('puik-select__selected--full-width')).toBe(false);
   });
 
-  it('should display the custom label', async () => {
-    const items = [
-      {
-        label: 'Test',
-        value: 'test'
-      },
-      {
-        label: 'Test2',
-        value: 'test2'
-      },
-      {
-        label: 'Test3',
-        value: 'test3'
-      }
-    ];
-    factory(
-      `<puik-select :options="items" v-model="value" custom-label="Custom Label">
-        <puik-option value="test" label="test" />
-      </puik-select>`,
-      () => ({
-        items,
-        value: ''
-      })
-    );
-    await findAllOptions().at(0)?.trigger('click');
-    expect(findSelected().element.value).toBe('Custom Label');
-  });
+  // it('should display the custom label', async () => {
+  //   const items = [
+  //     {
+  //       label: 'Test',
+  //       value: 'test',
+  //     },
+  //     {
+  //       label: 'Test2',
+  //       value: 'test2',
+  //     },
+  //     {
+  //       label: 'Test3',
+  //       value: 'test3',
+  //     },
+  //   ]
+  //   factory(
+  //     `<puik-select :options="items" v-model="value" custom-label="Custom Label">
+  //       <puik-option value="test" label="test" />
+  //     </puik-select>`,
+  //     () => ({
+  //       items,
+  //       value: '',
+  //     })
+  //   )
+  //   await findAllOptions().at(0)?.trigger('click')
+  //   expect(findSelected().element.value).toBe('Custom Label')
+  // })
 
   it('should have a data-test attribute on select, searchInput noResults and options', async () => {
     const items = [

diff --git a/packages/components/snackbar/src/snackbar.vue b/packages/components/snackbar/src/snackbar.vue
@@ -20,7 +20,7 @@
       <button
         v-if="action"
         class="puik-snackbar__action"
-        @click="action?.callback"
+        @click="action?.callback(), close()"
       >
         {{ action.label }}
       </button>

diff --git a/packages/components/tab-navigation/src/tab-navigation-group-titles.vue b/packages/components/tab-navigation/src/tab-navigation-group-titles.vue
@@ -10,6 +10,7 @@
 
 <script setup lang="ts">
 import { type TabNavigationGroupTitlesProps } from './tab-navigation-group-titles';
+
 defineOptions({
   name: 'PuikTabNavigationGroupTitles'
 });

diff --git a/packages/components/table-search-input/style/css.ts b/packages/components/table-search-input/style/css.ts
@@ -0,0 +1,3 @@
+import '@prestashopcorp/puik-components/base/style/css';
+import '@prestashopcorp/puik-theme/puik-table-search-input.css';
+import '@prestashopcorp/puik-theme/puik-input.css';
diff --git a/packages/components/table-search-input/style/index.ts b/packages/components/table-search-input/style/index.ts
@@ -0,0 +1,3 @@
+import '@prestashopcorp/puik-components/base/style';
+import '@prestashopcorp/puik-theme/src/puik-table-search-input.scss';
+import '@prestashopcorp/puik-theme/src/puik-input.scss';
diff --git a/packages/components/table/index.ts b/packages/components/table/index.ts
@@ -1,6 +1,9 @@
 import Table from './src/table.vue';
+import TableSearchInput from './src/table-search-input.vue';
 
 export const PuikTable = Table;
+export const PuikTableSearchInput = TableSearchInput;
 export default PuikTable;
 
 export * from './src/table';
+export * from './src/table-search-input';
diff --git a/packages/components/table/src/table-search-input.ts b/packages/components/table/src/table-search-input.ts
@@ -0,0 +1,26 @@
+import type TableSearchInput from './table-search-input.vue';
+
+export enum PuikTableSearchInputTypes {
+  Text = 'text',
+  Range = 'range',
+}
+
+export type inputRange = {
+  min?: number
+  max?: number
+};
+
+export type searchOption = {
+  searchBy: string
+  inputText?: string
+  inputRange?: inputRange
+};
+export interface TableSearchInputProps {
+  name?: string
+  column?: string
+  searchSubmit?: boolean
+  searchReset?: boolean
+  searchType?: `${PuikTableSearchInputTypes}`
+}
+
+export type TableSearchInputInstance = InstanceType<typeof TableSearchInput>;