@ilo-org/twig 0.2.3 → 0.2.5

package/apps/storybook/preview.js

@@ -7,20 +7,18 @@ const namespaces = require('../../src/namespaces');
 initJsBehaviors('Drupal');
 
 addParameters({
+  viewMode: 'docs',
+  previewTabs: {
+    'storybook/docs/panel': {
+      index: 1,
+      title: 'Documentation',
+    },
+    canvas: { title: 'Canvas', hidden: false },
+  },
   options: {
     storySort: {
       method: 'alphabetical',
-      order: [
-        'Welcome',
-        'Layout',
-        'Tokens',
-        ['Colors', 'Typography', 'Scales'],
-        'Atoms',
-        'Molecules',
-        'Organisms',
-        'Templates',
-        'Pages',
-      ],
+      order: ['Welcome', 'Intro', 'Tokens', ['Colors', 'Typography']],
       locales: 'en-US',
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "main": "",
@@ -21,10 +21,10 @@
   ],
   "dependencies": {
     "@ilo-org/fonts": "0.0.2",
-    "@ilo-org/icons": "0.1.8",
-    "@ilo-org/styles": "0.1.8",
-    "@ilo-org/themes": "0.1.8",
-    "@ilo-org/utils": "0.0.4",
+    "@ilo-org/icons": "0.1.10",
+    "@ilo-org/styles": "0.1.10",
+    "@ilo-org/themes": "0.1.10",
+    "@ilo-org/utils": "0.0.6",
     "@wingsuit-designsystem/preset-scss": "^1.2.3",
     "video.js": "^7.19.2"
   },
@@ -103,5 +103,5 @@
     "output": "node outputtwigs.js",
     "release": ""
   },
-  "readme": "# ILO Design System - Twig Package\n\nThis package provides the implementation of the Design System using [Twig](https://twig.symfony.com/doc/). It also includes a [Storybook](https://storybook.js.org/) project for documentation and development of Twig components, using [Wingsuit](https://wingsuit-designsystem.github.io/).\n\n#### PNPM\n\nTo start storybook\n\n```bash\npnpm storybook\n```\n\nTo build storybook\n\n```bash\npnpm build:storybook\n```\n\nTo build Twigs to be used in a CMS like Drupal (this will output Twigs and necessary JavaScript to a `/dist` folder.)\n\n```bash\npnpm output\n```\n"
+  "readme": "# ILO Design System - Twig Package\n\nThis package provides the implementation of the Design System using [Twig](https://twig.symfony.com/doc/). It also includes a [Storybook](https://storybook.js.org/) project for documentation and development of Twig components, using [Wingsuit](https://wingsuit-designsystem.github.io/). Wingsuit uses [Twing](https://www.npmjs.com/package/twing), a Node port of Twig, to compile Twigs to HTML. It has dependencies on the following other @ilo-org packages:\n\n- [@ilo-org/themes](./packages/themes)\n- [@ilo-org/fonts](./packages/fonts)\n- [@ilo-org/styles](./packages/styles)\n- [@ilo-org/utils](./packages/utils)\n- [@ilo-org/icons](./packages/icons)\n\n#### Architecture\n\nBecause this is a modified version of Storybook which compliles and displays Twigs instead of React components, there are some notable differences between this and vanilla versions of Storybook. One prominent difference is in directory structure. Each component folder, located in `src/patterns/components`, contains the following files:\n\n```\ncomponent.stories.jsx\ncomponent.twig\ncomponent.wingsuit.yml\nindex.js\n```\n\nand potentially, if Javascript interactivity exists, also the following:\n\n```\ncomponent.behavior.js\ncomponent.js\n```\n\nWingsuit consumes the `component.wingsuit.yml` file, which is a [UI Pattern YAML](https://wingsuit-designsystem.github.io/components/wingsuit/) borrowed from [Drupal](https://www.drupal.org/project/ui_patterns_settings), and uses this to populate and format the Storybook story for each components. **As such, one is limited in how much one can customize the Storybook experience.**\n\n#### Javascript\n\nIn this package, Javascript is vanilla, with each component that requires Javascript functionality loading an [ES class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) named after the component, scoped and bound to the component's outermost element. Wingsuit is configured to instantiate view classes via a function that looks for a [data attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) that calls the view name provided in that attribute. On page load, the app looks for elements with the data attribute `data-loadcomponent` and loads whatever modules have corresponding names, passing a reference to the `HTMLElement` containing the data attribute. All the JS is bundled by Webpack into one file, meaning the JS file can be cached and only has to be downloaded from the server once per session.\n\nThe JS is well-documented in comments, so poke around and you'll get the gist of how it works.\n\nHere's an example of HTML component markup that will automatically call some Javascript. Given the following HTML:\n\n```\n<section class=\"component componentname\" data-loadcomponent=\"ComponentName\">\n      <!-- component HTML goes here -->\n</section>\n```\n\nJavascript will look in the `ComponentMap` Class for a JS Class called `ComponentName` and then create a new instance of that class and call it. If you've added a new JS Class specific to the module you've built, you'll need to import the JS file to `ComponenetMap` and add it to `ComponenteMap`'s exports. If you've created a new Class, you'll need to make sure to pass the param `element` into the constructor - this is a reference to the DOM element with the `data-loadcomponent` attribute on it. This allows you to scope your JS to each instance of an HTML module.\n\n#### Installation and PNPM Commands\n\nTo install\n\n```bash\nnpm i @ilo-org/twig\n```\n\nTo start storybook\n\n```bash\npnpm storybook\n```\n\nTo build storybook\n\n```bash\npnpm build:storybook\n```\n\nTo build and start storybook\n\n```bash\npnpm build\n```\n\nTo build Twigs to be used in a CMS like Drupal (this will output Twigs and necessary JavaScript to a `/dist` folder.)\n\n```bash\npnpm output\n```\n\nThis package imports the `prefix` from the `themes` package; to manually import it, run\n\n```bash\npnpm import:prefix\n```\n\nThis package imports icon svgs from the `icons` package; to manually import them, run\n\n```bash\npnpm import:svgs\n```\n\n## Questions and Feedback\n\n(TBD)\n\n## Accessibility Standards\n\n(TBD)\n\n## Contributing\n\nILO Design System is an open-source project and we welcome your contributions! Before submitting a pull request, please take a moment to review the following guidelines.\n\n### Branches\n\n| Branch    | Purpose                            |\n| --------- | ---------------------------------- |\n| `main`    | The latest version of all packages |\n| `develop` | The next release of all packages   |\n\n### Contribution workflow\n\n1. Fork and clone the repo\n2. Create a new branch from the `develop` branch\n3. Make your changes and [add a changeset](#versioning) identifying the changes and affected packages\n4. Push your branch to the forked version of the repo\n5. Open a pull request back to the `develop` branch of the main repo\n\n### Versioning\n\nThe project uses [changesets](https://github.com/changesets/changesets) to manage package versioning. All pull requests that will affect the project's semantic versioning must include a changest.\n\nSee more information on [how to add a changeset](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)\n\n### Conventions\n\nContributions should respect the following conventions for branch names, commit messages and pull request descriptions\n\n#### Commits\n\nCommits should follow [Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#commit).\n\n```\n<type>(<scope>): <subject>\n```\n\nExamples:\n\n```\nfix(react): change button color on hover\nfeat(twig): add button component\nci(github): add release workflow\nperf(react): improve modal animations\n```\n\n#### Types\n\n- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)\n- ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)\n- docs: Documentation only changes\n- feat: A new feature\n- fix: A bug fix\n- perf: A code change that improves performance\n- refactor: A code change that neither fixes a bug nor adds a feature\n- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)\n- test: Adding missing tests or correcting existing tests\n\n#### Scopes\n\nThis should be a package name or an aspect of the project's configuration.\n\n### Branches\n\nBranch names should broadly mirror the same convention as commits.\n\nExamples:\n\n```\nfeat/react/modal-wrapper\nfix/twig/modal-wrapper\n```\n\n### Pull requests\n\nPull requests should include a descriptive name and detailed explanation of what merging the pull request will accomplish. Authors should make sure to reference Github issues that the the pull request will fix or affect.\n\n## Building the project\n\nUse [nvm](https://github.com/nvm-sh/nvm) to make sure you have the correct version of node installed.\n\n```bash\nnvm use\n```\n\nInstall [pnpm](https://pnpm.io/).\n\n```bash\nnpm i -g pnpm\n```\n\nInstall dependencies\n\n```bash\npnpm recursive install\n```\n\nBuild all packages.\n\n```bash\npnpm build:all\n```\n\nStart React storybook\n\n```bash\npnpm start:react-storybook\n```\n\nStart Twig storybook\n\n```bash\npnpm start:twig-storybook\n```\n\nCheck types\n\n```bash\npnpm check:types\n```\n\nRun all tests\n\n```bash\npnpm test:all\n```\n"
 }

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

@@ -5,21 +5,6 @@ accordion:
     related content on a page. Click the accordions below to
     expand/collapse the accordion content.
   fields:
-    size:
-      type: select
-      label: Size
-      description: The size of the accordion.
-      required: false
-      options:
-        small: Small
-        large: Large
-      preview: small
-    allowMultipleExpanded:
-      type: string
-      label: Allow Multiple Expanded
-      description: Allow mutiple accordion items to be expandable at once.
-      preview: 'true'
-      required: false
     items:
       type: object
       label: Items
@@ -34,26 +19,23 @@ accordion:
           content: "<p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p>"
           id: item2
           defaultExpanded: false
-  variants:
-    default:
-      label: Default
-      description: the default settings for the Accordion
-    expanded:
-      label: Expanded
-      description: The Accordion with panels opened on page load
-      fields:
-        items:
-          - label: label 1
-            content: "<p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p><p>Content of Item 1</p>"
-            id: item1
-            defaultExpanded: 'true'
-          - label: label 2
-            content: "<p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p><p>Content of Item 2</p>"
-            id: item2
-            defaultExpanded: 'true'
-    multiple:
+  settings:
+    size:
+      type: select
+      label: Size
+      description: The size of the accordion.
+      required: false
+      options:
+        small: Small
+        large: Large
+      preview: small
+    allowMultipleExpanded:
+      type: select
       label: Allow Multiple Expanded
-      description: The Accordion set to allow multiple panels to be expanded at once
-      fields:
-        allowMultipleExpanded: 'true'
+      description: Allow mutiple accordion items to be expandable at once.
+      options:
+        true: True
+        false: False
+      preview: 'true'
+      required: false
   visibility: storybook

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

@@ -3,6 +3,37 @@ button:
   label: Button
   description: A button or a link styled like a button.
   fields:
+    label:
+      type: string
+      label: Label
+      description: The label for the button
+      preview: 'Button'
+      required: true
+    url:
+      type: string
+      label: url
+      description: The url for the button if it's a link
+      preview: ''
+      required: false
+    target:
+      type: string
+      label: target
+      description: Should the button open in a new tab? If so, include the name of the tab. Only evaluated if the url field is populated.
+      preview: 'true'
+      required: false
+    icon:
+      type: string
+      label: Icon
+      description: optional icon to include in button
+      preview: false
+      required: false
+    className:
+      type: string
+      label: Class name
+      description: optional class name
+      preview: 'optionalclass'
+      required: false
+  settings:
     size:
       type: select
       label: Size
@@ -34,24 +65,6 @@ button:
         true: 'true'
         false: false
       preview: 'false'
-    label:
-      type: string
-      label: Label
-      description: The label for the button
-      preview: 'Button'
-      required: true
-    url:
-      type: string
-      label: url
-      description: The url for the button if it's a link
-      preview: ''
-      required: false
-    target:
-      type: string
-      label: target
-      description: Should the button open in a new tab? If so, include the name of the tab. Only evaluated if the url field is populated.
-      preview: 'true'
-      required: false
     kind:
       type: select
       label: Kind
@@ -62,17 +75,11 @@ button:
         reset: reset
         submit: submit
       preview: 'button'
-    icon:
-      type: string
-      label: Icon
-      description: optional icon to include in button
-      preview: false
-      required: false
     iconPosition:
       type: select
       label: Icon Position
       description: if there's an icon, where is it in the button?
-      fields:
+      options:
         left: left
         right: right
       preview: left
@@ -81,22 +88,16 @@ button:
       type: select
       label: Icon Only
       description: Is this an icon-only button?
-      fields:
+      options:
         true: 'true'
         false: false
       preview: false
       required: false
-    className:
-      type: string
-      label: Class name
-      description: optional class name
-      preview: 'optionalclass'
-      required: false
     opensmodal:
       type: select
       label: Opens Modal
       description: Does this button trigger open a modal?
-      fields:
+      options:
         true: 'true'
         false: false
       preview: false

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

@@ -1,7 +1,7 @@
 callout:
   use: '@components/callout/callout.twig'
   label: Callout
-  description: A callout alert
+  description: A callout alert section with a few different types
   fields:
     buttonLabel:
       type: string
@@ -57,7 +57,7 @@ callout:
     isOpen:
       type: select
       label: Is Open
-      description: Whether or not a collapsible callout is open on page load
+      description: Whether or not a collapsible callout is open on page load. If callout is not collapsible then the callout will be open always.
       required: false
       options:
         true: True

package/src/patterns/components/card/card.twig

@@ -1,7 +1,7 @@
 {#
   CARD COMPONENT
 #}
-<div class="{{prefix}}--card {{prefix}}--card--{{theme}} {{prefix}}--card--{{variant}}{% if cornercut %} {{prefix}}--card--{{cornercut}}{% endif %}{% if color %} {{prefix}}--card--{{color}}{% endif %}{% if alignment %} {{prefix}}--card--{{alignment}}{% endif %}{% if link %} {{prefix}}--card--action{% endif %}{% if type %} {{prefix}}--card--{{type}}{% endif %}{% if size %} {{prefix}}--card--{{size}}{% endif %}">
+<div class="{{prefix}}--card {{prefix}}--card--{{theme}} {{prefix}}--card--{{variant}}{% if cornercut %} {{prefix}}--card--{{cornercut}}{% endif %}{% if color %} {{prefix}}--card--{{color}}{% endif %}{% if alignment %} {{prefix}}--card--{{alignment}}{% endif %}{% if link %} {{prefix}}--card--action{% endif %}{% if type %} {{prefix}}--card--{{type}}{% endif %}{% if size %} {{prefix}}--card--{{size}}{% endif %}{% if isvideo %} {{prefix}}--card--isvideo{% endif %}{% if linklist %} {{prefix}}--card--linklist{% endif %}">
 {% if type == "" %}
   {% set type = variant %}
 {% endif %}
@@ -67,7 +67,7 @@
         {% include "@components/linklist/linklist.twig" with {
           headline: linklist.headline,
           linkgroup: linklist.linkgroup,
-          prefix: prefix,
+          prefix: prefix
         } only %}
       {% endif %}
       {% if dataset %}
@@ -92,7 +92,7 @@
               {% include "@components/link/link.twig" with {
                 url: item.url,
                 label: item.label,
-                prefix: prefix,
+                prefix: prefix
               } %} <span>&nbsp;</span>
             {% endfor %}
           </div>

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

@@ -6,7 +6,7 @@ card:
     title:
       type: string
       label: Title
-      description: Title field
+      description: Title field for the card
       preview: Lorem ipsum
     intro:
       type: string
@@ -16,79 +16,84 @@ card:
     eyebrow:
       type: string
       label: Eyebrow
-      description: Eyebrow copy text
+      description: Eyebrow copy
       preview: "Eyebrow"
     date:
       type: object
       label: Date
-      description: Date copy text
+      description: Date copy (human and Unix)
       preview:
         human: 20 September 2022
         unix: 1670389200
     eventdetails:
       type: string
       label: Eyebrow
-      description: Eyebrow copy text
+      description: Event details for `Detail` card
       preview: ""
     profile:
       type: object
       label: Profile
-      description: Profile to embed in the card
+      description: Profile to embed in the card for `Graphic Text`
       preview:
     list:
       type: object
       label: List
-      description: List to embed in the card
+      description: List to embed in the card, specifically used for `Factlist`
       preview:
     link:
       type: string
       label: Link
-      description: Link for clickable cards
+      description: Link for clickable cards. Do no use on `Multilink`, `Factlist`, `Data`, or `Stat` cards.
       preview: "https://www.google.com/"
     cta:
       type: object
       label: CTA
-      description: Items for clickable CTA button
+      description: Items for clickable CTA button. Button used for `Graphic Promo` card.
       preview:
     image:
       type: string
       label: Image
-      description: The image for the card
-      preview: "https://placekitten.com/600/300"
+      description: The image for the card. Images should be avoided on `Graphic Promo`, `Graphic Text`, `Factlist`, and `Stat` card.
+      preview: ""
     source:
       type: object
       label: Source
-      description: Source link for stat cards
+      description: Source link for `Stat` cards
       preview:
     linklist:
       type: object
       label: Link List
-      description: Multi-link list
+      description: Implementation of the LinkList component. Appears at the bottom of `Multilink` or `Feature` card.
       preview:
     dataset:
       type: object
-      label: Data set
-      description: This is a series of items, headline and copy, to include on the card
+      label: Dataset object
+      description: Dataset object for the `Data` card. Array of Content (label, copy), Files object (optional headline, array of items with label and url) and Links object (optional headline, array of items with label and url)
       preview:
+  settings:
     color:
-      type: string
+      type: select
       label: Color
-      description: Color of the stat cards, options are turquoise, green, yellow, or blue
+      description: Color of the stat cards, options are `turquoise`, `green`, `yellow`, or `blue`. Only use for stat cards.
+      options:
+        turquoise: turquoise
+        green: green
+        yellow: yellow
+        blue: blue
       preview: 'blue'
-  settings:
     theme:
       type: select
       label: Theme
-      description: The theme type for the hero
+      description: The theme type for the card. Theme choice doesn't apply to these card types - `Multilink`, `Data`, `Stat` and `Detail`
       required: false
-      preview: 'dark'
+      preview: 'light'
       options:
         dark: Dark
         light: Light
     size:
       type: select
       label: Size
-      description: Size of the cards (usually reduces padding)
+      description: Size of the cards (usually reduces padding). `Wide` on Multilink and Feature cause a two column structure above a desktop breakpoint.
       preview: 'standard'
       options:
         wide: Wide
@@ -97,7 +102,7 @@ card:
     cornercut:
       type: select
       label: Corner cut
-      description: Setting for whether the card has a cut corner
+      description: Setting for whether the card has a cut corner. The only cards that use this setting are `Graphic Promo` and `Factlist`.
       preview: cornercut
       options:
         cornercut: Corner cut
@@ -105,15 +110,20 @@ card:
     alignment:
       type: select
       label: Alignment
-      description: Set whether card (multilink) image is right aligned or left aligned
+      description: Set whether card image is right aligned or left aligned for `Multilink` cards.
       preview: left
       options:
         left: Left
         right: right
+    isvideo:
+      type: select
+      label: Is a Video
+      description: Whether the card should display a video icon (for Feature card)
+      preview: false
+      options:
+        true: True
+        false: False
   variants:
-    default:
-      label: Default
-      description: the default settings for the Card
     graphic:
       label: Graphic Text Card
       description: The graphic Card
@@ -123,6 +133,7 @@ card:
         date:
           human: 20 September 2022
           unix: 1670389200
+        image: ""
         link: "https://www.google.com/search?q=graphic"
         profile:
           avatar: "https://placekitten.com/128/128"
@@ -183,6 +194,13 @@ card:
           unix: 1670389200
         link: "https://www.google.com/search?q=graphic"
         image: "https://placekitten.com/412/232"
+        linklist:
+          headline: ""
+          linkgroup:
+            - headline: ""
+              links:
+                - label: Link One
+                  url: 'http://www.google.com'
     detail:
       label: Detail Card
       description: The Detail Card
@@ -194,7 +212,6 @@ card:
           human: 00 month 0000
           unix: 1670389200
         link: "https://www.google.com/search?q=detail"
-        # image: "https://placekitten.com/296/196"
         image: "https://www.ilo.org/wcmsp5/groups/public/---dgreports/---dcomm/documents/image/wcms_856513.jpg"
         profile:
         eventdetails: "8 - 9 February 2022, 8:30 - 12:00 CET  |  Egypt"
@@ -203,6 +220,7 @@ card:
       description: The Fact List Card
       fields:
         title: "Title of fast fact list"
+        image: ""
         list:
           settings:
             - ordered: unordered

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

@@ -104,7 +104,6 @@ cardgroup:
             eventdetails: ""
             cta: ""
             source: ""
-            linklist: ""
             list: ""
             dataset: ""
             color: ""
@@ -120,7 +119,6 @@ cardgroup:
             eventdetails: ""
             cta: ""
             source: ""
-            linklist: ""
             list: ""
             dataset: ""
             color: ""
@@ -136,7 +134,6 @@ cardgroup:
             eventdetails: ""
             cta: ""
             source: ""
-            linklist: ""
             list: ""
             dataset: ""
             color: ""
@@ -152,7 +149,6 @@ cardgroup:
             eventdetails: ""
             cta: ""
             source: ""
-            linklist: ""
             list: ""
             dataset: ""
             color: ""

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

@@ -4,29 +4,17 @@ dropdown:
   description: The Dropdown displays a select element with options, and is most
     commonly used in forms.
   fields:
-    autocomplete:
-      type: string
-      label: autocomplete
-      description: Should this field autocomplete
-      preview: false
-      required: false
     defaultValue:
       type: string
       label: defaultValue
       description: The default value of the select
       preview: "option one"
       required: true
-    disabled:
-      type: boolean
-      label: disabled
-      description: Is this field disabled?
-      preview: false
-      required: false
     error:
       type: string
       label: error
       description: Does this have an error? If so, the error message
-      preview: false
+      preview: ''
       required: false
     helper:
       type: string
@@ -68,4 +56,23 @@ dropdown:
           value: "four"
         - label: "Option Five"
           value: "the fifth"
+  settings:
+    autocomplete:
+      type: select
+      label: autocomplete
+      description: Should this field autocomplete
+      options:
+        true: 'true'
+        false: false
+      preview: false
+      required: false
+    disabled:
+      type: select
+      label: disabled
+      description: Is this field disabled?
+      options:
+        true: 'true'
+        false: false
+      preview: false
+      required: false
   visibility: storybook

package/src/patterns/components/hero/hero.twig

@@ -2,7 +2,13 @@
   HERO COMPONENT
 #}
 <div class="{{prefix}}--hero {{prefix}}--hero--{{theme}} {{prefix}}--hero--{{types}} {% if image %}{{prefix}}--hero--image{% endif %}">
-
+  {% if breadcrumb is defined %}
+    {% include "@components/breadcrumb/breadcrumb.twig" with {
+      home: breadcrumb.home,
+      links: breadcrumb.links,
+      prefix: prefix,
+    } only %}
+  {% endif %}
   {% if not image %}
   {% else %}
     {% include "@components/image/image.twig" with {

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

@@ -3,7 +3,26 @@ hero:
   label: Hero
   description: The Hero presents an image banner.
   fields:
+    breadcrumb:
+      label: Implementation of Breadcrumb component. See Breadcrumb for more details
+      type: object
+      preview:
+        home:
+          label: "Home"
+          url: "/"
+        links:
+          - label: "Link One"
+            url: "/linkone"
+          - label: "Link Two"
+            url: "/linktwo"
+          - label: "Link Three"
+            url: "/linkthree"
+          - label: "Link Four"
+            url: "/linkfour"
+          - label: "Link Five"
+            url: "/linkfive"
     image:
+      label: Implementation of Image component. See Image for more details
       type: object
       preview:
         alt: Lorem ipsum
@@ -15,7 +34,7 @@ hero:
           - breakpoint: 768
             src: "https://placekitten.com/1920/800"
     herocard:
-      label: herocard
+      label: Part of the hero that displays text on top of image (or if no image on a background color). There are light and dark versions and all text parts are optional.
       type: object
       preview: 
         alignment: left
@@ -32,7 +51,7 @@ hero:
         title: "This is an left aligned article headline that is more than two lines long"
   variants:
     default:
-      lable: Default
+      label: Default
     article:
       label: Article
       description: article settings

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

@@ -1,14 +1,9 @@
 herocard:
   use: '@components/herocard/herocard.twig'
   label: Hero Card
-  description: The Hero card
+  description: The Hero card, a subcomponent of the hero
   id: herocard
   fields:
-    alignment:
-      type: string
-      label: Alignment
-      description: alignment for card
-      preview: "center"
     datecopy:
       type: string
       label: Date copy
@@ -16,9 +11,9 @@ herocard:
       preview: "11 February 2021"
     eyebrow:
       type: string
-      label: Date copy
-      description: Date byline copy
-      preview: "11 February 2021"
+      label: Eyebrow
+      description: Copy for the eyebrow of the card
+      preview: "Eyebrow"
     intro:
       type: string
       label: Intro
@@ -40,4 +35,14 @@ herocard:
       label: Title
       description: This is the title for the hero card
       preview: "This is an centered aligned article headline that is more than two lines long"
+  settings:
+    alignment:
+      type: select
+      label: Alignment
+      description: alignment for card
+      options:
+        left: 'left'
+        center: 'center'
+        right: 'right'
+      preview: "center"
   visibility: storybook