Issue #3381664: Add stories for the Link component in Varbase Storybook with...

Issue #3381664: Add stories for the Link component in Varbase Storybook with improved Bootstrap ~5.3.0 Link helpers and utility classes

components/atoms/link/README.md

 # Link
+
+Link with Bootstrap Link helpers and utility classes
+
+[Bootstrap ~5.3.0](https://getbootstrap.com/docs/5.3/utilities/link/) has the following link helpers and utility classes
+
+* [Colored links](https://getbootstrap.com/docs/5.3/helpers/colored-links/)
+* [Link opacity](https://getbootstrap.com/docs/5.3/utilities/link/#link-opacity)
+* [Link underlines](https://getbootstrap.com/docs/5.3/utilities/link/#link-underlines)
+* - [Underline color](https://getbootstrap.com/docs/5.3/utilities/link/#underline-color)
+* - [Underline offset](https://getbootstrap.com/docs/5.3/utilities/link/#underline-offset)
+* - [Underline opacity](https://getbootstrap.com/docs/5.3/utilities/link/#underline-opacity)
+* [Hover variants](https://getbootstrap.com/docs/5.3/utilities/link/#hover-variants)
+
+## Properties:
+* `url`: URL Link
+* `color`: Bootstrap includes several predefined button styles, each serving its own
+          semantic purpose, with a few extras thrown in for more control.
+          (primary|secondary|success|danger|warning|info|light|dark|body-emphasis)
+* `opacity`: Change the alpha opacity of the link rgba() color value with utilities.
+            Please be aware that changes to a color’s opacity can lead to links with
+            insufficient contrast.
+            (10|25|50|75|100)
+* `underline_color`: Change the underline’s color independent of the link text color.
+                    (primary|secondary|success|danger|warning|info|light|dark)
+* `underline_offset`: Change the underline’s distance from your text. Offset is set in em
+                     units to automatically scale with the element’s current font-size.
+                     (1|2|3)
+* `underline_opacity`: Change the underline’s opacity. Requires adding .link-underline to
+                      first set an rgba() color we use to then modify the alpha opacity.
+                      (0|10|25|50|75|100)
+* `utility_classes`: An array of utility classes. Use to add extra Bootstrap utility classes
+                    or custom CSS classes over to this component.
+
+## Attributes:
+* `attributes`: Drupal attributes for link.
+
+## Slots:
+* `content`: Link content.
+
+### Examples
+**Example #1:** Secondary link
+```
+  {% include 'varbase_components:link' with {
+    url: 'https://drupal.org',
+    content: 'Link to Drupal site'|t,
+    color: 'secondary',
+  } %}
+```
+
+**Example #2:** A Read more link with to use with Cards components
+```
+  {% include 'varbase_components:link' with {
+    url: '/blog/blog-test1',
+    content: 'Read more'|t,
+    color: 'primary',
+    utility_classes: ['card-link', 'float-end', 'mt-3', 'read-more']
+  } %}
+```

components/atoms/link/link.component.yml

 $schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
 name: Link
 status: experimental
-description: Link
+description: Link with Bootstrap Link helpers and utility classes
 props:
   type: object
+  required:
+    - url
   properties:
+    url:
+      type: string
+      label: URL Link
+      description: URL link.
+    color:
+      type: string
+      title: Color
+      description: Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
+      default: ''
+      enum:
+        - ''
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+        - body-emphasis
+    opacity:
+      type: string
+      label: Opacity
+      description: Change the alpha opacity of the link rgba() color value with utilities. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.
+      default: ''
+      enum:
+        - ''
+        - '10'
+        - '25'
+        - '50'
+        - '75'
+        - '100'
+    underline_color:
+      type: string
+      label: Underline color
+      description: Change the underline’s color independent of the link text color.
+      default: ''
+      enum:
+        - ''
+        - primary
+        - secondary
+        - success
+        - danger
+        - warning
+        - info
+        - light
+        - dark
+    underline_offset:
+      type: string
+      label: Underline offset
+      description: Change the underline’s distance from your text. Offset is set in em units to automatically scale with the element’s current font-size.
+      default: ''
+      enum:
+        - ''
+        - '1'
+        - '2'
+        - '3'
+    underline_opacity:
+      type: string
+      label: Underline opacity
+      description: Change the underline’s opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.
+      default: ''
+      enum:
+        - ''
+        - '0'
+        - '10'
+        - '25'
+        - '50'
+        - '75'
+        - '100'
+    utility_classes:
+      type: array
+      title: Utility Classes
+      default: []
+      description: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to this component.
     attributes:
       type: Drupal\Core\Template\Attribute
+slots:
+  content:
+    type: string
+    label: Content

components/atoms/link/link.stories.json

+{
+  "title": "Varbase Components/Atoms/Link",
+  "description": "Link with Bootstrap Link helpers and utility classes",
+  "argTypes": {
+    "url": {
+      "name": "URL Link",
+      "description": "URL link",
+      "defaultValue": "",
+      "control": "text"
+    },
+    "content": {
+      "name": "Content",
+      "description": "Link Content",
+      "control": "text",
+      "defaultValue": "Button"
+    },
+    "color": {
+      "name": "Link Color",
+      "description": "Bootstrap includes several predefined link colors to colorize links. these classes have a :hover and :focus state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.",
+      "defaultValue": "",
+      "control": "select",
+      "options": {
+        "'- none -'": "",
+        "Primary": "primary",
+        "Secondary": "secondary",
+        "Success": "success",
+        "Danger": "danger",
+        "Warning": "warning",
+        "Info": "info",
+        "Light": "light",
+        "Dark": "dark",
+        "'Body emphasis'": "body-emphasis"
+      }
+    },
+    "opacity": {
+      "name": "Link opacity",
+      "description": "Change the alpha opacity of the link rgba() color value with utilities. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.",
+      "defaultValue": "",
+      "control": "select",
+      "options": {
+        "'- none -'": "",
+        "'Link opacity 10'": "10",
+        "'Link opacity 25'": "25",
+        "'Link opacity 50'": "50",
+        "'Link opacity 75'": "75",
+        "'Link opacity 100'": "100"
+      }
+    },
+    "underline_color": {
+      "name": "Underline color",
+      "description": "Change the underline’s color independent of the link text color.",
+      "defaultValue": "",
+      "control": "select",
+      "options": {
+        "'- none -'": "",
+        "Primary": "primary",
+        "Secondary": "secondary",
+        "Success": "success",
+        "Danger": "danger",
+        "Warning": "warning",
+        "Info": "info",
+        "Light": "light",
+        "Dark": "dark"
+      }
+    },
+    "underline_offset": {
+      "name": "Underline offset",
+      "description": "Change the underline’s distance from your text. Offset is set in em units to automatically scale with the element’s current font-size.",
+      "defaultValue": "",
+      "control": "select",
+      "options": {
+        "'- none -'": "",
+        "'Offset 1'": "1",
+        "'Offset 2'": "2",
+        "'Offset 3'": "3"
+      }
+    },
+    "underline_opacity": {
+      "name": "Underline opacity",
+      "description": "Change the underline’s opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.",
+      "defaultValue": "",
+      "control": "select",
+      "options": {
+        "'- none -'": "",
+        "'Underline opacity 0'": "10",
+        "'Underline opacity 10'": "10",
+        "'Underline opacity 25'": "25",
+        "'Underline opacity 50'": "50",
+        "'Underline opacity 75'": "75",
+        "'Underline opacity 100'": "100"
+      }
+    }
+  },
+  "stories": [
+    {
+      "name": "Link",
+      "args": {
+        "url": "#",
+        "content": "Link Text",
+        "color": "",
+        "opacity": "",
+        "underline_color": "",
+        "underline_offset": "",
+        "underline_opacity": "",
+        "utility_classes": {}
+      }
+    }
+  ]
+}

components/atoms/link/link.twig

 {#
 /**
  * @file
- * Template for a Link component.
+ * Template for the Link with Bootstrap Link helpers and utility classes
  *
- * Available config:
+ * Available properties:
+ * - url: URL Link
+ * - color: Bootstrap includes several predefined button styles, each serving its own
+ *          semantic purpose, with a few extras thrown in for more control.
+ *          (primary|secondary|success|danger|warning|info|light|dark|body-emphasis)
+ * - opacity: Change the alpha opacity of the link rgba() color value with utilities.
+ *            Please be aware that changes to a color’s opacity can lead to links with
+ *            insufficient contrast.
+ *            (10|25|50|75|100)
+ * - underline_color: Change the underline’s color independent of the link text color.
+ *                    (primary|secondary|success|danger|warning|info|light|dark)
+ * - underline_offset: Change the underline’s distance from your text. Offset is set in em
+ *                     units to automatically scale with the element’s current font-size.
+ *                     (1|2|3)
+ * - underline_opacity: Change the underline’s opacity. Requires adding .link-underline to
+ *                      first set an rgba() color we use to then modify the alpha opacity.
+ *                      (0|10|25|50|75|100)
+ * - utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes
+ *                    or custom CSS classes over to this component.
+ *
+ * Available attributes:
  * - attributes: Drupal attributes for link.
- * - url: Link href value.
- * - title: Link title.
- * - options["attributes"]["class"]: list of additional classes.
- * - utility_classes: An array of aditional classes for link.
+ *
+ * Available slots:
+ * - content: Link content.
  */
 #}
 
+{% set link_color = color ? ['link-' ~ color] : [] %}
+{% set link_opacity = opacity ? ['link-opacity-' ~ opacity] : [] %}
+{% set underline_offset = underline_offset ? ['link-offset-' ~ underline_offset] : [] %}
+{% set underline_opacity = underline_opacity ? ['link-underline', 'link-underline-opacity-' ~ underline_opacity] : [] %}
+{% set underline_color = underline_color ? ['link-underline-' ~ underline_color] : [] %}
 {% set utility_classes = utility_classes ? utility_classes : [] %}
 
-{% set link_classes = []|merge(utility_classes)|merge(options["attributes"]["class"] ?? []) %}
+{% set link_classes = []|merge(link_color)|merge(link_opacity)|merge(underline_offset)|merge(underline_opacity)|merge(underline_color)|merge(utility_classes) %}
+
+{% if url %}
+  {% set attributes = attributes.setAttribute('href', url) %}
+{% endif %}
 
-<a href="{{ url }}" {{ attributes.addClass(link_classes) }}>{{ title }}</a>
+<a{{ attributes.addClass(link_classes) }}>{% apply spaceless %}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+{% endapply %}</a>