feat: components

scss/components/_card.scss

@@ -15,6 +15,7 @@
   line-height: var(--#{$prefix}card-line-height);
   border-radius: var(--#{$prefix}card-radius);
   border: var(--#{$prefix}card-border);
+  color: var(--#{$prefix}main-text-color);
 
   .card-image {
     width: 100%;

scss/components/_index.scss

@@ -1,9 +1,10 @@
+@use "./breadcrumb";
+@use "./card";
+@use "./chips";
 @use "./containers";
-@use "./button";
 @use "./modal";
-@use "./chips";
+@use "./list-group";
 @use "./spinner";
-@use "./breadcrumb";
-@use "./card";
 @use "./promo-card";
-@use "./form/index";
+@use "./button/index" as button;
+@use "./form/index" as form;

scss/components/_list-group.scss

@@ -0,0 +1,70 @@
+@use "../variables/global" as *;
+
+.list-group {
+  --#{$prefix}list-group-padding-x: 1rem;
+  --#{$prefix}list-group-padding-y: 0.5rem;
+  --#{$prefix}list-group-color: var(--#{$prefix}main-text-color);
+  --#{$prefix}list-group-bg: transparent;
+  --#{$prefix}list-group-item-gap: 0.5rem;
+  --#{$prefix}list-group-border-radius: var(--#{$prefix}border-radius);
+  --#{$prefix}list-group-border-width: var(--#{$prefix}border-width);
+  --#{$prefix}list-group-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}list-group-border-style: solid;
+  --#{$prefix}list-group-border: var(--#{$prefix}list-group-border-width)
+    var(--#{$prefix}list-group-border-style) var(--#{$prefix}list-group-border-color);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: var(--#{$prefix}list-group-border);
+  border-radius: var(--#{$prefix}border-radius);
+  color: var(--#{$prefix}list-group-color);
+
+  &.list-group-flush {
+    border: none;
+    border-radius: 0;
+  }
+
+  &.list-group-horizontal {
+    border: 0;
+    flex-direction: row;
+
+    .list-group-item {
+      border: var(--#{$prefix}list-group-border);
+      border-radius: 0;
+
+      &:first-child {
+        border-right: 0;
+        border-top-left-radius: var(--#{$prefix}border-radius);
+        border-bottom-left-radius: var(--#{$prefix}border-radius);
+      }
+
+      &:last-child {
+        border-left: 0;
+        border-top-right-radius: var(--#{$prefix}border-radius);
+        border-bottom-right-radius: var(--#{$prefix}border-radius);
+      }
+    }
+  }
+
+  .list-group-item {
+    padding: var(--#{$prefix}list-group-padding-y) var(--#{$prefix}list-group-padding-x);
+    display: flex;
+    align-items: center;
+    gap: var(--#{$prefix}list-group-item-gap);
+
+    &:not(:last-child) {
+      border-bottom: var(--#{$prefix}list-group-border);
+    }
+  }
+
+  &.list-group-border-none {
+    border: none;
+
+    .list-group-item {
+      border: none;
+    }
+  }
+}

scss/components/_modal.scss

@@ -120,12 +120,6 @@
       font-weight: var(--#{$prefix}font-weight-700);
       line-height: 1.5;
     }
-
-    .modal-close {
-      // TODO: Update to icon styles
-      font-size: var(--#{$prefix}font-size-xxl);
-      cursor: pointer;
-    }
   }
 
   .modal-body {

scss/components/_promo-card.scss

@@ -39,6 +39,7 @@
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
+  color: var(--#{$prefix}main-text-color);
   gap: var(--#{$prefix}promo-card-gap);
   padding: var(--#{$prefix}promo-card-padding);
   line-height: var(--#{$prefix}promo-card-line-height);

scss/components/_button.scss → scss/components/button/_button.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../variables/global" as *;
+@use "../../variables/global" as *;
 
 .btn {
   --#{$prefix}btn-weight: 400;
@@ -15,6 +15,7 @@
   --#{$prefix}btn-border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
     var(--#{$prefix}border-color);
   --#{$prefix}btn-border-color: var(--#{$prefix}btn-bg);
+  --#{$prefix}btn-transition: ease-in-out;
 
   display: inline-block;
   padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);

scss/components/button/_close.scss

@@ -0,0 +1,58 @@
+@use "../../variables/global" as *;
+
+.btn-close {
+  --#{$prefix}-btn-close-height: 1rem;
+  --#{$prefix}-btn-close-width: 1rem;
+  --#{$prefix}-btn-close-padding: 0.25rem;
+  --#{$prefix}-btn-close-bg: transparent;
+  --#{$prefix}-btn-close-opacity: 0.8;
+  --#{$prefix}-btn-close-hover-opacity: 1;
+  --#{$prefix}-btn-close-disabled-opacity: 0.5;
+  --#{$prefix}-btn-close-transition: ease-in-out;
+  --#{$prefix}-btn-close-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  width: var(--#{$prefix}-btn-close-width);
+  height: var(--#{$prefix}-btn-close-height);
+  padding: var(--#{$prefix}-btn-close-padding);
+  opacity: var(--#{$prefix}-btn-close-opacity);
+  background-image: var(--#{$prefix}-btn-close-image);
+  background-size: var(--#{$prefix}-btn-close-width) var(--#{$prefix}-btn-close-height);
+  background-color: var(--#{$prefix}-btn-close-bg);
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: opacity ease-in-out 0.15s;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    opacity: var(--#{$prefix}-btn-close-hover-opacity);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--#{$prefix}-btn-close-disabled-opacity);
+  }
+
+  &.btn-close-sm {
+    --#{$prefix}-btn-close-height: 0.75rem;
+    --#{$prefix}-btn-close-width: 0.75rem;
+    --#{$prefix}-btn-close-padding: 0.125rem;
+  }
+
+  &.btn-close-lg {
+    --#{$prefix}-btn-close-height: 1.5rem;
+    --#{$prefix}-btn-close-width: 1.5rem;
+    --#{$prefix}-btn-close-padding: 0.5rem;
+  }
+
+  &.btn-close-black {
+    --#{$prefix}-btn-close-opacity: 0.5;
+    --#{$prefix}-btn-close-hover-opacity: 0.75;
+    --#{$prefix}-btn-close-disabled-opacity: 0.2;
+    --#{$prefix}-btn-close-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
+  }
+}

scss/components/button/_group.scss

@@ -0,0 +1,59 @@
+@use "sass:map";
+@use "../../variables/global" as *;
+
+.btn-group {
+  --#{$prefix}btn-group-radius: var(--#{$prefix}border-radius);
+
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  border-radius: var(--#{$prefix}border-radius);
+  background-color: transparent;
+
+  .btn {
+    position: relative;
+    flex: 1 1 auto;
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: var(--#{$prefix}btn-group-radius);
+      border-bottom-left-radius: var(--#{$prefix}btn-group-radius);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--#{$prefix}btn-group-radius);
+      border-bottom-right-radius: var(--#{$prefix}btn-group-radius);
+    }
+  }
+
+  &.btn-group-vertical {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+
+    .btn {
+      &:first-child {
+        border-radius: 0;
+
+        border-top-left-radius: var(--#{$prefix}btn-group-radius);
+        border-top-right-radius: var(--#{$prefix}btn-group-radius);
+      }
+
+      &:last-child {
+        border-radius: 0;
+        border-bottom-left-radius: var(--#{$prefix}btn-group-radius);
+        border-bottom-right-radius: var(--#{$prefix}btn-group-radius);
+      }
+    }
+  }
+}
+
+@each $size, $styles in $button-sizes {
+  .btn-group-#{"" + $size} {
+    .btn {
+      --#{$prefix}btn-font-size: #{map.get($styles, font-size)};
+      --#{$prefix}btn-padding-x: #{map.get($styles, padding-x)};
+      --#{$prefix}btn-padding-y: #{map.get($styles, padding-y)};
+    }
+  }
+}

scss/components/button/_index.scss

@@ -0,0 +1,3 @@
+@use "./button";
+@use "./group";
+@use "./close";

scss/variables/_global.scss

@@ -100,7 +100,7 @@ $color-variations: (
 $border-vars: (
   width: 1px,
   style: solid,
-  color: map.get($base-colors, black),
+  color: #ededee,
   radius: 0.375rem,
 ) !default;
 
@@ -210,7 +210,7 @@ $button-variations: (
 
 $form-utilities: (
   bg-color: #26776d,
-  border-color: #ededee,
+  border-color: map.get($border-vars, color),
   box-shadow: 0 0 0 0.25rem rgba(#26776d, 0.25),
 );
 

stories/Introduction.mdx

@@ -1,10 +1,12 @@
 import Logo from './assets/logo.png';
 
-<h1 className="text-center">Educata Styles</h1>
+<section class="h-100 d-flex flex-column align-items-center justify-content-center">
+  <h1 className="text-center">Educata Styles</h1>
 
-<img src={Logo} alt="Educata Styles" style={{width: '150px', borderRadius: '12px', margin: '15px auto'}} />
+  <img src={Logo} alt="Educata Styles" style={{width: '150px', borderRadius: '12px', margin: '15px auto'}} />
 
-<p className="text-center">
-  <span>Educata's styling package. The [project code](https://github.com/educata/educata-style) is
-  licensed under the [MIT License](https://github.com/educata/educata-style/blob/main/LICENSE).</span>
-</p>
+  <p className="text-center">
+    <span>Educata's styling package. The [project code](https://github.com/educata/educata-style) is
+    licensed under the [MIT License](https://github.com/educata/educata-style/blob/main/LICENSE).</span>
+  </p>
+</section>

stories/components/button-group/button-group.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as ButtonGroupStories from './button-group.stories.ts';
+
+# Button groups
+
+Group a series of buttons together on a single line or stack them in a vertical column.
+
+## Example
+
+Wrap a series of buttons with `.btn` in `.btn-group`.
+
+<Canvas of={ButtonGroupStories.Example} className='bg-main' />
+
+### Mixed
+
+<Canvas of={ButtonGroupStories.Mixed} className='bg-main' />
+
+### Outlined styles
+
+<Canvas of={ButtonGroupStories.Outlined} className='bg-main' />
+
+<Canvas of={ButtonGroupStories.OutlinedMixed} className='bg-main' />
+
+### Vertical
+
+Add the `.btn-group-vertical` class to stack buttons vertically.
+
+<Canvas of={ButtonGroupStories.Vertical} className='bg-main' />
+
+### Sizes
+
+Add the `.btn-group-sm` or `.btn-group-lg` class to create small or large button groups.
+
+<Canvas of={ButtonGroupStories.Sizes} className='bg-main' />