@ilo-org/twig 0.8.0 → 0.8.2

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 (6) hide show
  1. package/.turbo/turbo-build:lib.log +2 -2
  2. package/CHANGELOG.md +17 -0
  3. package/package.json +2 -2
  4. package/src/patterns/components/cardgroup/cardgroup.twig +25 -23
  5. package/src/patterns/components/cardgroup/cardgroup.wingsuit.yml +31 -7
  6. package/src/patterns/components/hero/hero.twig +46 -46
package/.turbo/turbo-build:lib.log CHANGED
@@ -1,9 +1,9 @@
1
1
 
2
- > @ilo-org/twig@0.8.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
2
+ > @ilo-org/twig@0.8.2 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.8.0 output /home/runner/work/designsystem/designsystem/packages/twig
7
+ > @ilo-org/twig@0.8.2 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.8.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [0cb90a388]
8
+ - Updated dependencies [b0797d2f9]
9
+ - @ilo-org/styles@0.7.2
10
+
11
+ ## 0.8.1
12
+
13
+ ### Patch Changes
14
+
15
+ - 0fd4b60df: - In Card Group, set `theme` and `type` properties for Cards on Card Group, not on invididual cards
16
+ - Use `cardcount` to determine how many cards should be in a row and how wide they should be.
17
+ - Updated dependencies [0fd4b60df]
18
+ - @ilo-org/styles@0.7.1
19
+
3
20
  ## 0.8.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.8.0",
3
+ "version": "0.8.2",
4
4
  "license": "Apache-2.0",
5
5
  "description": "Twig components for the ILO's Design System",
6
6
  "main": "",
@@ -25,7 +25,7 @@
25
25
  "@ilo-org/brand-assets": "0.1.0",
26
26
  "@ilo-org/fonts": "0.1.0",
27
27
  "@ilo-org/icons": "0.2.1",
28
- "@ilo-org/styles": "0.7.0",
28
+ "@ilo-org/styles": "0.7.2",
29
29
  "@ilo-org/themes": "0.2.0",
30
30
  "@ilo-org/utils": "0.0.11"
31
31
  },
package/src/patterns/components/cardgroup/cardgroup.twig CHANGED
@@ -1,31 +1,33 @@
1
1
  {#
2
2
  CARDGROUP COMPONENT
3
3
  #}
4
- <div class="{{prefix}}--cardgroup {% if collapsed %} {{prefix}}--cardgroup__collapsed {% endif %} {% if justify %} {{prefix}}--cardgroup__justify__{{justify}} {% endif %}">
4
+ <div class="{{prefix}}--cardgroup {{prefix}}--cardgroup__count__{{cardcount}} {% if collapsed %} {{prefix}}--cardgroup__collapsed {% endif %} {% if justify %} {{prefix}}--cardgroup__justify__{{justify}} {% endif %}">
5
5
  <div class="{{prefix}}--cardgroup--inner">
6
6
  {% for card in group %}
7
- {% include "@components/card/card.twig" with {
8
- size: size,
9
- cta: card.cta,
10
- dataset: card.dataset,
11
- date: card.date,
12
- dateExtra: card.dateExtra,
13
- eyebrow: card.eyebrow,
14
- image: card.image,
15
- intro: card.intro,
16
- link: card.link,
17
- linklist: card.linklist,
18
- list: card.list,
19
- title: card.title,
20
- alignment: card.alignment,
21
- color: card.color,
22
- cornercut: card.cornercut,
23
- source: card.source,
24
- theme: card.theme,
25
- type: card.type,
26
- prefix: prefix
27
- } only %}
28
- {% endfor %}
7
+ <div class="{{prefix}}--cardgroup--card">
8
+ {% include "@components/card/card.twig" with {
9
+ size: "fluid",
10
+ theme: theme,
11
+ type: type,
12
+ cta: card.cta,
13
+ dataset: card.dataset,
14
+ date: card.date,
15
+ dateExtra: card.dateExtra,
16
+ eyebrow: card.eyebrow,
17
+ image: card.image,
18
+ intro: card.intro,
19
+ link: card.link,
20
+ linklist: card.linklist,
21
+ list: card.list,
22
+ title: card.title,
23
+ alignment: card.alignment,
24
+ color: card.color,
25
+ cornercut: card.cornercut,
26
+ source: card.source,
27
+ prefix: prefix
28
+ } only %}
29
+ </div>
30
+ {% endfor %}
29
31
  {% if cta %}
30
32
  <div class="{{prefix}}--cardgroup--button-wrap">
31
33
  <a
package/src/patterns/components/cardgroup/cardgroup.wingsuit.yml CHANGED
@@ -13,6 +13,17 @@ cardgroup:
13
13
  options:
14
14
  true: True
15
15
  false: False
16
+ cardcount:
17
+ type: select
18
+ label: collapsed
19
+ description: Number of cards to show in a row, also determines the width of the cards as a function of how many there need to be. As a result, passing `size` to the individual cards has no effect since the card group manages the size of the cards.
20
+ required: false
21
+ preview: "three"
22
+ options:
23
+ one: one
24
+ two: two
25
+ three: three
26
+ four: four
16
27
  justify:
17
28
  type: select
18
29
  label: collapsed
@@ -23,16 +34,29 @@ cardgroup:
23
34
  start: start
24
35
  center: center
25
36
  between: between
26
- size:
37
+ theme:
27
38
  type: select
28
- label: Size
29
- description: Sets the size of all of the cards. See the `Card` component for more details on the different sizes.
39
+ label: Theme
40
+ description: Sets all of the cards to appear as either light or dark. Used by all card groups except for `Multilink Card`, `Data Card` and `Stat Card`.
30
41
  required: false
42
+ preview: "dark"
43
+ options:
44
+ dark: Dark
45
+ light: Light
46
+ type:
47
+ type: select
48
+ label: Type
49
+ description: Sets the type of cards to render in the Card Group
50
+ preview: "feature"
31
51
  options:
32
- standard: standard
33
- narrow: narrow
34
- wide: wide
35
- fluid: fluid
52
+ feature: Feature
53
+ text: Text
54
+ detail: Detail
55
+ promo: Promo
56
+ multilink: Multilink
57
+ data: Data
58
+ stat: Stat
59
+ factlist: Factlist
36
60
  fields:
37
61
  group:
38
62
  type: object
package/src/patterns/components/hero/hero.twig CHANGED
@@ -1,52 +1,52 @@
1
1
  {#
2
2
  Hero COMPONENT
3
3
  #}
4
- <div class="hero hero__card-justify__{{ justify }} hero__poster-size__{{ postersize }} hero__card-size__{{ cardsize }} hero__card-align__{{ align }}">
5
- <figure class="hero--figure">
6
- {% block hero_image %}
7
- {% if image %}
8
- <picture>
9
- {% for img in image.url|reverse %}
10
- {% if loop.last == false %}
11
- <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
12
- {% endif %}
13
- {% endfor %}
14
- <img class="{{prefix}}--card--image" src="{{image.url|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}"{% endif %}>
15
- </picture>
16
- {% endif %}
17
- {% endblock %}
18
- </figure>
19
- {% if breadcrumb %}
20
- <div class="hero--breadcrumbs">
21
- <div class="hero--breadcrumbs--wrapper">
22
- {% include "@components/breadcrumb/breadcrumb.twig" with {
23
- home: breadcrumb.home,
24
- links: breadcrumb.links,
25
- prefix: prefix,
26
- } only %}
27
- </div>
28
- </div>
29
- {% endif %}
30
- <div class="hero--card">
31
- {% include "@components/herocard/herocard.twig" with {
32
- url: herocard.url,
33
- eyebrow: herocard.eyebrow,
34
- cornercut: herocard.cornercut,
35
- datecopy: herocard.datecopy,
36
- intro: herocard.intro,
37
- prefix: prefix,
38
- socialmedia: herocard.socialmedia,
39
- theme: herocard.theme,
40
- background: herocard.background,
41
- title: herocard.title,
42
- } only %}
43
- </div>
44
- <div class="hero--caption">
45
- {% if not caption %}
46
- {% else %}
47
- <div class="hero--caption--wrapper">
48
- {% include '@components/tooltip/tooltip.twig' with caption %}
49
- </div>
4
+ <div class="hero hero__card-justify__{{ justify }} hero__poster-size__{{ postersize }} hero__card-size__{{ cardsize }} hero__card-align__{{ align }}">
5
+ <figure class="hero--figure">
6
+ {% block hero_image %}
7
+ {% if image %}
8
+ <picture>
9
+ {% for img in image.url|reverse %}
10
+ {% if loop.last == false %}
11
+ <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
12
+ {% endif %}
13
+ {% endfor %}
14
+ <img class="{{prefix}}--card--image" src="{{image.url|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}"{% endif %}>
15
+ </picture>
50
16
  {% endif %}
17
+ {% endblock %}
18
+ </figure>
19
+ {% if breadcrumb %}
20
+ <div class="hero--breadcrumbs">
21
+ <div class="hero--breadcrumbs--wrapper">
22
+ {% include "@components/breadcrumb/breadcrumb.twig" with {
23
+ home: breadcrumb.home,
24
+ links: breadcrumb.links,
25
+ prefix: prefix,
26
+ } only %}
27
+ </div>
51
28
  </div>
29
+ {% endif %}
30
+ <div class="hero--card">
31
+ {% include "@components/herocard/herocard.twig" with {
32
+ url: herocard.url,
33
+ eyebrow: herocard.eyebrow,
34
+ cornercut: herocard.cornercut,
35
+ datecopy: herocard.datecopy,
36
+ intro: herocard.intro,
37
+ prefix: prefix,
38
+ socialmedia: herocard.socialmedia,
39
+ theme: herocard.theme,
40
+ background: herocard.background,
41
+ title: herocard.title,
42
+ } only %}
43
+ </div>
44
+ <div class="hero--caption">
45
+ {% if not caption %}
46
+ {% else %}
47
+ <div class="hero--caption--wrapper">
48
+ {% include '@components/tooltip/tooltip.twig' with caption %}
49
+ </div>
50
+ {% endif %}
52
51
  </div>
52
+ </div>