@ilo-org/twig 0.5.0 → 0.6.0

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 (14) hide show
  1. package/.turbo/turbo-build:lib.log +2 -2
  2. package/CHANGELOG.md +17 -0
  3. package/package.json +4 -4
  4. package/src/patterns/components/footer/footer.twig +8 -9
  5. package/src/patterns/components/footer/footer.wingsuit.yml +24 -13
  6. package/src/patterns/components/hero/hero.twig +1 -1
  7. package/src/patterns/components/hero/hero.wingsuit.yml +22 -20
  8. package/src/patterns/components/herocard/herocard.twig +7 -13
  9. package/src/patterns/components/herocard/herocard.wingsuit.yml +9 -8
  10. package/src/patterns/components/socialmedia/index.js +6 -0
  11. package/src/patterns/components/socialmedia/socialmedia.mdx +48 -0
  12. package/src/patterns/components/socialmedia/socialmedia.stories.jsx +15 -0
  13. package/src/patterns/components/socialmedia/socialmedia.twig +17 -0
  14. package/src/patterns/components/socialmedia/socialmedia.wingsuit.yml +58 -0
package/.turbo/turbo-build:lib.log CHANGED
@@ -1,9 +1,9 @@
1
1
 
2
- > @ilo-org/twig@0.5.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
2
+ > @ilo-org/twig@0.6.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
3
3
  > node importprefix.js && node importsvgs.js && pnpm output
4
4
 
5
5
  theme prefix added
6
6
 
7
- > @ilo-org/twig@0.5.0 output /home/runner/work/designsystem/designsystem/packages/twig
7
+ > @ilo-org/twig@0.6.0 output /home/runner/work/designsystem/designsystem/packages/twig
8
8
  > node outputtwigs.js
9
9
 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @ilo-org/twig
2
2
 
3
+ ## 0.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 0f45a7aae: Add new social media component and use in hero card and footer components
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies [0f45a7aae]
12
+ - Updated dependencies [0f45a7aae]
13
+ - Updated dependencies [0f45a7aae]
14
+ - Updated dependencies [0f45a7aae]
15
+ - Updated dependencies [2f6b0e73f]
16
+ - @ilo-org/themes@0.2.0
17
+ - @ilo-org/icons@0.2.1
18
+ - @ilo-org/styles@0.5.0
19
+
3
20
  ## 0.5.0
4
21
 
5
22
  ### Minor Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ilo-org/twig",
3
- "version": "0.5.0",
3
+ "version": "0.6.0",
4
4
  "license": "Apache-2.0",
5
5
  "description": "Twig components for the ILO's Design System",
6
6
  "main": "",
@@ -24,9 +24,9 @@
24
24
  "video.js": "^7.21.2",
25
25
  "@ilo-org/brand-assets": "0.1.0",
26
26
  "@ilo-org/fonts": "0.1.0",
27
- "@ilo-org/icons": "0.2.0",
28
- "@ilo-org/styles": "0.4.0",
29
- "@ilo-org/themes": "0.1.16",
27
+ "@ilo-org/icons": "0.2.1",
28
+ "@ilo-org/styles": "0.5.0",
29
+ "@ilo-org/themes": "0.2.0",
30
30
  "@ilo-org/utils": "0.0.11"
31
31
  },
32
32
  "devDependencies": {
package/src/patterns/components/footer/footer.twig CHANGED
@@ -22,15 +22,14 @@
22
22
  {% endif %}
23
23
  {% if social or subscribe %}
24
24
  <div class="connect">
25
- {% if social %}
26
- <h5 class="social--headline">{{social.headline}}</h5>
27
- <ul class="social--links">
28
- {% for link in social.links %}
29
- <li class="social--links--item">
30
- <a href="{{link.url}}" class="social--links--link {{link.type|lower}}">{{link.type|capitalize}}</a>
31
- </li>
32
- {% endfor %}
33
- </ul>
25
+ {% if socialmedia %}
26
+ <div class="social--links">
27
+ {% include '@components/socialmedia/socialmedia.twig' with {
28
+ theme: "dark",
29
+ headline: socialmedia.headline,
30
+ icons: socialmedia.icons,
31
+ } %}
32
+ </div>
34
33
  {% endif %}
35
34
  {% if subscribe %}
36
35
  {% include '@components/button/button.twig' with {label: subscribe.label, url: subscribe.url, type: 'primary', size: 'large', target: '_blank'} %}
package/src/patterns/components/footer/footer.wingsuit.yml CHANGED
@@ -48,23 +48,34 @@ footer:
48
48
  url: "http://www.google.com"
49
49
  - label: "Link Six"
50
50
  url: "http://www.google.com"
51
- social:
51
+ socialmedia:
52
52
  type: object
53
53
  label: social
54
54
  description: "Links to social media"
55
55
  preview:
56
- headline: "Social Links Headline"
57
- links:
58
- - type: "instagram"
59
- url: "http://www.google.com"
60
- - type: "facebook"
61
- url: "http://www.google.com"
62
- - type: "twitter"
63
- url: "http://www.google.com"
64
- - type: "tiktok"
65
- url: "http://www.google.com"
66
- - type: "flickr"
67
- url: "http://www.google.com"
56
+ headline: "Connect with the ILO"
57
+ icons:
58
+ - icon: "twitter"
59
+ label: "Twitter"
60
+ url: "https://twitter.com/#!/ilo"
61
+ - icon: "facebook"
62
+ label: "Facebook"
63
+ url: "https://www.facebook.com/ilo.org"
64
+ - icon: "linkedin"
65
+ label: "LinkedIn"
66
+ url: "https://www.linkedin.com/company/international-labour-organization-ilo"
67
+ - icon: "instagram"
68
+ label: "Instagram"
69
+ url: "https://www.instagram.com/ilo.org/"
70
+ - icon: "tiktok"
71
+ label: "TikTok"
72
+ url: "https://www.tiktok.com/@ilo"
73
+ - icon: "flickr"
74
+ label: "Flickr"
75
+ url: "https://www.flickr.com/photos/ilopictures/albums"
76
+ - icon: "youtube"
77
+ label: "YouTube"
78
+ url: "https://www.youtube.com/channel/UCrlcu5KChYyHwXlIeD7oLUg"
68
79
  subscribe:
69
80
  type: object
70
81
  label: subscribe
package/src/patterns/components/hero/hero.twig CHANGED
@@ -35,7 +35,7 @@
35
35
  datecopy: herocard.datecopy,
36
36
  intro: herocard.intro,
37
37
  prefix: prefix,
38
- socials: herocard.socials,
38
+ socialmedia: herocard.socialmedia,
39
39
  theme: herocard.theme,
40
40
  background: herocard.background,
41
41
  title: herocard.title,
package/src/patterns/components/hero/hero.wingsuit.yml CHANGED
@@ -44,16 +44,17 @@ hero:
44
44
  background: "solid"
45
45
  cornercut: "true"
46
46
  eyebrow: ILO Topics
47
- socials:
48
- - label: "Facebook"
49
- url: "https://www.facebook.com/ilo.org"
50
- icon: "facebook"
51
- - label: "Twitter"
52
- url: "https://www.twitter.com/ilo.org"
53
- icon: "twitter"
54
- - label: "Linkedin"
55
- url: "https://www.linkedin.com/company/international-labour-organization-ilo"
56
- icon: "linkedin"
47
+ socialmedia:
48
+ icons:
49
+ - label: "Facebook"
50
+ url: "https://www.facebook.com/ilo.org"
51
+ icon: "facebook"
52
+ - label: "Twitter"
53
+ url: "https://www.twitter.com/ilo.org"
54
+ icon: "twitter"
55
+ - label: "Linkedin"
56
+ url: "https://www.linkedin.com/company/international-labour-organization-ilo"
57
+ icon: "linkedin"
57
58
  caption:
58
59
  label: Caption
59
60
  type: object
@@ -138,16 +139,17 @@ hero:
138
139
  background: "solid"
139
140
  cornercut: "true"
140
141
  eyebrow: Women in management
141
- socials:
142
- - label: "Facebook"
143
- url: "https://www.facebook.com/ilo.org"
144
- icon: "facebook"
145
- - label: "Twitter"
146
- url: "https://www.twitter.com/ilo.org"
147
- icon: "twitter"
148
- - label: "Linkedin"
149
- url: "https://www.linkedin.com/company/international-labour-organization-ilo"
150
- icon: "linkedin"
142
+ socialmedia:
143
+ icons:
144
+ - label: "Facebook"
145
+ url: "https://www.facebook.com/ilo.org"
146
+ icon: "facebook"
147
+ - label: "Twitter"
148
+ url: "https://www.twitter.com/ilo.org"
149
+ icon: "twitter"
150
+ - label: "Linkedin"
151
+ url: "https://www.linkedin.com/company/international-labour-organization-ilo"
152
+ icon: "linkedin"
151
153
  caption:
152
154
  label: A metalurgy worker at a manufacturing plant in Viet Nam. © ILO/Minh Quang
153
155
  icon: "true"
package/src/patterns/components/herocard/herocard.twig CHANGED
@@ -20,17 +20,11 @@
20
20
  {% if intro %}
21
21
  <p class="{{ prefix }}--hero-card--intro">{{ intro }}</p>
22
22
  {% endif %}
23
- <ul class="{{ prefix }}--hero-card--list">
24
- {% for item in socials %}
25
- <li class="{{ prefix }}--hero-card--list--item">
26
- <a
27
- class="{{ prefix }}--hero-card--link icon icon--{{ item.icon }}"
28
- href={{ item.url }}
29
- title={{ item.label }}
30
- >
31
- {{ item.label }}
32
- </a>
33
- </li>
34
- {% endfor %}
35
- </ul>
23
+ {% if socialmedia %}
24
+ {% include "@components/socialmedia/socialmedia.twig" with {
25
+ theme: theme,
26
+ align: "start",
27
+ icons: socialmedia.icons
28
+ } %}
29
+ {% endif %}
36
30
  </div>
package/src/patterns/components/herocard/herocard.wingsuit.yml CHANGED
@@ -50,17 +50,18 @@ herocard:
50
50
  label: Intro
51
51
  description: Intro text for the hero
52
52
  preview: "Over the last three decades, global supply chains have been a key entry point for women to enter the formal workforce."
53
- socials:
53
+ socialmedia:
54
54
  type: object
55
- label: Social links
55
+ label: Social media links
56
56
  description: The social links to include in the hero
57
57
  preview:
58
- - label: "Facebook"
59
- url: "https://www.facebook.com/"
60
- icon: "facebook"
61
- - label: "Linkedin"
62
- url: "https://www.linkedin.com/"
63
- icon: "linkedin"
58
+ icons:
59
+ - label: "Facebook"
60
+ url: "https://www.facebook.com/"
61
+ icon: "facebook"
62
+ - label: "Linkedin"
63
+ url: "https://www.linkedin.com/"
64
+ icon: "linkedin"
64
65
  title:
65
66
  type: string
66
67
  label: Title
package/src/patterns/components/socialmedia/index.js ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * SocialMedia COMPONENT
3
+ */
4
+ // Module template
5
+ import "./socialmedia.twig";
6
+ import "./socialmedia.wingsuit.yml";
package/src/patterns/components/socialmedia/socialmedia.mdx ADDED
@@ -0,0 +1,48 @@
1
+ import { Title, Subtitle } from "@storybook/addon-docs/blocks";
2
+ import {
3
+ PatternLoad,
4
+ PatternPreview,
5
+ PatternProperties,
6
+ PatternInclude,
7
+ PatternDoc,
8
+ } from "@wingsuit-designsystem/storybook";
9
+ import brandTokens from "@ilo-org/themes/tokens/brand/base.json";
10
+
11
+ <PatternLoad patternId="socialmedia">
12
+ {(pattern) => {
13
+ return (
14
+ <>
15
+ <Title />
16
+ <Subtitle>{pattern.description}</Subtitle>
17
+ <div style={{ margin: "30px 0" }}>
18
+ <div
19
+ style={{
20
+ padding: "30px 20px",
21
+ border: "1px solid rgba(0,0,0,.1)",
22
+ boxShadow: "rgba(0, 0, 0, 0.10) 0 1px 3px 0",
23
+ }}
24
+ >
25
+ <PatternPreview variant={pattern.getDefaultVariant()} />
26
+ </div>
27
+ <div
28
+ style={{
29
+ padding: "30px 20px",
30
+ border: "1px solid rgba(0,0,0,.1)",
31
+ boxShadow: "rgba(0, 0, 0, 0.10) 0 1px 3px 0",
32
+ background: "rgba(35, 0, 80, 1)",
33
+ }}
34
+ >
35
+ <PatternPreview
36
+ variant={pattern.getDefaultVariant()}
37
+ theme="dark"
38
+ />
39
+ </div>
40
+ </div>
41
+ <h3>Properties</h3>
42
+ <PatternProperties variant={pattern.getDefaultVariant()} />
43
+ <h3>Basic usage</h3>
44
+ <PatternInclude variant={pattern.getDefaultVariant()} />
45
+ </>
46
+ );
47
+ }}
48
+ </PatternLoad>
package/src/patterns/components/socialmedia/socialmedia.stories.jsx ADDED
@@ -0,0 +1,15 @@
1
+ import "./index";
2
+ import mdx from "./socialmedia.mdx";
3
+
4
+ export default {};
5
+ const patternDefinition = require("./socialmedia.wingsuit.yml");
6
+
7
+ /* eslint-disable-next-line */
8
+ export const wingsuit = {
9
+ patternDefinition,
10
+ parameters: {
11
+ docs: {
12
+ page: mdx,
13
+ },
14
+ },
15
+ };
package/src/patterns/components/socialmedia/socialmedia.twig ADDED
@@ -0,0 +1,17 @@
1
+ {#
2
+ SOCIALMEDIA COMPONENT
3
+ #}
4
+ <div class="{{ prefix }}--social-media {{ prefix }}--social-media__theme__{{ theme|default("light") }} {{ prefix }}--social-media__justify__{{ align|default("start") }}">
5
+ {% if headline %}
6
+ <h5 class="{{ prefix }}--social-media--headline">{{ headline }}</h5>
7
+ {% endif %}
8
+ <ul class="{{ prefix }}--social-media--list">
9
+ {% for item in icons %}
10
+ <li class="{{ prefix }}--social-media--list--item">
11
+ <a class="{{ prefix }}--social-media--list--item--icon {{ prefix }}--social-media--list--item--icon__{{ item.icon }}" href={{ item.url }} title={{ item.label|capitalize }} target="_blank">
12
+ {{item.label|capitalize}}
13
+ </a>
14
+ </li>
15
+ {% endfor %}
16
+ </ul>
17
+ </div>
package/src/patterns/components/socialmedia/socialmedia.wingsuit.yml ADDED
@@ -0,0 +1,58 @@
1
+ socialmedia:
2
+ use: "@components/socialmedia/socialmedia.twig"
3
+ label: Social Media
4
+ description: The Social Media component displays a series of social media icons with links and an optional headline. It can have a light or a dark theme.
5
+ settings:
6
+ theme:
7
+ type: select
8
+ label: Theme
9
+ description: The theme of the social media icons.
10
+ options:
11
+ light: light
12
+ dark: dark
13
+ preview: light
14
+ defaultValue: light
15
+ justify:
16
+ type: select
17
+ label: Justify
18
+ description: The justification of the headline and icons.
19
+ options:
20
+ start: start
21
+ center: center
22
+ preview: start
23
+ defaultValue: start
24
+ fields:
25
+ headline:
26
+ type: string
27
+ label: headline
28
+ description: Optional headline of social media links
29
+ preview: "Follow us on social media"
30
+ required: false
31
+ icons:
32
+ type: object
33
+ label: icons
34
+ description: The social media icons to display. Each icon has an `icon` corresponding to the name of a social network icon in lowercase, a `label` that is displayed as a tooltip, and a `url` that is the link to the social media page.
35
+ preview:
36
+ - icon: "twitter"
37
+ label: "Twitter"
38
+ url: "https://twitter.com/#!/ilo"
39
+ - icon: "facebook"
40
+ label: "Facebook"
41
+ url: "https://www.facebook.com/ilo.org"
42
+ - icon: "linkedin"
43
+ label: "LinkedIn"
44
+ url: "https://www.linkedin.com/company/international-labour-organization-ilo"
45
+ - icon: "instagram"
46
+ label: "Instagram"
47
+ url: "https://www.instagram.com/ilo.org/"
48
+ - icon: "tiktok"
49
+ label: "TikTok"
50
+ url: "https://www.tiktok.com/@ilo"
51
+ - icon: "flickr"
52
+ label: "Flickr"
53
+ url: "https://www.flickr.com/photos/ilopictures/albums"
54
+ - icon: "youtube"
55
+ label: "YouTube"
56
+ url: "https://www.youtube.com/channel/UCrlcu5KChYyHwXlIeD7oLUg"
57
+ required: true
58
+ visibility: storybook