@maggioli-design-system/mds-input-range 2.5.1 → 2.5.3

package/src/components/mds-input-range/test/mds-input-range.stories.tsx

@@ -18,23 +18,26 @@ export default {
     },
     step: {
       type: { name: 'number' },
-      description: 'The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below',
+      description:
+        'The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below',
     },
     value: {
       type: { name: 'number' },
-      description: 'The value attribute contains a number which contains a representation of the selected number',
+      description:
+        'The value attribute contains a number which contains a representation of the selected number',
     },
   },
 }
 
-const Template = args =>
-  <mds-input-range {...args}>
-    Range label
-  </mds-input-range>
+const Template = args => (
+  <mds-input-range {...args}>Range label</mds-input-range>
+)
 
 const TemplateFormatLabel = args => {
   useEffect(() => {
-    (document.querySelector('#custom-labeled') as HTMLMdsInputRangeElement).formatValue = formatValue
+    (
+      document.querySelector('#custom-labeled') as HTMLMdsInputRangeElement
+    ).formatValue = formatValue
   }, [])
   function formatValue (v: number) {
     return formatBytes(v)
@@ -51,11 +54,19 @@ const TemplateFormatLabel = args => {
     return `${value} ${sizes[i]}`
   }
 
-  return <div>
-    <mds-input-range id="custom-labeled" {...args} step="1048576" min="0" max="1073741824">
-      File size
-    </mds-input-range>
-  </div>
+  return (
+    <div>
+      <mds-input-range
+        id="custom-labeled"
+        {...args}
+        step="1048576"
+        min="0"
+        max="1073741824"
+      >
+        File size
+      </mds-input-range>
+    </div>
+  )
 }
 
 const hideHeaderCss = `
@@ -64,42 +75,61 @@ const hideHeaderCss = `
   }
 `
 
-const HideHeaderTemplate = args =>
+const HideHeaderTemplate = args => (
   <div>
     <style>{hideHeaderCss}</style>
-    <mds-input-range {...args}>
-      This shouldn't be visible
-    </mds-input-range>
+    <mds-input-range {...args}>This shouldn't be visible</mds-input-range>
   </div>
+)
 
+export const Default = {
+  render: Template,
+}
 
-export const Default = Template.bind({})
+export const Disabled = {
+  render: Template,
 
-export const Disabled = Template.bind({})
-Disabled.args = {
-  disabled: true,
+  args: {
+    disabled: true,
+  },
 }
 
-export const Min = Template.bind({})
-Min.args = {
-  min: -100,
+export const Min = {
+  render: Template,
+
+  args: {
+    min: -100,
+  },
 }
 
-export const Max = Template.bind({})
-Max.args = {
-  max: 200,
+export const Max = {
+  render: Template,
+
+  args: {
+    max: 200,
+  },
 }
 
-export const Step = Template.bind({})
-Step.args = {
-  step: 10,
+export const Step = {
+  render: Template,
+
+  args: {
+    step: 10,
+  },
 }
 
-export const Value = Template.bind({})
-Value.args = {
-  value: 90,
+export const Value = {
+  render: Template,
+
+  args: {
+    value: 90,
+  },
 }
 
-export const FormatLabel = TemplateFormatLabel.bind({})
+export const FormatLabel = {
+  render: TemplateFormatLabel,
+}
 
-export const HideHeader = HideHeaderTemplate.bind({})
+export const HideHeader = {
+  render: HideHeaderTemplate,
+}

package/src/dictionary/button.ts

@@ -12,6 +12,18 @@ const buttonVariantDictionary = [
   'warning',
 ]
 
+const buttonDropdownVariantDictionary = [
+  'ai',
+  'dark',
+  'error',
+  'info',
+  'light',
+  'primary',
+  'secondary',
+  'success',
+  'warning',
+]
+
 const buttonToneVariantDictionary = [
   'strong',
   'weak',
@@ -19,6 +31,11 @@ const buttonToneVariantDictionary = [
   'quiet',
 ]
 
+const buttonToneMinimalVariantDictionary = [
+  'strong',
+  'weak',
+]
+
 const buttonTargetDictionary = [
   'blank',
   'self',
@@ -31,6 +48,11 @@ const buttonSizeDictionary = [
   'xl',
 ]
 
+const tabSizeDictionary = [
+  'sm',
+  'md',
+]
+
 const buttonIconPositionDictionary = [
   'left',
   'right',
@@ -43,10 +65,13 @@ const buttonTypeDictionary = [
 ]
 
 export {
+  buttonDropdownVariantDictionary,
   buttonIconPositionDictionary,
   buttonSizeDictionary,
   buttonTargetDictionary,
+  buttonToneMinimalVariantDictionary,
   buttonToneVariantDictionary,
   buttonTypeDictionary,
   buttonVariantDictionary,
+  tabSizeDictionary,
 }

package/src/dictionary/icon.ts

@@ -1,5 +1,6 @@
 import jsonIconsDictionary from '../fixtures/icons.json'
-import jsonMggIconsDictionary from '../fixtures/iconsauce.json'
+import jsonMggIconsDictionary from '@maggioli-design-system/svg-icons/dist/iconsauce.json'
+
 const iconsDictionary = jsonIconsDictionary
 const mggIconsDictionary = jsonMggIconsDictionary
 const svgIconsDictionary = [

package/src/dictionary/variant.ts

@@ -21,6 +21,15 @@ const themeStatusVariantDictionary = [
   'warning',
 ]
 
+const themeInputVariantDictionary = [
+  'ai',
+  'error',
+  'info',
+  'primary',
+  'success',
+  'warning',
+]
+
 const themeFullVariantDictionary = [
   'amaranth',
   'aqua',
@@ -128,11 +137,12 @@ const toneMinimalVariantDictionary = [
 export {
   themeFullVariantAvatarDictionary,
   themeFullVariantDictionary,
+  themeInputVariantDictionary,
   themeLabelVariantDictionary,
   themeLuminanceVariantDictionary,
   themeStatusVariantDictionary,
-  themeVariantDictionary,
   themeVariantChipDictionary,
+  themeVariantDictionary,
   toneActionVariantDictionary,
   toneMinimalVariantDictionary,
   toneSimpleVariantDictionary,

package/src/tailwind/components.css

@@ -21,7 +21,7 @@
     pointer-events: none;
     position: absolute;
     transition-behavior: allow-discrete;
-    transition-property: display opacity;
+    transition-property: display, opacity;
   }
 
   .contrast-area-50 {

package/src/type/button.ts

@@ -14,6 +14,10 @@ export type ButtonSizeType =
   | 'lg'
   | 'xl'
 
+export type TabSizeType =
+  | 'sm'
+  | 'md'
+
 export type ButtonIconPositionType =
   | 'left'
   | 'right'
@@ -30,3 +34,14 @@ export type ButtonVariantType =
   | 'secondary'
   | 'success'
   | 'warning'
+
+export type ButtonDropdownVariantType =
+  | 'ai'
+  | 'dark'
+  | 'error'
+  | 'info'
+  | 'light'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'

package/src/type/variant.ts

@@ -4,6 +4,14 @@ export type ThemeStatusVariantType =
   | 'success'
   | 'warning'
 
+export type ThemeInputVariantType =
+  | 'primary'
+  | 'ai'
+  | 'error'
+  | 'info'
+  | 'success'
+  | 'warning'
+
 export type ThemeVariantType =
   | 'ai'
   | 'dark'