@madgex/design-system - npm Package Compare versions

Comparing version 5.1.0-alpha.0 to 5.1.0-alpha.2

dist/assets/icons.json

@@ -1,1 +0,1 @@
-[{"name":"asterisk"},{"name":"calendar"},{"name":"check"},{"name":"chevron-down"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"doc-pdf"},{"name":"doc"},{"name":"cross"},{"name":"email"},{"name":"job"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"location-pin"},{"name":"plus"},{"name":"search"},{"name":"question-mark"},{"name":"external"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"star-fill"},{"name":"upload"},{"name":"user"},{"name":"spinner"},{"name":"star-outline"}]
+[{"name":"asterisk"},{"name":"calendar"},{"name":"chevron-left"},{"name":"chevron-right"},{"name":"chevron-up"},{"name":"close"},{"name":"cross"},{"name":"doc-pdf"},{"name":"doc"},{"name":"email"},{"name":"external"},{"name":"job"},{"name":"location-pin"},{"name":"menu"},{"name":"minus"},{"name":"plus-small"},{"name":"plus"},{"name":"question-mark"},{"name":"search"},{"name":"social-facebook"},{"name":"social-linkedin"},{"name":"social-pinterest"},{"name":"social-reddit"},{"name":"social-twitter"},{"name":"check"},{"name":"spinner"},{"name":"star-outline"},{"name":"upload"},{"name":"user"},{"name":"star-fill"},{"name":"chevron-down"}]

package.json

@@ -5,3 +5,3 @@ {
   "license": "UNLICENSED",
-  "version": "5.1.0-alpha.0",
+  "version": "5.1.0-alpha.2",
   "main": "dist/js/index.js",
@@ -93,3 +93,3 @@ "files": [
   },
-  "gitHead": "46c5329f7d1b94bc5a5ba709a911a245733502e3"
+  "gitHead": "d6b3d7a3d64be4585f9927d69d24a938b768bd12"
 }

src/components/accordion/accordion.config.js

@@ -6,2 +6,3 @@ const tokens = require('../../../dist/_tokens/js/_tokens-module');
   label: 'Accordion',
+  meta: { status: { njk: 'ready', vue: 'wip' } },
   context: {
@@ -8,0 +9,0 @@ name: 'Taxonomy',

src/components/accordion/README.md

@@ -62,3 +62,3 @@ ## Nunjucks
 - `triggerNoJsHidden`: trigger button to show/hide when js is disabled
-- `triggerHtmlTag`: trigger is `p` tag by default, you can pass an html tag if needed (`h2`, `h3`, `div`)
+- `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.
@@ -65,0 +65,0 @@ - `triggerClasses`: class will be added to the trigger (useful to change the font size)

src/components/button/button.config.js

 module.exports = {
   title: 'Buttons',
-  status: 'wip',
+  meta: { status: { njk: 'wip', vue: 'wip' } },
   context: {
@@ -5,0 +5,0 @@ items: [

src/components/card/card.config.js

 module.exports = {
   title: 'Card',
   label: 'Card',
+  meta: { status: { njk: 'ready' } },
   context: {
@@ -33,2 +34,12 @@ fractalLabel: 'Card',
     {
+      name: 'card-with-custom-styling',
+      context: {
+        fractalLabel: 'Card with custom styling',
+        inList: false,
+        classes: 'mds-card--1',
+        content: '<h4>Card Title</h4><p>paragraph</p>',
+        id: 'with-custom-styling',
+      },
+    },
+    {
       name: 'card-with-badges',
@@ -35,0 +46,0 @@ context: {

src/components/card/README.md

@@ -1,2 +0,2 @@
-The card component adds a border and padding around the content. It can also add a background if the class `mds-card--highlighted` is passed as a parameter.
+The card component adds a border and padding around the content.
 
@@ -11,2 +11,31 @@ ## Parameters
 
+### `classes` parameter
+
+Use the class `mds-card--highlighted` in the `classes` parameter to apply a grey background to the card (colour: $mds-color-neutral-lightest)
+
+You can customise the `background`, `border` and add a `box-shadow` using the custom brand tokens and passing the class newly created as a parameter. `mds-card--[id of the custom style]`. In the example below, it would be `mds-card--1`. 
+
+In your brand.json, you would add for example:
+```
+{
+  ...(other tokens like color, font, size, etc)
+  "custom": {
+    "card": {
+      "1": {
+        "background": {
+          "value": "{color.brand.1.lightest.value}"
+        },
+        "border": {
+          "value": "{size.border.width.base.value} solid {color.brand.1.base.value}"
+        }
+      }
+    }
+  }
+}
+```
+
+Note: The styling above has been added to the design system defaults. So if you use the class `mds-card--1`, you will get by default the background in the "lightest" version of the brand colour 1 and a border of 1px in the colour of brand 1.
+
+### `badges` parameter
+
 Add your badge object to the `left` or `right` array, depending where you want it be displayed.
@@ -13,0 +42,0 @@ The badge object is composed of the label you want to display and the css class you want to use for the styling of the badge.

src/components/icons/icons.config.js

 module.exports = {
   title: 'Icon',
-  status: 'ready',
+  meta: { status: { njk: 'ready', vue: 'wip' } },
 };

src/components/inputs/checkbox-list/checkbox-list.config.js

 module.exports = {
   title: 'Checkbox List',
+  meta: { status: { njk: 'ready', vue: 'wip' } },
   context: {
@@ -4,0 +5,0 @@ id: 'checkbox-input',

src/components/inputs/checkbox-list/README.md

@@ -16,2 +16,3 @@ ## Parameters
 - `i18n`: Text to translate/customise (object) **optional**
+
 ```
@@ -29,2 +30,3 @@ i18n: {
 See an example option below
+
 ```
@@ -46,2 +48,15 @@ options: [
 ## Accessibility
-This input relies entirely on the browser standard checkbox input and applies the accessibility provided by that.
+
+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**

src/components/inputs/checkbox-pill/checkbox-pill.config.js

 module.exports = {
   title: 'CheckboxPill',
-  status: 'wip',
+  meta: { status: { njk: '', vue: 'wip' } },
   context: {},
 };

src/components/inputs/combobox/combobox.config.js

 module.exports = {
   title: 'Combobox',
   label: 'Combobox',
+  meta: { status: { njk: 'ready', vue: 'wip' } },
   variants: [
@@ -18,3 +19,18 @@ {
     },
+
     {
+      name: 'default',
+      context: {
+        variantTitle: 'Multi select',
+        name: 'multi',
+        id: 'multiselect',
+        optional: 'true',
+        labelText: 'How far are you willing to travel?',
+        options: { 5: 'Within 5 miles', 10: 'Within 10 miles', 15: 'Within 15 miles', 20: 'Within 20 miles' },
+        fallbackTo: 'select',
+        multiple: true,
+        placeholder: 'eg. Within 5 miles',
+      },
+    },
+    {
       name: 'Clears hidden field(s)',
@@ -57,6 +73,7 @@ context: {
         name: 'keywords',
-        id: 'keywords-lookup',
+        id: 'keywords-lookup-prefilled',
         labelText: 'Keywords:',
         placeholder: 'eg. Testimonials',
         value: 'Initial Value',
+        vModel: 'Initial Value',
         fallbackTo: 'input',
@@ -63,0 +80,0 @@ },

src/components/inputs/file-upload/file-upload.config.js

 module.exports = {
   title: 'File Upload',
+  meta: { status: { njk: 'ready' } },
   context: {
@@ -4,0 +5,0 @@ labelText: 'Upload a file',

src/components/inputs/form-item/form-item.config.js

 module.exports = {
   title: 'FormItem',
-  status: 'wip',
+  meta: { status: { vue: 'wip' } },
   context: {},
 };

src/components/inputs/input/input.config.js

 module.exports = {
   title: 'Input',
+  meta: { status: { njk: 'ready', vue: 'wip' } },
   context: {
@@ -4,0 +5,0 @@ labelText: 'Text input',

src/components/inputs/label/label.config.js

 module.exports = {
   title: 'Label',
-  status: 'wip',
+  meta: { status: { njk: 'ready', vue: 'wip' } },
   context: {
@@ -5,0 +5,0 @@ id: 'default',

src/components/inputs/radio/radio.config.js

 module.exports = {
   title: 'Radio',
+  meta: { status: { njk: 'ready' } },
   context: {
@@ -4,0 +5,0 @@ id: 'radio-input',

src/components/inputs/select/select.config.js

 module.exports = {
   title: 'Select',
+  meta: { status: { njk: 'ready' } },
   context: {
@@ -4,0 +5,0 @@ labelText: 'Select input',

src/components/inputs/single-checkbox/single-checkbox.config.js

 module.exports = {
   title: 'Single checkbox',
   name: 'Single checkbox',
+  meta: { status: { njk: 'ready', vue: 'wip' } },
   context: {
@@ -5,0 +6,0 @@ id: 'terms-and-conditions',

src/components/inputs/textarea/textarea.config.js

 module.exports = {
   title: 'Textarea',
+  meta: { status: { njk: 'ready' } },
   context: {
@@ -4,0 +5,0 @@ labelText: 'Textarea',

src/components/notification/notification.config.js

 module.exports = {
   title: 'Notifications',
+  meta: { status: { njk: 'ready' } },
   context: {
@@ -4,0 +5,0 @@ text: 'Notification - Success',

src/components/pagination-numbers/pagination-numbers.config.js

 module.exports = {
   title: 'Pagination numbers',
+  meta: { status: { njk: 'ready' } },
   label: 'Pagination numbers',
@@ -4,0 +5,0 @@ context: {

src/components/pagination/pagination.config.js

 module.exports = {
   title: 'Pagination',
   label: 'Pagination',
+  meta: { status: { njk: 'ready', vue: 'wip' } },
   context: {
@@ -5,0 +6,0 @@ fractalTitle: 'Pagination',

src/components/popover/popover.config.js

 module.exports = {
   title: 'Popover',
   label: 'Popover',
-  status: 'wip',
+  meta: { status: { njk: 'ready', vue: 'wip' } },
   context: {
@@ -6,0 +6,0 @@ id: 'simple-popover',

src/components/section-title/title-with-action.config.js

 module.exports = {
   title: 'SectionTitle',
+  meta: { status: { njk: 'ready' } },
   context: {
@@ -4,0 +5,0 @@ title: 'Similar jobs',

src/components/section-title/title.config.js

 module.exports = {
   title: 'SectionTitle',
+  meta: { status: { njk: 'ready' } },
   context: {
@@ -4,0 +5,0 @@ title: 'Similar jobs',

src/components/switch-state/switch-state.config.js

 module.exports = {
   title: 'Switch State',
+  meta: { status: { njk: 'ready' } },
   label: 'Switch State',
@@ -4,0 +5,0 @@ context: {

src/components/tabs/tabs.config.js

 module.exports = {
   title: 'Tabs',
+  meta: { status: { njk: 'ready' } },
   label: 'Tabs',
@@ -4,0 +5,0 @@ context: {

src/tokens/custom.json

@@ -20,4 +20,14 @@ {
       }
+    },
+    "card": {
+      "1": {
+        "background": {
+          "value": "{color.brand.1.lightest.value}"
+        },
+        "border": {
+          "value": "{size.border.width.base.value} solid {color.brand.1.base.value}"
+        }
+      }
     }
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

844413

increased by1.31%

Number of package files

300

increased by0.67%

Lines of code

9739

increased by1.17%

No dependency changes