@worksafevictoria/wcl7.5 1.1.20 → 1.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/package.json +1 -1
  2. package/src/components/Common/CardGrid/cardgrid.stories.js +3 -56
  3. package/src/components/Global/AlertStrip/index.stories.js +1 -0
  4. package/src/components/Global/AppFooter/index.stories.js +1 -0
  5. package/src/components/Global/ContrastMode/index.stories.js +1 -0
  6. package/src/components/Global/HeroHeader/index.stories.js +2 -1
  7. package/src/components/Global/ProgressBar/index.stories.js +6 -16
  8. package/src/components/Global/Strip/index.stories.js +1 -17
  9. package/src/components/Paragraphs/MarketingBanner/index.stories.js +3 -18
  10. package/src/components/Paragraphs/RelatedInformation/index.stories.js +1 -0
  11. package/src/components/Paragraphs/RichText/index.stories.js +2 -1
  12. package/src/components/Paragraphs/ScrollSpy/index.stories.js +1 -0
  13. package/src/components/Paragraphs/SelectableCards/Control/index.stories.js +1 -0
  14. package/src/components/Paragraphs/Statistics/index.stories.js +1 -0
  15. package/src/components/Paragraphs/Tabs/index.stories.js +1 -0
  16. package/src/components/Paragraphs/TabulatedData/index.stories.js +1 -0
  17. package/src/components/Paragraphs/TaskFinder/index.stories.js +1 -0
  18. package/src/components/Paragraphs/TextMedia/index.stories.js +1 -0
  19. package/src/components/Paragraphs/VideoGrid/index.stories.js +1 -0
  20. package/src/components/Paragraphs/VideoPlayer/index.stories.js +1 -13
  21. package/src/components/Paragraphs/Webform/index.stories.js +1 -3
  22. package/src/components/SubComponents/Breadcrumb/index.stories.js +3 -11
  23. package/src/components/SubComponents/CardGroup/index.stories.js +1 -30
  24. package/src/components/SubComponents/CtaButton/index.stories.js +1 -24
  25. package/src/components/SubComponents/Icon/index.stories.js +1 -6
  26. package/src/components/SubComponents/MediaPlayer/index.stories.js +1 -6
  27. package/src/components/SubComponents/Pagination/index.stories.js +1 -6
  28. package/src/components/SubComponents/ResourceGroup/List/index.stories.js +3 -2
  29. package/src/components/SubComponents/SingleImage/index.stories.js +2 -16
  30. package/src/components/SubComponents/VideoThumbnail/index.stories.js +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worksafevictoria/wcl7.5",
3
- "version": "1.1.20",
3
+ "version": "1.1.21",
4
4
  "main": "src/index.js",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -7,51 +7,19 @@ const cardGridTitle = 'Card Grid Title'
7
7
  export default {
8
8
  title: 'Common/CardGrid',
9
9
  component: CardGrid,
10
+ tags: ['autodocs'],
10
11
  argTypes: {
11
- cards: {
12
- control: 'array'
13
- },
14
12
  onClick: {},
15
- rtl: {
16
- control: 'boolean'
17
- },
18
- title: {
19
- control: 'text'
20
- },
21
13
  titleTag: {
22
14
  control: {
23
15
  type: 'select',
24
16
  },
25
17
  options: ['h2', 'h3']
26
18
  },
27
- subHeading: {
28
- control: 'text'
29
- },
30
- gridColumnSize: {
31
- control: 'number'
32
- },
33
- columnsPerRow: {
34
- control: 'number'
35
- },
36
- forceLgcolumns: {
37
- control: 'number'
38
- },
39
- forceMdcolumns: {
40
- control: 'number'
41
- },
42
- forceSmcolumns: {
43
- control: 'number'
44
- },
45
- size: {
19
+ size: {
46
20
  control: 'select',
47
21
  options: ['half-content', 'content', 'page', 'full']
48
22
  },
49
- isSelectable: {
50
- control: 'boolean'
51
- },
52
- cardIdPrefix: {
53
- control: 'text'
54
- },
55
23
  rowSpacing: {
56
24
  control: 'select',
57
25
  options: ['large', 'small', 'none']
@@ -76,10 +44,7 @@ export default {
76
44
  control: 'select',
77
45
  options: ['content', 'block', 'container', 'section']
78
46
  },
79
- noPaddingTop: {
80
- control: 'boolean'
81
- },
82
- cardHeaderImageType: {
47
+ cardHeaderImageType: {
83
48
  control: 'select',
84
49
  options: ['none', 'icon', 'image']
85
50
  },
@@ -91,15 +56,6 @@ export default {
91
56
  control:'select',
92
57
  options: ['small', 'medium', 'large']
93
58
  },
94
- iconIsBordered: {
95
- control: 'boolean'
96
- },
97
- showDivider: {
98
- control: 'boolean'
99
- },
100
- cardHeaderTitle: {
101
- control: 'text'
102
- },
103
59
  headerSize: {
104
60
  control: 'select',
105
61
  options: ['medium', 'large', 'extra-large', '2x-extra-large', 'custom']
@@ -108,9 +64,6 @@ export default {
108
64
  control:'select',
109
65
  options: ['left', 'center', 'right']
110
66
  },
111
- headerTag: {
112
- control: 'text'
113
- },
114
67
  caret: {
115
68
  control:'select',
116
69
  options: ['right', 'down', 'up', 'left', 'external', 'none']
@@ -126,12 +79,6 @@ export default {
126
79
  borderType: {
127
80
  control:'select',
128
81
  options: ['thin', 'none', 'shadow']
129
- },
130
- contentClass: {
131
- control: 'text'
132
- },
133
- cardDescription: {
134
- control: 'text'
135
82
  }
136
83
  }
137
84
  }
@@ -3,6 +3,7 @@ import AlertStrip from './index.vue'
3
3
  export default {
4
4
  title: 'Global/AlertStrip',
5
5
  component: AlertStrip,
6
+ tags: ['autodocs'],
6
7
  args: {
7
8
  isWarning: false,
8
9
  desc: 'Refresh the page in order to show alert strip after dismissing it.',
@@ -7,6 +7,7 @@ dateInput = dateInput.toString()
7
7
  export default {
8
8
  title: 'Global/AppFooter',
9
9
  component: AppFooter,
10
+ tags: ['autodocs'],
10
11
  data() {
11
12
  return {
12
13
  footerMenu
@@ -3,6 +3,7 @@ import ContrastMode from './index.vue'
3
3
  export default {
4
4
  title: 'Global/ContrastMode',
5
5
  component: ContrastMode,
6
+ tags: ['autodocs'],
6
7
  }
7
8
 
8
9
  const Template = (args) => ({
@@ -31,6 +31,7 @@ const heroTitle = 'HeroHeader hero example'
31
31
  export default {
32
32
  title: 'Global/HeroHeader',
33
33
  component: HeroHeader,
34
+ tags: ['autodocs'],
34
35
  argTypes: {
35
36
  type: {
36
37
  control: 'string',
@@ -43,7 +44,7 @@ export default {
43
44
  description: '<p class="intro">The page subtitle goes in here... The page subtitle goes in here... The page subtitle goes in here...</p><p><a href="#" class="cta-button">class cta-button</a></p>',
44
45
  image: {
45
46
  url:
46
- 'https://content.api.worksafe.vic.gov.au/sites/default/files/2020-04/Topic-Coronavirus-COVID-19.jpg',
47
+ 'https://content-v2.api.worksafe.vic.gov.au/sites/default/files/2020-04/Topic-Coronavirus-COVID-19.jpg',
47
48
  alt: 'Some alt text'
48
49
  },
49
50
  cta: cta_content,
@@ -21,31 +21,21 @@ const mockData = [
21
21
  export default {
22
22
  title: 'Global/ProgressBar',
23
23
  component: ProgressBar,
24
- argTypes: {
25
- steeperStyle: {
26
- control: 'boolean'
27
- },
28
- items: {
29
- control: 'array'
30
- },
31
- rtl: {
32
- control: 'boolean'
33
- }
24
+ tags: ['autodocs'],
25
+ args: {
26
+ items: mockData,
27
+ rtl: false
34
28
  }
35
29
  }
36
30
 
37
31
  export const Steeper = {
38
32
  args: {
39
- steeperStyle: true,
40
- items: mockData,
41
- rtl: false
33
+ steeperStyle: true
42
34
  }
43
35
  }
44
36
 
45
37
  export const Default = {
46
38
  args: {
47
- steeperStyle: false,
48
- items: mockData,
49
- rtl: false
39
+ steeperStyle: false
50
40
  }
51
41
  }
@@ -9,23 +9,7 @@ const stripContentFull =
9
9
  export default {
10
10
  title: 'Global/Strip',
11
11
  component: Strip,
12
- argTypes: {
13
- stripHeading: {
14
- control: 'text'
15
- },
16
- stripContent: {
17
- control: 'text'
18
- },
19
- rtl: {
20
- control: 'boolean'
21
- },
22
- type: {
23
- control: 'text'
24
- },
25
- mini: {
26
- control: 'boolean'
27
- }
28
- }
12
+ tags: ['autodocs'],
29
13
  }
30
14
 
31
15
  export const MiniAlertStrip = {
@@ -5,30 +5,15 @@ export default {
5
5
  component: MarketingBanner,
6
6
  tags: ['autodocs'],
7
7
  argTypes: {
8
- image: {
9
- control: 'text'
10
- },
11
- leftText: {
12
- control: 'text'
13
- },
14
- leftBg: {
8
+ leftBg: {
15
9
  control: 'select',
16
10
  options: ['yellow', 'black', 'white']
17
11
  },
18
- rightText: {
19
- control: 'text'
20
- },
21
- rightBg: {
12
+ rightBg: {
22
13
  control: 'select',
23
14
  options: ['yellow', 'black', 'white']
24
15
  },
25
- withLink: {
26
- control: 'boolean'
27
- },
28
- hideLeft: {
29
- control: 'boolean'
30
- },
31
- link: {
16
+ link: {
32
17
  control: 'text',
33
18
  table: { disable: true }
34
19
  },
@@ -4,6 +4,7 @@ import { taxonomyTagsList } from '../../../mock/related-info'
4
4
  export default {
5
5
  title: 'Paragraphs/RelatedInformation',
6
6
  component: RelatedInformation,
7
+ tags: ['autodocs'],
7
8
  argTypes: {
8
9
  goToCollectionPage: {
9
10
  table: {
@@ -379,7 +379,8 @@ const mockData = {
379
379
 
380
380
  export default {
381
381
  title: 'SubComponents/RichText',
382
- component: RichText
382
+ component: RichText,
383
+ tags: ['autodocs'],
383
384
  }
384
385
 
385
386
  export const WYSIWYG = {
@@ -42,6 +42,7 @@ const arabicItemList = [
42
42
  export default {
43
43
  title: 'Paragraphs/ScrollSpy',
44
44
  component: ScrollSpy,
45
+ tags: ['autodocs'],
45
46
  argTypes: {
46
47
  itemList: {
47
48
  table: {disable: true}
@@ -4,6 +4,7 @@ import { mockSelectableCards } from '../../../../mock/control-selectable-cards'
4
4
  export default {
5
5
  title: 'Paragraphs/SelectableCards',
6
6
  component: SelectableCards,
7
+ tags: ['autodocs'],
7
8
  argTypes: {
8
9
  cardType: {
9
10
  table: { disable: true }
@@ -57,6 +57,7 @@ const itemListAr = [
57
57
  export default {
58
58
  title: 'Paragraphs/Statistics',
59
59
  component: Statistics,
60
+ tags: ['autodocs'],
60
61
  argTypes: {
61
62
  headingTag: {
62
63
  control: 'select',
@@ -48,6 +48,7 @@ const mockData = [
48
48
  export default {
49
49
  title: 'Paragraphs/Tabs',
50
50
  component: Tabs,
51
+ tags: ['autodocs'],
51
52
  args: {
52
53
  items: mockData,
53
54
  rtl: false,
@@ -4,6 +4,7 @@ import { fields, fieldsAr, items, itemsAr } from './Constants'
4
4
  export default {
5
5
  title: 'Paragraphs/TabulatedData',
6
6
  component: TabulatedData,
7
+ tags: ['autodocs'],
7
8
  data() {
8
9
  return {
9
10
  TabulatedData,
@@ -8,6 +8,7 @@ import {
8
8
  export default {
9
9
  title: 'Paragraphs/TaskFinder',
10
10
  component: TaskFinder,
11
+ tags: ['autodocs'],
11
12
  args: {
12
13
  taskList: taskFinderTempData,
13
14
  title: taskFinderTempTitle,
@@ -19,6 +19,7 @@ const MockVideo = {
19
19
  export default {
20
20
  title: 'Paragraphs/Text + Media',
21
21
  component: TextMedia,
22
+ tags: ['autodocs'],
22
23
  args: {
23
24
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>',
24
25
  titleText: 'A sample media item',
@@ -106,6 +106,7 @@ const mockData = {
106
106
  export default {
107
107
  title: 'Paragraphs/VideoGrid',
108
108
  component: { VideoGrid, Container, Row, Column },
109
+ tags: ['autodocs'],
109
110
  argTypes: {
110
111
  titleTag: {
111
112
  control: 'select',
@@ -19,18 +19,12 @@ const mediaDesc = 'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse
19
19
  export default {
20
20
  title: 'Paragraphs/VideoPlayer',
21
21
  component: { VideoMedia, Container, Row, Column },
22
+ tags: ['autodocs'],
22
23
  argTypes: {
23
24
  titleTag: {
24
25
  control: 'select',
25
26
  options: ['h2', 'h3']
26
27
  },
27
- mediaTitle: {
28
- control: 'text'
29
- },
30
- mediaDescription: {
31
- control: 'text'
32
-
33
- },
34
28
  videoId: {
35
29
  control: 'select',
36
30
  options: [mockData.videoId.YouTube, mockData.videoId.Vimeo]
@@ -38,12 +32,6 @@ export default {
38
32
  provider: {
39
33
  control: 'select',
40
34
  options: [mockData.provider.YouTube, mockData.provider.Vimeo],
41
- },
42
- transcriptTitle: {
43
- control: 'text'
44
- },
45
- transcript: {
46
- control: 'text'
47
35
  }
48
36
  }
49
37
  }
@@ -3,6 +3,7 @@ import WebformPara from './index.vue'
3
3
  export default {
4
4
  title: 'Paragraphs/Webform',
5
5
  component: WebformPara,
6
+ tags: ['autodocs'],
6
7
  argTypes: {
7
8
  preview: {
8
9
  control: 'boolean',
@@ -10,9 +11,6 @@ export default {
10
11
  disable: true
11
12
  }
12
13
  },
13
- contentApiUrl: {
14
- control: 'text',
15
- },
16
14
  processID: {
17
15
  control: 'text',
18
16
  table: {
@@ -4,19 +4,11 @@ import mockData from './constants'
4
4
  export default {
5
5
  title: 'SubComponents/Breadcrumb',
6
6
  component: Breadcrumb,
7
- argTypes: {
8
- breadcrumbItems: {
9
- control: 'array'
10
- },
11
- rtl: {
12
- control: 'boolean'
13
- }
14
- }
15
- }
16
-
17
- export const Default = {
7
+ tags: ['autodocs'],
18
8
  args: {
19
9
  breadcrumbItems: mockData,
20
10
  rtl: false
21
11
  }
22
12
  }
13
+
14
+ export const Default = {}
@@ -3,40 +3,11 @@ import CardGroup from './index.vue'
3
3
  export default {
4
4
  title: 'SubComponents/CardGroup',
5
5
  component: { CardGroup },
6
+ tags: ['autodocs'],
6
7
  argTypes: {
7
- collectionTitle: {
8
- control: 'text'
9
- },
10
- titleTag: {
11
- control: 'text'
12
- },
13
- cards: {
14
- type: 'number'
15
- },
16
8
  background: {
17
9
  control: 'select',
18
10
  options: ['grey', 'yellow', 'white']
19
- },
20
- showImage: {
21
- control: 'boolean'
22
- },
23
- link: {
24
- control: 'text'
25
- },
26
- date: {
27
- control: 'text'
28
- },
29
- location: {
30
- control: 'text'
31
- },
32
- rtl: {
33
- control: 'boolean'
34
- },
35
- columns: {
36
- type: 'number'
37
- },
38
- emptyCardsText: {
39
- control: 'text'
40
11
  }
41
12
  }
42
13
  }
@@ -4,6 +4,7 @@ import svg from './../../../assets/icons/instagram.svg?raw'
4
4
  export default {
5
5
  title: 'SubComponents/CTA',
6
6
  component: CtaButton,
7
+ tags: ['autodocs'],
7
8
  argTypes: {
8
9
  glyph: {
9
10
  control: ['object', 'text'],
@@ -13,30 +14,6 @@ export default {
13
14
  control: 'text',
14
15
  table: { disable: true }
15
16
  },
16
- url: {
17
- control: 'text'
18
- },
19
- isCentred: {
20
- control: 'boolean'
21
- },
22
- rtl: {
23
- control: 'boolean'
24
- },
25
- slim: {
26
- control: 'boolean'
27
- },
28
- stretch: {
29
- control: 'boolean'
30
- },
31
- textOnly: {
32
- control: 'boolean'
33
- },
34
- workwell: {
35
- control: 'boolean'
36
- },
37
- disabled: {
38
- control: 'boolean'
39
- },
40
17
  isFluid: {
41
18
  control: 'boolean',
42
19
  table: { disable: true }
@@ -5,10 +5,8 @@ import svg from '../../../assets/icons/instagram.svg?raw'
5
5
  export default {
6
6
  title: 'SubComponents/Icon',
7
7
  components: Icon,
8
+ tags: ['autodocs'],
8
9
  argTypes: {
9
- bordered: {
10
- control: 'boolean'
11
- },
12
10
  glyph: {
13
11
  control: ['object', 'text'],
14
12
  table: { disable: true }
@@ -17,9 +15,6 @@ export default {
17
15
  control: ['number', 'text'],
18
16
  table: { disable: true }
19
17
  },
20
- inverted: {
21
- control: 'boolean'
22
- },
23
18
  width: {
24
19
  control: ['number', 'text'],
25
20
  table: { disable: true }
@@ -11,16 +11,11 @@ const mockData = {
11
11
  export default {
12
12
  title: 'SubComponents/MediaPlayer',
13
13
  component: { VideoPlayer, Container, Row, Column },
14
+ tags: ['autodocs'],
14
15
  argTypes: {
15
- videoId: {
16
- control: 'text',
17
- },
18
16
  provider: {
19
17
  control: 'select',
20
18
  options: mockData.provider
21
- },
22
- rtl: {
23
- control: 'boolean'
24
19
  }
25
20
  }
26
21
  }
@@ -3,6 +3,7 @@ import Pagination from './index.vue'
3
3
  export default {
4
4
  title: 'SubComponents/Pagination',
5
5
  component: Pagination,
6
+ tags: ['autodocs'],
6
7
  argTypes: {
7
8
  ariaLabel: {
8
9
  control: 'text',
@@ -10,9 +11,6 @@ export default {
10
11
  disable: true
11
12
  }
12
13
  },
13
- rows: {
14
- control: 'number',
15
- },
16
14
  offset: {
17
15
  control: 'number',
18
16
  table: {
@@ -31,9 +29,6 @@ export default {
31
29
  disable: true
32
30
  }
33
31
  },
34
- maxPages: {
35
- control: 'number',
36
- },
37
32
  pageClicked: {
38
33
  table: { disable: true }
39
34
  },
@@ -5,6 +5,7 @@ const bundleContent = ['Document', 'Presentation', 'Spreadsheet', 'Resource']
5
5
  export default {
6
6
  title: 'SubComponents/ResourceGroup',
7
7
  component: { ResourceGroup },
8
+ tags: ['autodocs'],
8
9
  argTypes: {
9
10
  background: {
10
11
  control: 'select',
@@ -32,7 +33,7 @@ export default {
32
33
  },
33
34
  resourceType: {
34
35
  control: 'text',
35
- table: { disable: true }
36
+ table: { disable: true }
36
37
  }
37
38
  },
38
39
  args: {
@@ -50,7 +51,7 @@ export default {
50
51
  hasPreselectedFilters: false,
51
52
  totalResults: 10,
52
53
  filterResults: 1,
53
- showLoadMore: false,
54
+ showLoadMore: true,
54
55
  resourceType: 'resource-list'
55
56
  }
56
57
  }
@@ -3,26 +3,12 @@ import SingleImage from './index.vue'
3
3
  export default {
4
4
  title: 'SubComponents/SingleImage',
5
5
  component: SingleImage,
6
+ tags: ['autodocs'],
6
7
  argTypes: {
7
8
  size: {
8
9
  control: 'select',
9
10
  options: ['page', 'content', 'half-content']
10
- },
11
- caption: {
12
- control: 'text'
13
- },
14
- url: {
15
- control: 'text',
16
- },
17
- rtl: {
18
- control: 'boolean'
19
- },
20
- presentation: {
21
- control: 'boolean'
22
- },
23
- alt: {
24
- control: 'text',
25
- }
11
+ }
26
12
  }
27
13
  }
28
14
 
@@ -17,6 +17,7 @@ const mockData = {
17
17
  export default {
18
18
  title: 'SubComponents/VideoThumbnail',
19
19
  component: { VideoThumbnail },
20
+ tags: ['autodocs'],
20
21
  argTypes: {
21
22
  video: {
22
23
  control: 'object',