New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@madgex/design-system
Advanced tools
@madgex/design-system - npm Package Compare versions
Comparing version 7.0.1 to 7.0.2
@@ -1,1 +0,1 @@ | ||
| [{"name":"asterisk"},{"name":"calendar"},{"name":"chevron-down"},{"name":"chevron-left"},{"name":"check"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"flag"},{"name":"information"},{"name":"job"},{"name":"list-bullets"},{"name":"list-numbers"},{"name":"location-pin"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"plus"},{"name":"question-mark"},{"name":"search"},{"name":"redo"},{"name":"share"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"text-bold"},{"name":"text-italic"},{"name":"text-link"},{"name":"text-strike-through"},{"name":"text-underline"},{"name":"undo"},{"name":"upload"},{"name":"user"},{"name":"doc-pdf"}] | ||
| [{"name":"asterisk"},{"name":"calendar"},{"name":"check"},{"name":"chevron-down"},{"name":"chevron-right"},{"name":"chevron-left"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"flag"},{"name":"information"},{"name":"list-bullets"},{"name":"job"},{"name":"list-numbers"},{"name":"location-pin"},{"name":"minus"},{"name":"plus-small"},{"name":"menu"},{"name":"plus"},{"name":"redo"},{"name":"question-mark"},{"name":"search"},{"name":"share"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"spinner"},{"name":"star-fill"},{"name":"star-outline"},{"name":"text-bold"},{"name":"text-italic"},{"name":"text-link"},{"name":"text-strike-through"},{"name":"text-underline"},{"name":"undo"},{"name":"upload"},{"name":"user"}] |
@@ -5,3 +5,3 @@ { | ||
| "license": "UNLICENSED", | ||
| "version": "7.0.1", | ||
| "version": "7.0.2", | ||
| "main": "dist/js/index.js", | ||
@@ -102,3 +102,3 @@ "exports": { | ||
| }, | ||
| "gitHead": "7ec00c135ac3528a950502bb6188554132f8816c" | ||
| "gitHead": "a81c69546c6625ede4028b4fa18d66e2d0bd40c0" | ||
| } |
@@ -75,6 +75,2 @@ # Madgex Design System | ||
| ## Working with [vue.js](https://vuejs.org/) | ||
| See https://www.npmjs.com/package/@madgex/design-system-vue | ||
| ## Releases | ||
@@ -81,0 +77,0 @@ |
@@ -1,5 +0,3 @@ | ||
| ## Nunjucks | ||
| ## Parameters | ||
| ### Parameters | ||
| - `id`: it will be used to create the id on the trigger and the content **required** | ||
@@ -27,3 +25,3 @@ - `triggerLabel`: label of the trigger button. Be as descriptive as you can as it will help for a11y. **required** | ||
| ### Accessibility | ||
| ## Accessibility | ||
@@ -36,3 +34,3 @@ When javascript is enabled, accordion will contains `aria-label` and `aria-expanded` for screen readers. | ||
| ### Design usage guidelines | ||
| ## Design usage guidelines | ||
@@ -46,3 +44,3 @@ Where possible, the defaults should remain as they are to ensure we remain consistent across the platform, though there are a few areas where you may need to step | ||
| ### Notes | ||
| ## Notes | ||
@@ -57,23 +55,1 @@ - 09/12/20 - Non closing accordion - Moved `mds-visually-hidden` to trigger's parent. We noticed an issue on NVDA in Chrome, where the changes on the button like `aria-expanded` or `aria-disabled` were not announced when the button itself was visually hidden. | ||
| - https://a11ysupport.io/tech/aria/aria-controls_attribute | ||
| ## Vue | ||
| ### slots | ||
| - `default <slot/>`: this can also be a custom component or html **required** | ||
| - `triggerLabel`: label of the trigger button. Be as descriptive as you can as it will help for a11y. **required** | ||
| - `triggerLabelActive`: label of the trigger button when accordion is expanded | ||
| ### Parameters | ||
| - `v-model:expanded`: if `true`, the accordion will be expanded by default **required** | ||
| - `triggerNoJsHidden`: trigger button to show/hide when js is disabled | ||
| - `triggerElement`: trigger is `p` tag by default, you can pass an html tag if needed (`h2`, `h3`, `div`) | ||
| Note: Don't use `span` as it creates a bug with VoiceOver where you can't access the expanded content when the trigger is within an inline, inline block or floated element. | ||
| - `triggerClasses`: class will be added to the trigger (useful to change the font size) | ||
| - `triggerIsNonClosing`: boolean to visually hide (for accessibility) the trigger and keep the accordion expanded | ||
| - `activateOnMediaQuery`: if media query is supplied (`(min-width: 600px)`), the accordion will be enabled only when query is true, otherwise content will show as if not an accordion | ||
| - `expandIcon`: This allows you to override the iconography for the expand icon (default: chevron-down) - See design usage guidelines | ||
| - `collapseIcon`: This allows you to override the iconography for the collapse icon (default: chevron-up) - See design usage guidelines | ||
| - `leftAligned`: This will determine if the icon should sit on the left or the right of the label (default: false) - See design usage guidelines | ||
| - `hideTriggerLabel`: Boolean |
@@ -1,5 +0,3 @@ | ||
| ## Nunjucks | ||
| ## Parameters | ||
| ### Parameters | ||
| - `text`: Text on the button | ||
@@ -15,3 +13,3 @@ - `html`: if you want to add html markup instead of plain text, use `html` attribute instead | ||
| ### Full width button | ||
| ## Full width button | ||
@@ -27,3 +25,3 @@ We have 2 helpers classes that can help you achieve full width buttons at different sizes. | ||
| ### Prevent Double Submit | ||
| ## Prevent Double Submit | ||
@@ -33,18 +31,1 @@ Helper class `.js-mds-button-double-submit` | ||
| If you click the form button twice in a row (slower than dobule click but faster than submitting), the browser can submit the form twice. Adding this class will disable the button for 1 second to prevent a double submission. | ||
| ## Vue | ||
| ### Slots | ||
| - `default <slot/>` - Content of the `<button />` element. | ||
| ### Props | ||
| - `element`: `String` _optional_ - Root element type (e.g. `input`). If `to` is provided, `<a>` or `<RouterLink>` will be automatically used. Default value: `'button'`. | ||
| - `type`: `String` _optional_ - `type` attribute for root element. Default value: `'submit'` | ||
| - `to`: `String` _optional_ - A url (defaults `element` to `<a>`) , or an object (defaults `element` to `<RouterLink>`). | ||
| - `preventDoubleSubmit`: `Boolean`_optional_ - Throttle `click` event by 700ms. Default value: `false` | ||
| ### Notes | ||
| Thanks to Vue's _attribute inheritance_ (which merges HTML attributes directly into the root element) we do not need `id`, `name`, `disabled`, `classes` or `attributes` props. |
@@ -1,5 +0,3 @@ | ||
| ## Nunjucks | ||
| ## Setup | ||
| ### Setup | ||
| **Default path of the icons file**: | ||
@@ -12,3 +10,3 @@ | ||
| ### Parameters | ||
| ## Parameters | ||
@@ -22,3 +20,3 @@ - `iconName`: the name of the icon you want to use | ||
| ### Accessibility | ||
| ## Accessibility | ||
@@ -29,3 +27,3 @@ The SVGs are hidden from screen readers by default (with the use of `aria-hidden=true` and `focusable=false`). When the icons are used without a visible label, a **visually hidden label needs to be added** instead. | ||
| ### Sizes | ||
| ## Sizes | ||
@@ -45,7 +43,7 @@ By default, the icon size (width and height) is set to 1em. | ||
| ### Alignment | ||
| ## Alignment | ||
| To make sure that the icons have the same baseline as the text, we are adding `top: 0.125em` on them which corresponds to the icon offset divided by the size of the icon. Please see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4 to see how it is calculated. | ||
| ### Container | ||
| ## Container | ||
@@ -69,18 +67,1 @@ You can use the attributes `hasContainer` and `containerClasses` to add an icon within an container. | ||
| Internet Explorer doesn't support `<use href="url" />` if we use a URL in the href. We are using https://github.com/Keyamoon/svgxuse as a polyfill. | ||
| ## Vue | ||
| ### Props | ||
| - `iconName`: `String` - The name of the icon you want to use. **Required**. | ||
| - `classes`: `String` - Add extra CSS classes to the icon. _Optional_, default value: `''`. | ||
| - `path`: `String` - If you need to use a different path than your default. _Optional_. | ||
| - `visuallyHiddenLabel`: `String` - Add a visually hidden label (see Accessibility notes above). _Optional_, default value: `''`. | ||
| - `hasContainer`: `Boolean` - Used to add a container arount the icon. _Optional_, default value: `false`. | ||
| - `containerClasses`: `String` - Classes for the container. _Optional_, default value: `''`. | ||
| ### Notes | ||
| Unlike the Nunjucks version, the wrapper `<span>` in this Vue component will always be added. | ||
| We're conditionally attaching the class `mds-icon-container` and the classes passed in the `containerClasses` prop to the `<span>` only when `hasContainer` is `true`. |
@@ -49,13 +49,1 @@ ## Parameters | ||
| This input relies entirely on the browser standard checkbox input and applies the accessibility provided by that. | ||
| # Vue | ||
| ## Parameters | ||
| - `name`: The name of the input field, uses ID unless specified **optional**, | ||
| - `id`: The id attribute of the field, **required** | ||
| - `disabled`: Should the input be disabled **optional**, | ||
| - `describedBy`: adding aria-describeby to the fieldset (if multiple checkboxes) or the input field if only one checkbox - **optional** | ||
| - `options`: This is an array of objects containing the parameters for each option: `labelText`, `value`, `id`, `classes` | ||
| - `v-model (:modelValue)`: Preselected checkboxes - Array **optional** | ||
| - `i18n`: Text to translate/customise (object) **optional** |
@@ -30,14 +30,4 @@ ## Parameters - Nunjucks | ||
| ## Props - Vue component | ||
| ## Events | ||
| - `comboboxid`: the id of your combobox. Populated automatically from Nunjucks parameters | ||
| - `labeltext`: the text used in the label. Populated automatically from Nunjucks parameters | ||
| - `placeholder`: the placeholder for your input. Populated automatically from Nunjucks parameters | ||
| - `name`: the name of the input for form submission. Will only be populated automatically if fallbackTo is 'input' | ||
| - `value`: a default value for the combobox input. Populated automatically from Nunjucks parameters | ||
| - `options`: an array of options, which should be objects with a `label` and a `value`. The array should be provided externally by selecting the custom `<mds-combobox>` element and setting it as an attribute | ||
| - `filterOptions`: whether or not the Vue component should internally filter the options array according to the search input (defaults to true) | ||
| - `i18n`: Text to translate/customise. Populated automatically from Nunjucks parameters | ||
| ## Events | ||
| The following events are emiited. | ||
@@ -44,0 +34,0 @@ - `select-option` |
@@ -1,5 +0,3 @@ | ||
| ## Nunjucks | ||
| ## Parameters | ||
| ### Parameters | ||
| - `labelText`: The label for the input **required**, | ||
@@ -31,3 +29,3 @@ - `hideLabel`: true/false - Add this parameter if you need to visually hide the label. The text of the label will the used by default as a placeholder, unless overridden by the placeholder parameter **optional** | ||
| ### Accessibility | ||
| ## Accessibility | ||
@@ -42,17 +40,4 @@ This input relies entirely on the browser standard input and applies the accessibility provided by that. | ||
| ### Note | ||
| ## Note | ||
| We have not placed any specific ruleing to stop `Select`/`Radio`/`Checkbox` being selected but have made no effort to style them | ||
| ## Vue | ||
| ### Parameters | ||
| - `v-model (:modelValue)`: The value of the input | ||
| - `error`: `Boolean` _optional_ - Used for a11y (`:aria-invalid` attribute). Default: `false`. | ||
| ### Notes | ||
| In the Nunjucks version, the `placeholder` attribute defaults to the value of `labelText` when the label is visually hidden (and there is no `placeholder` already). This behaviour is not followed by Vue, as we have separate component for the input and the label. | ||
| - |
@@ -1,5 +0,3 @@ | ||
| ## Nunjucks | ||
| ## Parameters | ||
| ### Parameters | ||
| - `id`: The id for this component **optional** | ||
@@ -21,27 +19,4 @@ - `inputId`: The id for the component this is a label for **required** | ||
| ### Accessibility | ||
| ## Accessibility | ||
| Avoid using `hideLabel` if you can. Only hide the label when there can be no mistake as to what the input is for, probably when there is only one input in the form. | ||
| ## Vue | ||
| ### Slots | ||
| - `default <slot/>`: The label text/html | ||
| - `tooltip <slot/>`: The tooltip text/html (If no content is provided no tooltip will be displayed) | ||
| ### Props | ||
| - `inputId`: `String` **required** - The `id` attribute for the component this is a label for. | ||
| - `id`: `String` _optional_ - The `id`attribute for this component. No default. | ||
| - `optional`: `Boolean` _optional_ - Is the input optional, otherwise required. Default: `false`. | ||
| - `isLegend`: `Boolean` _optional_ - If the component should be a `<legend>` element instead of a `<label>`. Default: `false`. | ||
| - `hideLabel`: `Boolean` _optional_ - If label visually hidden. The text of the label will the used by default as a placeholder. | ||
| **(please see accessibility notes regarding the use of this parameter)** | ||
| - `i18n`: `Object` _optional_ - Text to translate/customise. Default: `{}`. | ||
| ``` | ||
| i18n: { | ||
| requiredIcon: 'required', // visually hidden text for the required icon | ||
| } | ||
| ``` |
@@ -1,5 +0,3 @@ | ||
| ## Nunjucks | ||
| ## Parameters | ||
| ### Parameters | ||
| - `labelText`: The label for the input **required**, | ||
@@ -44,30 +42,4 @@ - `name`: The name of the input field, uses ID unless specified **optional**, | ||
| ### Accessibility | ||
| ## Accessibility | ||
| This input relies entirely on the browser standard radio input and applies the accessibility provided by that. | ||
| ## Vue | ||
| ### Slots | ||
| - `default <slot/>` - Content of the `<label>` for the input. | ||
| ### Props | ||
| - `name`: `String` **required** - `name` attribute for the input field. | ||
| - `id`: `String` **required** - `id` attribute for the input field, `for` attribute for the label field. | ||
| - `v-model`: `Any type` _optional_ - Reactive value for the input. No default value. | ||
| - `value`: `Any type` _optional_ - `value` attribute for the input field. No default value. | ||
| - `disabled`: `Boolean` _optional_ - `disabled` attribute for input field. Default value: `false`. | ||
| ### Notes | ||
| > When using multiple `<MdsRadio>` sharing the same `v-model` remember to wrap them in a `<fieldset>`. | ||
| ```html | ||
| <fieldset> | ||
| <mds-radio v-for="item in radios" v-model="sharedModel" :name="name" :id="item.id" :key="item.id" :value="item.value"> | ||
| {{item.label}} | ||
| </mds-radio> | ||
| </fieldset> | ||
| ``` |
@@ -1,5 +0,3 @@ | ||
| ## Nunjucks | ||
| ## Parameters | ||
| ### Parameters | ||
| - `name`: The name of the input field, uses ID unless specified **optional**, | ||
@@ -47,24 +45,4 @@ - `id`: The id attribute of the field, **required** | ||
| ### Accessibility | ||
| ## Accessibility | ||
| This input relies entirely on the browser standard checkbox input and applies the accessibility provided by that. | ||
| ## Vue | ||
| ### Parameters | ||
| - `v-model (:modelValue)`: Boolean is checked (true/false), or an array of checked values see https://vuejs.org/guide/essentials/forms.html#checkbox | ||
| - `value`: value of checbox | ||
| - `name`: The name of the input field **optional**, | ||
| - `id`: The id attribute of the field, **required** | ||
| - `optional`: Boolean , default to false **optional**, | ||
| - `disabled`: Should the input be disabled **optional**, | ||
| - `describedBy`: adding aria-describeby to the input field - **optional** | ||
| - `i18n`: Text to translate/customise (object) **optional** | ||
| ``` | ||
| i18n: { | ||
| requiredIcon: 'required', // visually hidden text for the required icon (label) | ||
| errorIcon: default is 'Error', // visually hidden text for the error icon | ||
| } | ||
| ``` |
@@ -1,5 +0,3 @@ | ||
| ## Nunjucks | ||
| ## Parameters | ||
| ### Parameters | ||
| - `classes`: add extra CSS classes to the component | ||
@@ -26,3 +24,3 @@ - `hideIcons`: hide caret icons | ||
| ### Accessibility | ||
| ## Accessibility | ||
@@ -34,14 +32,1 @@ We use aria labels to provide more context about the navigation element and the links. | ||
| As for the links, since they can be read out of context of the page, it is important to provide descriptive text. Instead of just using "Next" which doesn't mean much out of context, please add "Next job/article/event..." for the aria label as it is clearer to the user what clicking on the link will do. | ||
| ## Vue | ||
| ### Props | ||
| - `prevUrl`: `String` or `Object` - Url string or vue-router RouterLink object of the previous link. _Optional prop_, default value: `null`. | ||
| - `nextUrl`: `String` or `Object` - Url string or vue-router RouterLink object of the next link. _Optional prop_, default value: `null`. | ||
| - `backToUrl`: `String` or `Object` - Url string or vue-router RouterLink object of the "back to" link. _Optional prop_, default value: `null`. | ||
| - `hideIcons`: `Boolean` - Hide caret icons. _Optional_, default value: `false`. | ||
| - `classes`: `String` - Add extra CSS classes to the component. _Optional prop_, default value: `''`. | ||
| - `prevExtraLabel`: `String` - Extra label of the previous link (i.e. title of the page). _Optional_, default value: `''`. | ||
| - `nextExtraLabel`: `String` - Extra label of the next link (i.e. title of the page). _Optional_, default value: `''`. | ||
| - `i18n`: `Object` - Text to translate/customise. _Optional_, default value: `''`. |
@@ -1,5 +0,3 @@ | ||
| ## Nunjucks | ||
| ## Parameters | ||
| ### Parameters | ||
| - `id`: id of the trigger - **required**, | ||
@@ -16,3 +14,3 @@ - `text`: text you want on the trigger - **required**, | ||
| ### Accessibility | ||
| ## Accessibility | ||
@@ -22,25 +20,4 @@ When javascript is enabled, the trigger uses `aria-expanded="false/true"` and there is an `aria-hidden="true"` set on the popover when it is not active. | ||
| ### Note | ||
| ## Note | ||
| We are using the Popper.js library (https://github.com/popperjs/popper.js) to help with the positioning. More details here (https://popper.js.org/) | ||
| ## Vue | ||
| ### Slots | ||
| - `default <slot/>`: Content for nested trigger `<MdsButton />` | ||
| - `#content <slot/>`: Content for the popover. | ||
| ### Props | ||
| - `id`: `String` **required** - `id` attribute of the trigger. | ||
| - `classes`: `String, Object, Array` _optional_ - Add extra classes to the trigger. No default. | ||
| - `placement`: `String` _optional_ - placement of the popover. Default: `'top-end'`. | ||
| ### Notes | ||
| Install `@popperjs/core` if you need this component. | ||
| ``` | ||
| npm i @popperjs/core | ||
| ``` |
@@ -5,4 +5,2 @@ Mainly used for sort options, when there are 2 options. | ||
| ## Nunjucks | ||
| ### Parameters | ||
@@ -14,10 +12,1 @@ | ||
| - `activeHref`: `href` to match to above option.href, which will denote the `active` buttonLink | ||
| ## Vue | ||
| ### Props | ||
| - `id`: required id | ||
| - `i18n`: object e.g `{label: 'Sort by:'}` | ||
| - `options`: Array of objects, e.g. `[{href:'https://madgex.com/my-link1', label: 'My Link 1'}, {href:'https://madgex.com/my-link2', label: 'My Link 2'}]` | ||
| - `:modelValue/v-model`: `href` or `to` object to match to above option.href or option.to, which will denote the `active` buttonLink |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-1.33%
729673
- Number of lines in readme file
- decreased by-4.3%
89
No dependency changes