@utrecht/components@1.0.0

@utrecht/components 1.0.0 (2022-08-24)

Bug Fixes

• add HTML attributes to BEM templates of textarea/textbox (704e1c7)
• add line-height to the icon container (eed7f4c)
• add missing button disabled state to Storybook (3851779)
• add missing imports to Storybook pages (3b501c8)
• allow inheritance of icon color, ignore document-color token (67a9446)
• always indent blockquote, regardless of distanced (9e23974)
• apply busy cursor to disabled buttons too (12a5504)
• avoid default outset border styling for button (8f9ac28)
• avoid spinner instead of textbox in Firefox (cfba37b)
• button focus style (03a061d)
• calculate width for textarea and textbox in the same way (8df426e)
• case-insensitive HTML attribute match in CSS selector (ee758f9)
• checkmark icon (f0e6f80)
• clean up code (205c58a)
• comply with WCAG with 44x44px as minimum button size (07f8037)
• component status "UNSTABLE" has been renamed to "WORK IN PROGRESS" (34f54bd)
• constent naming in link-social component (da4730a)
• correct argtypes for button and link component (2983a5d)
• correct closing tag for Page Footer BEM template (915bf7a)
• correct the svgs name & remove unnecessarily .gitignore (2113bd9)
• correct title for page footer readme (5fcdecf)
• disabled cursor for disabled form input labels (27d4624)
• disabled HTML buttons must not have active/hover/focus appearance (180324b)
• display focus-visible and focus styles together (e463d41)
• empty ARIA attributes in web component (0ad018c)
• enable pseudo-classes from the style (9d48b9d)
• errors in CSS component code snippets (6279b31)
• fallback colors for textarea (2772007)
• fallback to feedback colors for form field description (ccb3bb1)
• icon title for Zoom Out icon (63fb83c)
• implement utrecht-focus-outline-offset token in CSS (cddcdb2)
• improve social media icons (by @olling) (45f182f)
• improve styling of blockquote attribution (aef6729)
• include active button styling for HTML component (2b76186)
• include recent HTML components in stylesheet collections (c60d3c8)
• incorrect :invalid state in shadow DOM (8f00377)
• inert focus state of current page link in pagination (a633510)
• JS error in spacing design token docs (5e779d5)
• link focus color (b69ab90)
• make interactive states work for CSS form components (0a71c46)
• menulijst component use standard design tokens (6d531d4)
• menulijst font family (1294d53)
• more accurate connection length in sidenav component (17f46fb)
• more better icons (#1029) (69cd29a)
• more icons added and icons fix (#1151) (2759c29)
• move the pseudo-class invalid, disabled to html (de5955c)
• new brach with icons (#1040) (c51f903)
• no margins on headings and paragraphs by default (eb4bb6c)
• README story names (0d8ae70)
• reggresions from recent refactoring in HTML component stories (c38f38f)
• regressions from spacing updates (aa2af3e)
• remove style attributes from SVG icons (f5fa25e)
• remove read-only state from form select component (25a4752)
• remove the svg initial size (716beaa)
• remove unnecessarily tokens (15c3234)
• remove unused svgs and update package.json (80cca1d)
• removed svg dir (#1032) (4fc66d7)
• rename table-heading to table-header-cell (a0d508a)
• rename icon with incorrect name to blad (175600f)
• rename incorrect Blockquote design tokens (7a569b7)
• rename separator width to block-size (5b7a797)
• rename Stories to avoid duplicate names (06dee91)
• renamed some icons (dd38fb2)
• replace form select focus border-width with color (31c821b)
• resolve SCSS linting errors (2fe5e1e)
• resolve Style Dictionary build warnings (0b51cc9)
• style element buttons too (c227449)
• style date and time inputs too (ed1cbb7)
• submit button story (f4198aa)
• support hidden attribute on web components (3586756)
• switch from font-size to with and height (15666a4)
• take the svgo config back and remove unused stencil config (bdc4dda)
• toptask icon size (#1041) (9249332)
• update the the svgs (40670ff)
• update to renamed radio-button class name (c9adce4)
• use switch role for form toggle component, not checkbox (73cdea3)
• use Prop instead of State to fix form bindings (5ce11d7)
• web component focus styles (91e5dbd)

Features

• <utrecht-logo> web component (1dde7fa)
• image component (d48cc69)
• button-link: support primary/secondary/subtle appearance (2e1ddbe)
• icon.size token for social media link (b7c699f)
• text-decoration-thickness design tokens for Link (cf643da)
• add inline variant to "Button that looks like link" (d9ef98b)
• add new iconset (5e2215e)
• add vue custom radio button component (#1126) (6790881)
• avoid ligatures in password inputs too (d85451a)
• avoid ligatures in URL input (4120e05)
• backdrop component (231df2b)
• Button group (b309f02)
• Button link - link that looks like a button (0bd1472)
• configure text-underline offset to improve Arabic links (6d1c69a)
• create @utrecht/icon package (78fde4e)
• create custom radio button react (643856c)
• data list component (511b5e5)
• date time value component (5a2f199)
• design token for the cursor of navigate actions (d20251d)
• disabled but focusable HTML button (25cb45a)
• disabled state for HTML checkbox and radio button (6f7432b)
• e-mail link modifier class name (ea8b376)
• experimental table web components (d1cb0cc)
• improve link social component (228952f)
• include dist/index.json in icons build (4621a7d)
• Link button - button that looks like a link (e3672c9)
• number value component (4c6998d)
• process steps component (1f693cd)
• support both :focus and :focus-visible (62bfcbc)
• textbox support type and inputmode attrs (5b8c693)
• button: border-color design token (8473b68)
• button: improve token documentation (9fe43ec)
• button: separate primary-action tokens from default button (9a5f8b1)
• font-weight design token for document component (0862d20)
• line-height token for badges (f871341)
• min-block-size for textarea (c418563)
• min-inline-size for button (a35cb57)
• abstract badge component (152938e)
• active state for button component (09283e0)
• add text-transform design tokens for headings (45531c5)
• add autocomplete/required/type properties to form-field-textbox (a190636)
• add placeholder design tokens (0d71278)
• add three design tokens to button component (104c4a4)
• allow explanatory text of input placeholder to be italic like form-field-description (ccb9204)
• alternate language link component (8e688f9)
• alternate language navigation component (63efd40)
• article component (7e3a9c6)
• avoid letter-spacing for Arabic text (a2f3416)
• badge font-size (685e129)
• breadcrumb navigation component (ee5833f)
• busy state for button (48c5a17)
• button border-radius (ab68aa7)
• button web component (c3a714e)
• checkbox template (486e4ec)
• checkmark icon (36087bb)
• color for lead paragraph (1808c9d)
• color/background-color for default button (1eac16c)
• common design tokens for select/textbox/textarea (193545d)
• configure optimizeLegibility on the root (42d648a)
• contact card template (2fe3f91)
• counter badge (853b932)
• create @utrecht/components npm package (ac24f15)
• CSS property definitions in Style Dictionary JSON (870bab2)
• cursor for submit buttons (b69b853)
• custom checkbox component (9fe5980)
• custom checkbox web component (5c3d795)
• data badge (1ce1e17)
• default maximum logo sizes (4ab7171)
• define display type for web component :host elements (e3bbe84)
• define design tokens in Style Dictionary per component (7e4dd8a)
• design token for form field width (73ff511)
• DigiD button component (9b8e950)
• DigiD logo web component (3c77b02)
• disabled cursor for form inputs (0f5ada6)
• distanced option for paragraph template (f15f23e)
• distanced variant of separator (3035d12)
• document color as default for heading and paragraph (5ab9428)
• document web component (85033a1)
• emphasis component (d9f9be5)
• external link (8bee8e4)
• extra form-label tokens (1b36c06)
• fallback colors for button hover and disabled state (9724a5f)
• feedback icons (628173c)
• fieldset and legend styling (#371) (85e18e1)
• fieldset component (93652a7)
• focus styles for form-input/select/textarea/textbox (a9a0528)
• focus styles for Textbox and Textarea components (a51a17e)
• form field description component (1cc36b7)
• form labels for radio button and checkbox (3ede2f7)
• form toggle component (5175dac)
• form-field-textarea web component (3c7d809)
• heading letter-spacing design token (59e5b25)
• heading stencil component (097ac47)
• HTML Content web component (793911d)
• include distanced option in Storybook (1263bbf)
• label for map control button (b4368b3)
• link list component (3ca2ff5)
• make components package public (aaba8ab)
• more states for form-field-checkbox component (18f7447)
• neutral badge (9dd2f2c)
• new design tokens for form-field-description (0294576)
• no-JavaScript template for Form toggle (26fc12e)
• only allow vertical resizing of textarea (1ede710)
• optional design tokens to configure button width or height (db34838)
• options argument for radio group template (ef4327b)
• ordered list component (e43c3ed)
• ordered list design tokens for padding and distanced variant (037e13d)
• ordered list in Arabic (d0c106d)
• page component (c577496)
• page content component (8530af7)
• page footer component (32d921e)
• page header component (df9befb)
• pagination (7c749ba)
• paragraph web component (3ed0f0c)
• placeholder option for textbox template (74fb95d)
• pre-heading component (3f9c541)
• provide .svg files for every icon (7d3f22c)
• provide compiled CSS files for component BEM class names (a5f5a61)
• radio button template (a623804)
• reset font-smoothing for root element (dd93855)
• reset and submit support for <utrecht-button> (e1319e5)
• separate heading-1 to heading-6 components (b998a8a)
• separator web component (27ee3d8)
• status badge (b9efcc0)
• stencil (0c4007c)
• styling for custom checkbox (53bf7a9)
• submit button (433ee94)
• support autocomplete attribute for textbox component (edf2235)
• support type="password" for textbox component (2a1b0a0)
• support more properties for textbox (9c38921)
• surface component (aef8983)
• table cells and number inputs more readable using numeric font variants (cd63b9e)
• table component (7659912)
• table heading background color design token (b4677c8)
• table tokens (cfa36d4)
• telephone link (7657742)
• templates for textarea component (1d07129)
• toptask icons (51f458c)
• unordered list design tokens for padding and distanced variant (39f7aab)
• update existing logo with CSS variables (8da7dbc)
• URL component (54e3e1e)
• use document component as wrapper for all stories (8b48e02)
• use slashed zeroes for password inputs when the font supports it (ea93a38)
• warning variant of form-field-description (e047a94)
• web components for textbox and checkbox (51b92d8)

Reverts

• Revert "docs: moved Checkbox documentation from Figma to Github" (4146c52)

BREAKING CHANGES

• use rol="image"& aria-labelledby intead of svg title

• use SVGO as an optimizer
• add test
• improve accessibility by remove hardcoded title from SVG and
  use rol="image"& aria-labelledby intead
• use font-size instead of width, height to control size
• auto generate icons component, names
• add new icons
• update storybook with the new icons