@ilo-org/twig 0.9.5 → 0.10.0

package/.turbo/turbo-build:lib.log

@@ -1,9 +1,9 @@
 
-> @ilo-org/twig@0.9.5 build:lib /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.10.0 build:lib /home/runner/work/designsystem/designsystem/packages/twig
 > node importprefix.js && node importsvgs.js && pnpm output
 
 theme prefix added
 
-> @ilo-org/twig@0.9.5 output /home/runner/work/designsystem/designsystem/packages/twig
+> @ilo-org/twig@0.10.0 output /home/runner/work/designsystem/designsystem/packages/twig
 > node outputtwigs.js
 

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @ilo-org/twig
 
+## 0.10.0
+
+### Minor Changes
+
+- 5a4a7255a: This includes an initial refactor of the Form component and exposes several sub-components so they can be used directly by the developer without the Form component if they need to. So far, the Checkbox, Date Picker, Dropdown, Search and Text Input are exposed. Legacy form components have been removed from the documentation and should not be used, they will be refactored and exposed properly in the next version.
+
+### Patch Changes
+
+- Updated dependencies [5a4a7255a]
+- Updated dependencies [5a4a7255a]
+- Updated dependencies [5a4a7255a]
+  - @ilo-org/themes@0.3.0
+  - @ilo-org/styles@0.9.1
+
 ## 0.9.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.9.5",
+  "version": "0.10.0",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -25,8 +25,8 @@
     "@ilo-org/brand-assets": "0.1.0",
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/styles": "0.9.0",
-    "@ilo-org/themes": "0.2.0",
+    "@ilo-org/styles": "0.9.1",
+    "@ilo-org/themes": "0.3.0",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {

package/src/patterns/components/accordion/accordion.wingsuit.yml

@@ -1,4 +1,5 @@
 accordion:
+  namespace: Components/Content
   use: "@components/accordion/accordion.twig"
   label: Accordion
   description:

package/src/patterns/components/breadcrumb/breadcrumb.wingsuit.yml

@@ -1,4 +1,5 @@
 breadcrumb:
+  namespace: Components/Navigation
   use: "@components/breadcrumb/breadcrumb.twig"
   label: Breadcrumb
   description: A component for displaying links in a "breadcrumb" ux

package/src/patterns/components/button/button.wingsuit.yml

@@ -1,4 +1,5 @@
 button:
+  namespace: Components/User Interface
   use: "@components/button/button.twig"
   label: Button
   description: A button or a link styled like a button.

package/src/patterns/components/callout/callout.wingsuit.yml

@@ -1,4 +1,5 @@
 callout:
+  namespace: Components/Feedback
   use: "@components/callout/callout.twig"
   label: Callout
   description: A callout alert section with a few different types

package/src/patterns/components/card/card.wingsuit.yml

@@ -1,4 +1,5 @@
 card:
+  namespace: Components/Cards
   use: "@components/card/card.twig"
   label: Card
   description: Cards display prominent content of a page. This component is a wrapper around all of the card types in the design system except for the Hero Card. To use it, pass a `type` setting to the card and then pass the appropriate fields for that card type. For more information about the settings you can pass to each card type, see the documentation for that card.
@@ -32,12 +33,12 @@ card:
         links:
           headline: Also available in
           items:
-          - label: English
-            url: "https://www.ilo.org/search?q=link"
-          - label: Español
-            url: "https://www.ilo.org/search?q=hyperlink"
-          - label: Français
-            url: "https://www.ilo.org/search?q=url"
+            - label: English
+              url: "https://www.ilo.org/search?q=link"
+            - label: Español
+              url: "https://www.ilo.org/search?q=hyperlink"
+            - label: Français
+              url: "https://www.ilo.org/search?q=url"
     date:
       type: object
       label: Date
@@ -88,12 +89,12 @@ card:
       preview:
         linkgroup:
           - links:
-            - label: Read the press release
-              url: "https://www.ilo.org"
-            - label: See the statement
-              url: "https://www.ilo.org"
-            - label: Remarks to G7 Openening Session
-              url: "https://www.ilo.org"
+              - label: Read the press release
+                url: "https://www.ilo.org"
+              - label: See the statement
+                url: "https://www.ilo.org"
+              - label: Remarks to G7 Openening Session
+                url: "https://www.ilo.org"
     list:
       type: object
       label: List
@@ -224,4 +225,4 @@ card:
     stat:
       label: Stat Card
       settings:
-        type: stat
+        type: stat

package/src/patterns/components/card_data/card_data.wingsuit.yml

@@ -1,4 +1,5 @@
 datacard:
+  namespace: Components/Cards
   use: "@components/card_data/card_data.twig"
   label: Data Card
   description: A data card component for organising data about things like publications or events.
@@ -64,8 +65,8 @@ datacard:
         alt: "Image alt text"
         loading: "lazy"
         url:
-        - breakpoint: "(min-width: 0px)"
-          src: "/images/publication.jpg"
+          - breakpoint: "(min-width: 0px)"
+            src: "/images/publication.jpg"
   settings:
     size:
       type: select
@@ -125,8 +126,3 @@ datacard:
               - label: EPUB 5.8 MB
                 url: "https://www.ilo.org"
           links: false
-
-
-
-
-

package/src/patterns/components/card_detail/card_detail.wingsuit.yml

@@ -1,4 +1,5 @@
 detailcard:
+  namespace: Components/Cards
   use: "@components/card_detail/card_detail.twig"
   label: Detail Card
   description: A detail card component for displaying links to content. It can have an image, title, link, intro text and date.
@@ -68,6 +69,3 @@ detailcard:
       options:
         true: True
         false: False
-
-
-

package/src/patterns/components/card_factlist/card_factlist.wingsuit.yml

@@ -1,4 +1,5 @@
 factlistcard:
+  namespace: Components/Cards
   use: "@components/card_factlist/card_factlist.twig"
   label: Fact List Card
   description: A Fact List Card is a card that displays a list of facts or statistics.
@@ -43,7 +44,3 @@ factlistcard:
       options:
         dark: Dark
         light: Light
-
-
-
-

package/src/patterns/components/card_feature/card_feature.wingsuit.yml

@@ -1,4 +1,5 @@
 featurecard:
+  namespace: Components/Cards
   use: "@components/card_feature/card_feature.twig"
   label: Feature Card
   description: A feature card component for displaying links to content. It can have an image, title, link, date and call to action.
@@ -77,6 +78,3 @@ featurecard:
       options:
         dark: Dark
         light: Light
-
-
-

package/src/patterns/components/card_multilink/card_multilink.wingsuit.yml

@@ -1,4 +1,5 @@
 multilinkcard:
+  namespace: Components/Cards
   use: "@components/card_multilink/card_multilink.twig"
   label: Multilink Card
   description: A multilink card component for displaying links to content. It can have an image, title, intro text and a list of links displayed at the bottom or on the side of the card.
@@ -44,12 +45,12 @@ multilinkcard:
       preview:
         linkgroup:
           - links:
-            - label: Read the press release
-              url: "https://www.ilo.org"
-            - label: See the statement
-              url: "https://www.ilo.org"
-            - label: Remarks to G7 Openening Session
-              url: "https://www.ilo.org"
+              - label: Read the press release
+                url: "https://www.ilo.org"
+              - label: See the statement
+                url: "https://www.ilo.org"
+              - label: Remarks to G7 Openening Session
+                url: "https://www.ilo.org"
     title:
       type: string
       label: Title
@@ -83,6 +84,3 @@ multilinkcard:
         narrow: narrow
         wide: wide
         fluid: fluid
-
-
-

package/src/patterns/components/card_promo/card_promo.wingsuit.yml

@@ -1,4 +1,5 @@
 promocard:
+  namespace: Components/Cards
   use: "@components/card_promo/card_promo.twig"
   label: Promo Card
   description: A promo card component for displaying links to content. It can have a title, link, intro and additional call to action.
@@ -68,6 +69,3 @@ promocard:
       options:
         dark: Dark
         light: Light
-
-
-

package/src/patterns/components/card_stat/card_stat.wingsuit.yml

@@ -1,4 +1,5 @@
 statcard:
+  namespace: Components/Cards
   use: "@components/card_stat/card_stat.twig"
   label: Stat Card
   description: A stat card highlights a prominent fact or statistic with a link to where the information comes from. It can appear in a range of different colors.
@@ -41,8 +42,3 @@ statcard:
         yellow: yellow
         blue: blue
       preview: "blue"
-
-
-
-
-

package/src/patterns/components/card_text/card_text.wingsuit.yml

@@ -1,4 +1,5 @@
 textcard:
+  namespace: Components/Cards
   use: "@components/card_text/card_text.twig"
   label: Text Card
   description: A text card component for displaying links to content. It can have a title, link, date and profile to highlight the author of the content.
@@ -26,9 +27,9 @@ textcard:
       label: Profile
       description: Optional profile of the author who created the content
       preview:
-         avatar: "/images/ilo-dg.jpg"
-         name: "Gilbert F. Houngbo"
-         role: "ILO Director-General"
+        avatar: "/images/ilo-dg.jpg"
+        name: "Gilbert F. Houngbo"
+        role: "ILO Director-General"
     title:
       type: string
       label: Title
@@ -54,6 +55,3 @@ textcard:
       options:
         dark: Dark
         light: Light
-
-
-

package/src/patterns/components/cardgroup/cardgroup.wingsuit.yml

@@ -1,4 +1,5 @@
 cardgroup:
+  namespace: Components/Cards
   use: "@components/cardgroup/cardgroup.twig"
   label: Card Group
   description: A group of cards
@@ -147,7 +148,3 @@ cardgroup:
       preview:
         label: "Discover our unique mission"
         url: "https://www.ilo.org"
-
-
-
-

package/src/patterns/components/{searchfield/searchfield.stories.jsx → checkbox/checkbox.stories.jsx}

@@ -1,7 +1,7 @@
 import "./index";
 
 export default {};
-const patternDefinition = require("./searchfield.wingsuit.yml");
+const patternDefinition = require("./checkbox.wingsuit.yml");
 
 /* eslint-disable-next-line */
 /* eslint-disable-next-line */

package/src/patterns/components/checkbox/checkbox.twig

@@ -0,0 +1,17 @@
+{# checkbox.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set disabled = disabled|default(false) %}
+{% set baseClass = prefix ~ '--checkbox' %}
+{% set errorClass = baseClass ~ '__error' %}
+{% set CheckboxClasses = [baseClass] %}
+
+{% if error %}
+	{% set CheckboxClasses = CheckboxClasses|merge([errorClass]) %}
+{% endif %}
+
+
+{% block formfield %}
+	<input id="{{ id|default(name) }}" name="{{ name }}" {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} type="checkbox" class="{{ CheckboxClasses|join(' ') }}" {% if defaultChecked %} checked {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %} {% if value %} value="{{ value }}" {% endif %}/>
+{% endblock %}

package/src/patterns/components/checkbox/checkbox.wingsuit.yml

@@ -0,0 +1,83 @@
+checkbox:
+  namespace: Components/Forms
+  use: "@components/checkbox/checkbox.twig"
+  label: Checkbox
+  description:
+    The checkbox component provides users with a switch they can use to
+    select more than one option from a list.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: "Do you agree to these terms?"
+    tooltip:
+      type: string
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+    id:
+      type: text
+      label: ID
+      description: The ID of the input.
+    name:
+      type: text
+      label: Name
+      description: The name of the input.
+    class:
+      type: text
+      label: Class
+      description: The class of the form field.
+      preview: checkbox
+      default: ""
+    value:
+      type: text
+      label: Value
+      description: The value of the input.
+      preview: "1"
+  settings:
+    defaultSelected:
+      type: boolean
+      label: Default Selected
+      description: The default selected state of the form element.
+      preview: false
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: "end"
+      options:
+        start: start
+        end: end
+        top: top
+        bottom: bottom
+    labelSize:
+      type: select
+      label: Label Size
+      description: The size of the label for the form element.
+      preview: "small"
+      options:
+        small: small
+        medium: medium
+        large: large
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the form element.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the form element.
+      preview: false
+      default: false
+    error:
+      type: boolean
+      label: Error
+      description: Adds an error state to the form control.
+      preview: false
+      default: false

package/src/patterns/components/checkbox/index.js

@@ -0,0 +1,7 @@
+/**
+ * tag
+ */
+// Module template
+import "./checkbox.twig";
+import "./checkbox.wingsuit.yml";
+import "../tooltip/tooltip.behavior";

package/src/patterns/components/contextmenu/contextmenu.wingsuit.yml

@@ -1,4 +1,5 @@
 contextmenu:
+  namespace: Components/Navigation
   use: "@components/contextmenu/contextmenu.twig"
   label: Context Menu
   description: The ContextMenu receives a list of urls with labels and an optional prop indicating if this link is at the end of a 'section.'

package/src/patterns/components/datepicker/datepicker.stories.jsx

@@ -0,0 +1,9 @@
+import "./index";
+
+export default {};
+const patternDefinition = require("./datepicker.wingsuit.yml");
+
+/* eslint-disable-next-line */
+export const wingsuit = {
+  patternDefinition,
+};

package/src/patterns/components/datepicker/datepicker.twig

@@ -0,0 +1,20 @@
+{# date_picker.html.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+
+{# Default values and input preparation #}
+{% set disabled = disabled|default(false) %}
+{% set inputClass = prefix ~ '--input' %}
+{% set baseClass = prefix ~ '--datepicker' %}
+{% set datePickerClasses = [inputClass, baseClass] %}
+
+{% if error %}
+	{% set datePickerClasses = datePickerClasses|merge(['error']) %}
+{% endif %}
+
+{% block formfield %}
+
+	<input type="date" id="{{ id|default(name) }}" name="{{ name }}" {% if onBlur %} onblur="{{ onBlur }}" {% endif %} {% if disabled %} disabled {% endif %} placeholder="{{ placeholder|default('') }}" {% if required %} required {% endif %} class="{{ datePickerClasses|join(' ') }}" {% if max %} max="{{ max }}" {% endif %} {% if min %} min="{{ min }}" {% endif %} {% if step %} step="{{ step }}" {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %}/>
+
+{% endblock %}

package/src/patterns/components/datepicker/datepicker.wingsuit.yml

@@ -0,0 +1,71 @@
+datepicker:
+  namespace: Components/Forms
+  use: "@components/datepicker/datepicker.twig"
+  label: Date Picker
+  description: The facet component combines the Accordion and the Checkbox components. It's usually used to filter a list of items.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: "Select a date"
+    tooltip:
+      type: string
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+    id:
+      type: text
+      label: ID
+      description: The ID of the input.
+    name:
+      type: text
+      label: Name
+      description: The name of the input.
+    class:
+      type: text
+      label: Class
+      description: The class of the form field.
+      preview: checkbox
+      default: ""
+  settings:
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: "top"
+      options:
+        start: start
+        end: end
+        top: top
+        bottom: bottom
+    labelSize:
+      type: select
+      label: Label Size
+      description: The size of the label for the form element.
+      preview: medium
+      options:
+        small: small
+        medium: medium
+        large: large
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the form element.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the form element.
+      preview: false
+      default: false
+    error:
+      type: boolean
+      label: Error
+      description: Adds an error state to the form control.
+      preview: false
+      default: false

package/src/patterns/components/datepicker/index.js

@@ -0,0 +1,7 @@
+/**
+ * tag
+ */
+// Module template
+import "./datepicker.twig";
+import "./datepicker.wingsuit.yml";
+import "../tooltip/tooltip.behavior";

package/src/patterns/components/dropdown/dropdown.twig

@@ -1,20 +1,20 @@
-{#
-  DROPDOWN COMPONENT
+{# dropdown.twig #}
 
-  Like all form fields, extends the FIELDSET components, and passes it some variables
-#}
-{% extends '@components/fieldset/fieldset.twig' %}
-{% set fsinputid = id ? id : name %}
-{% set fslabel = label %}
-{% set fshelper = helper %}
-{% set fserror = error %}
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set disabled = disabled|default(false) %}
+{% set baseClass = prefix ~ '--dropdown' %}
+{% set dropdownClasses = [baseClass, class] %}
+{% if error %}
+	{% set dropdownClasses = dropdownClasses|merge(['error']) %}
+{% endif %}
 
 {% block formfield %}
-  <div class="{{prefix}}--dropdown--wrapper">
-    <select id="{% if id %}{{id}}{% else %}{{name}}{% endif %}" {% if autocomplete is defined %}autocomplete="{{autocomplete}}"{% endif %} name="dropdown" class="{{prefix}}--dropdown{% if error %} error{% endif %}" {% if disabled is defined and disabled == 'true' %}disabled{% endif %}>
-      {% for option in options %}
-      <option label="{{option.label}}" value="{{option.value}}" {% if defaultValue is defined and defaultValue == option.value %}selected{% endif %} {% if option.disabled is defined and option.disabled == 'true' %}disabled{% endif %}></option>
-      {% endfor %}
-    </select>
-  </div>
+	<div class="{{ baseClass }}--wrapper" {% if style %} style="{{ style }}" {% endif %}>
+		<select id="{{ id|default(name) }}" autocomplete="{{ autocomplete|default('off') }}" name="{{ name }}" {% if required %} required {% endif %} {% if onBlur %} onblur="{{ onBlur }}" {% endif %} {% if disabled %} disabled {% endif %} class="{{ dropdownClasses|join(' ') }}" value="{{ currentvalue|default(value) }}" {% if form %} form="{{ form }}" {% endif %} {% if multiple %} multiple {% endif %} {% if selectSize %} size="{{ selectSize }}" {% endif %} {% if ariaDescribedBy %} aria-describedby="{{ ariaDescribedBy }}" {% endif %}>
+			{% for option in options %}
+				<option {% if option.disabled %} disabled {% endif %} label="{{ option.label }}" value="{{ option.value }}" {% if defaultOption and defaultOption == option.value%}} selected {% endif %}></option>
+			{% endfor %}
+		</select>
+	</div>
 {% endblock %}