Skip to content

Commit

Permalink
Merge pull request #822 from City-of-Helsinki/release-2.2.0
Browse files Browse the repository at this point in the history 
Release 2.2.0
  • Loading branch information
@minevala
minevala authored Sep 8, 2022
2 parents 331c1a4 + 2c5ea37 commit e71ab4d
Show file tree
Hide file tree
Showing 9 changed files with 738 additions and 333 deletions.
974 changes: 682 additions & 292 deletions CHANGELOG.md
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/core/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "hds-core",
"version": "2.1.1",
"version": "2.2.0",
"description": "Core styles for the Helsinki Design System",
"homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
"license": "MIT",
Expand All @@ -26,7 +26,7 @@
"@storybook/html": "6.4.18",
"copyfiles": "2.2.0",
"cssnano": "4.1.10",
"hds-design-tokens": "2.1.1",
"hds-design-tokens": "2.2.0",
"normalize.css": "8.0.1",
"postcss": "8.2.15",
"postcss-cli": "8.3.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/design-tokens/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "hds-design-tokens",
"version": "2.1.1",
"version": "2.2.0",
"description": "Design tokens for the Helsinki Design System",
"homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
"license": "MIT",
Expand Down
4 changes: 2 additions & 2 deletions packages/react/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "hds-react",
"version": "2.1.1",
"version": "2.2.0",
"description": "React components for the Helsinki Design System",
"homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
"license": "MIT",
Expand Down Expand Up @@ -106,7 +106,7 @@
"@react-aria/visually-hidden": "3.2.0",
"date-fns": "2.16.1",
"downshift": "6.0.6",
"hds-core": "2.1.1",
"hds-core": "2.2.0",
"lodash.isequal": "4.5.0",
"lodash.isfunction": "3.0.9",
"lodash.pickby": "^4.6.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/table/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export type TableProps = React.ComponentPropsWithoutRef<'table'> & {
*/
initialSortingOrder?: 'asc' | 'desc';
/**
* Function for custom sorting or providing side effects before or after the sort. If you want to use the component's own sorting function, call the handleSort callback function.
* Function for providing side effects before or after the sort. If you want to use the component's own sorting function, call the handleSort callback function.
* @param order
* @param colKey
* @param handleSort
Expand Down
8 changes: 4 additions & 4 deletions site/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "site",
"private": true,
"description": "Documentation for Helsinki Design System",
"version": "2.1.1",
"version": "2.2.0",
"workspaces": {
"nohoist": [
"gatsby",
Expand Down Expand Up @@ -38,9 +38,9 @@
},
"devDependencies": {
"eslint-config-react-app": "^7.0.1",
"hds-core": "2.1.1",
"hds-design-tokens": "2.1.1",
"hds-react": "2.1.1",
"hds-core": "2.2.0",
"hds-design-tokens": "2.2.0",
"hds-react": "2.2.0",
"postcss": "8",
"prettier": "2.5.1",
"stylelint": "^14.8.3",
Expand Down
12 changes: 10 additions & 2 deletions site/src/docs/about/roadmap.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,18 @@ For previously released features, see changelogs in the [What is new section](/a
## 2022

### Q1 2022

- ~~Pattern: Multi-step forms~~
- ~~Component: Form stepper~~

### Q2 2022

- ~~Update: Typography~~
- ~~**HDS 2.0.0 Release**~~

### Q3/Q4 2022

- ~~Component: Pagination~~
- Pattern: Cookie consent
- Component: Cookie consent
- Update: Navigation improvements
Expand All @@ -38,8 +44,6 @@ For previously released features, see changelogs in the [What is new section](/a
- Component: Slider
- Component: Carousel
- Component: Article highlights and quotes

### Q3/Q4 2022
- Pattern: Image usage instructions
- Pattern: Tone of voice instructions
- Pattern: Full page templates
Expand All @@ -52,6 +56,7 @@ For previously released features, see changelogs in the [What is new section](/a
## 2021

### Q1 2021

- ~~Component: Datepicker and date field~~
- ~~Component: Time input field~~
- ~~Component: Number input field~~
Expand All @@ -61,17 +66,20 @@ For previously released features, see changelogs in the [What is new section](/a
- **HDS 1.0.0 Release**

### Q2 2021

- ~~Component: Password input field~~
- ~~Component: Fieldset~~
- ~~Component: Toggle Button~~
- ~~Component: Link~~

### Q3 2021

- ~~Component: Side navigation~~
- ~~Component: Link box~~
- ~~Component: File input~~

### Q4 2021

- ~~Component: Basic tables~~
- ~~Icons: Next set of icons~~
- ~~Update: Koros improvements~~
Expand Down
7 changes: 7 additions & 0 deletions site/src/docs/about/what-is-new.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,13 @@ import LeadParagraph from '../../components/LeadParagraph';
</LeadParagraph>

## Releases
### 2.2.0
*8.9.2022* - <ExternalLink href="https://github.com/City-of-Helsinki/helsinki-design-system/releases/tag/v2.2.0" external>Release notes</ExternalLink>

- **Added**: React Pagination component
- **Added**: Table onSort property for custom sorting with side effects
- **Added**: Notification notificationAriaLabel property to improve accessibility

### 2.1.1
*12.7.2022* - <ExternalLink href="https://github.com/City-of-Helsinki/helsinki-design-system/releases/tag/v2.1.1" external>Release notes</ExternalLink>

Expand Down
58 changes: 29 additions & 29 deletions site/src/docs/components/table/code.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -709,33 +709,33 @@ export default ({ children, pageContext }) => <TabsLayout pageContext={pageConte

Note! You can find the full list of properties in the <ExternalLink href="/storybook/react/?path=/docs/components-table--default">React Storybook.</ExternalLink>

| Property | Description | Values | Default value |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------- |
| `ariaLabelCheckboxSelection` | Aria-label for checkbox selection. | `string` | "Rivin valinta" |
| `ariaLabelSortButtonAscending` | Aria-label for sort button in ascending state. | `string` | "Järjestetty nousevaan järjestykseen" |
| `ariaLabelSortButtonDescending` | Aria-label for sort button in descending state. | `string` | "Järjestetty laskevaan järjestykseen" |
| `ariaLabelSortButtonUnset` | Aria-label for sort button in the unordered state. | `string` | - |
| `caption` | The caption of the table. | `ReactNode` | - |
| `checkboxSelection` | If set to true, the table displays the checkbox selection column to select rows. | `boolean` | false |
| `clearSelectionsText` | Text for clear selected rows button. | `string` | "Tyhjennä valinnat" |
| `cols` | Columns of the table header row. Defines header name, optional sort icon type and optional cell row transform function. | `Header[]` | - |
| `customActionButtons` | Custom action buttons to place on top of the table. | `ReactNode[]` | - |
| `dense` | If set to true, the dense variant of the table is used. | `boolean` | false |
| `heading` | The table heading. | `string` | - |
| `headingAriaLevel` | The table heading aria-level. | `number` | 2 |
| `headingId` | Table heading id. Used to name table to assistive technologies. Only applicable when heading prop is used. | `string` | "hds-table-heading-id" |
| `indexKey` | Column key used as a unique identifier for a row | `string` | - |
| `initialSortingColumnKey` | Key indicating a column that you wish to be initially sorted. Use undefined to have no column initially sorted. | `string` | - |
| `initialSortingOrder` | Sorting order applied for initial sorting. | `"asc"` `"desc"` | - |
| `onSort` | Function for custom sorting or providing side effects before or after the sort. If you want to use the component's own sorting function, call the handleSort callback function. | `function` | - |
| `renderIndexCol` | If set to true, the index column is rendered in the table. | `boolean` | true |
| `rows` | Table rows. An array of objects where keys map with the keys of col. | `object[]` | - |
| `selectAllRowsText` | Text for the select all rows button. | `string` | "Valitse kaikki rivit" |
| `selectedRows` | Selected table rows. | `SelectedRow[]` | - |
| `setSelectedRows` | Callback that updates selected rows. | `function` | - |
| `textAlignContentRight` | When set to true, table data cell text content is aligned right. When set to false (default), the text is aligned to left. | `boolean` | false |
| `variant` | Table variant. Use dark for dark brand background colors, and light for light brand background colors. | `"light"` `"dark"` | `"dark"` |
| `verticalHeaders` | Vertical headers of the table. | `Header[]` | - |
| `verticalLines` | If set to true, the table displays vertical lines on columns. | `boolean` | false |
| `zebra` | If set to true, the table uses alternating row colors zebra style. | `boolean` | false |
| Property | Description | Values | Default value |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------- |
| `ariaLabelCheckboxSelection` | Aria-label for checkbox selection. | `string` | "Rivin valinta" |
| `ariaLabelSortButtonAscending` | Aria-label for sort button in ascending state. | `string` | "Järjestetty nousevaan järjestykseen" |
| `ariaLabelSortButtonDescending` | Aria-label for sort button in descending state. | `string` | "Järjestetty laskevaan järjestykseen" |
| `ariaLabelSortButtonUnset` | Aria-label for sort button in the unordered state. | `string` | - |
| `caption` | The caption of the table. | `ReactNode` | - |
| `checkboxSelection` | If set to true, the table displays the checkbox selection column to select rows. | `boolean` | false |
| `clearSelectionsText` | Text for clear selected rows button. | `string` | "Tyhjennä valinnat" |
| `cols` | Columns of the table header row. Defines header name, optional sort icon type and optional cell row transform function. | `Header[]` | - |
| `customActionButtons` | Custom action buttons to place on top of the table. | `ReactNode[]` | - |
| `dense` | If set to true, the dense variant of the table is used. | `boolean` | false |
| `heading` | The table heading. | `string` | - |
| `headingAriaLevel` | The table heading aria-level. | `number` | 2 |
| `headingId` | Table heading id. Used to name table to assistive technologies. Only applicable when heading prop is used. | `string` | "hds-table-heading-id" |
| `indexKey` | Column key used as a unique identifier for a row | `string` | - |
| `initialSortingColumnKey` | Key indicating a column that you wish to be initially sorted. Use undefined to have no column initially sorted. | `string` | - |
| `initialSortingOrder` | Sorting order applied for initial sorting. | `"asc"` `"desc"` | - |
| `onSort` | Function for providing side effects before or after the sort. If you want to use the component's own sorting function, call the handleSort callback function. | `function` | - |
| `renderIndexCol` | If set to true, the index column is rendered in the table. | `boolean` | true |
| `rows` | Table rows. An array of objects where keys map with the keys of col. | `object[]` | - |
| `selectAllRowsText` | Text for the select all rows button. | `string` | "Valitse kaikki rivit" |
| `selectedRows` | Selected table rows. | `SelectedRow[]` | - |
| `setSelectedRows` | Callback that updates selected rows. | `function` | - |
| `textAlignContentRight` | When set to true, table data cell text content is aligned right. When set to false (default), the text is aligned to left. | `boolean` | false |
| `variant` | Table variant. Use dark for dark brand background colors, and light for light brand background colors. | `"light"` `"dark"` | `"dark"` |
| `verticalHeaders` | Vertical headers of the table. | `Header[]` | - |
| `verticalLines` | If set to true, the table displays vertical lines on columns. | `boolean` | false |
| `zebra` | If set to true, the table uses alternating row colors zebra style. | `boolean` | false |
| [Table 1:Table properties] |

0 comments on commit e71ab4d

Please sign in to comment.