mds-bibliography

Install

Install the component via npm by running the following command

npm install @maggioli-design-system/mds-bibliography

This package works also with yarn:

yarn add @maggioli-design-system/mds-bibliography

Import

Import the component in your project via TypeScript as follows:

import { defineCustomElements as dceMdsBibliography } from '@maggioli-design-system/mds-bibliography/loader'

dceMdsBibliography()

MdsBibliography depends on MdsText, so you will have to import it as well:

import { defineCustomElements as dceMdsText } from '@maggioli-design-system/mds-text/loader'

dceMdsText()

If you need to support older browsers (i.e. IE or early version of Edge), you can wrap the defineCustomElements in another utility awailable in the same package:

import { applyPolyfills as apMdsBibliography, defineCustomElements as dceMdsBibliography } from '@maggioli-design-system/mds-bibliography/loader'

apMdsBibliography().then(dceMdsBibliography())

Use alias for defineCustomElements method to initialize multiple web components in the same place:

import { defineCustomElements as dceMdsComponentOne } from '@maggioli-design-system/mds-component-one/loader'
import { defineCustomElements as dceMdsComponentTwo } from '@maggioli-design-system/mds-component-two/loader'

dceMdsComponentOne()
dceMdsComponentTwo()

You can check how browser support works at this page.

Integration

How to use it in HTML

MdsBibliography accepts the following attributes:

• author: specifies a single or multiple authors, accepts a string or an array of strings
• date: specifies the date of the bibliography
• format: specifies the bibliography format
• location: specifies the location of the bibliography
• name: specifies the name of the bibliography
• publisher: specifies the publisher of the bibliography
• rel: specifies relationship between the current document and the URL
• typography: specifies the font typography of the element
• url: specifies the URL of the bibliography
• variant: specifies the variant for typography

<mds-bibliography
  author="John Doe"
  date="2022-10-04"
  location="London"
  name="Meet John Doe"
  publisher="Maggioli Editore"
  url="https://www.maggioli.com"
  variant="read"
></mds-bibliography>

Wrap first name or last name to crop them correctly:

author="'Jhon Arthur' Doe"
author="'Jhon Arthur' 'Doe Jhonson'"

For multiple authors, you can separate the names using comma, and can still wrap first/last name to crop them:

author="'Jhon Arthur' 'Doe Jhonson', Mike Collins, Erik 'Ross Anderson'"

You can use single or double quotation marks for composite names.

If needed, you can customize the color of the text, the url text and the color of the url text when overed overriding the value of the CSS custom properties listed below

You can try it out on the component's Storybook website!

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

Properties

| Property | Attribute | Description | Type | Default | | ------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------ | | author | author | Specifies a single or mupltiple authors, this field expect a string or an array of strings. First name and Last name: "Jhon Doe", you can wrap first name or last name to crop them correctly: "'Jhon Arthur' Doe", "'Jhon Arthur' 'Doe Jhonson'", and for multiple authors "'Jhon Arthur' 'Doe Jhonson', 'Mike Collins', Erik 'Ross Anderson'", you can use single or double quotation marks for composite names | string \| undefined | undefined | | date | date | Specifies the date of the bibliography | string \| undefined | undefined | | format | format | Specifies the bibliography format to rapresent the bibliography content | "apa" \| "mla" \| "turabian" | 'apa' | | location | location | Specifies the location of the bibliography | string \| undefined | undefined | | name | name | Specifies the name of the bibliography | string \| undefined | undefined | | publisher | publisher | Specifies the publisher of the bibliography | string \| undefined | undefined | | rel | rel | Specifies relationship between the current document and the URL | "author" \| "external" | 'external' | | typography | typography | Specifies the font typography of the element | "caption" \| "detail" \| "label" \| "option" \| "paragraph" \| "tip" | 'detail' | | url | url | Specifies the URL of the bibliography | string \| undefined | undefined | | variant | variant | Specifies the variant for typography | "code" \| "info" \| "read" \| "title" \| undefined | undefined |

CSS Custom Properties

| Name | Description | | ------------------------------------------ | -------------------------------------------------------------------- | | --mds-bibliography-color | Sets the text color of the component | | --mds-bibliography-text-decoration | Sets the text decoration color of the link | | --mds-bibliography-text-decoration-hover | Sets the text decoration color of the link when the mouse is over it |

Dependencies

Depends on

• mds-text

Graph

graph TD;
  mds-bibliography --> mds-text
  style mds-bibliography fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department