@ndwnu/design-system 7.0.0 → 7.1.0

package/lib/components/collapsible/collapsible.component.d.ts

@@ -8,7 +8,7 @@ export declare class CollapsibleComponent {
     private readonly uuid;
     readonly toggleUuid: string;
     readonly sectionUuid: string;
-    animationState: import("@angular/core").Signal<"open" | "closed">;
+    animationState: import("@angular/core").Signal<"closed" | "open">;
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CollapsibleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CollapsibleComponent, "ndw-collapsible", never, { "index": { "alias": "index"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;

package/lib/components/edit-bar/edit-bar-actions/edit-bar-actions.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class EditBarActionsComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EditBarActionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditBarActionsComponent, "ndw-edit-bar-actions", never, {}, {}, never, ["*"], true, never>;
+}

package/lib/components/edit-bar/edit-bar-message/edit-bar-message.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class EditBarMessageComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<EditBarMessageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditBarMessageComponent, "ndw-edit-bar-message", never, {}, {}, never, ["*"], true, never>;
+}

package/lib/components/edit-bar/edit-bar.component.d.ts

@@ -0,0 +1,15 @@
+import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
+import { EditBarPosition, EditBarWidth } from './edit-bar.model';
+import * as i0 from "@angular/core";
+export declare class EditBarComponent implements AfterViewInit, OnDestroy {
+    #private;
+    readonly grid: import("@angular/core").InputSignal<boolean>;
+    readonly position: import("@angular/core").InputSignal<EditBarPosition>;
+    readonly positionFixedWidth: import("@angular/core").InputSignal<EditBarWidth>;
+    readonly editBar: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
+    readonly height: import("@angular/core").WritableSignal<number | null>;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EditBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditBarComponent, "ndw-edit-bar", never, { "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "positionFixedWidth": { "alias": "positionFixedWidth"; "required": false; "isSignal": true; }; }, {}, never, ["ndw-edit-bar-message", "ndw-edit-bar-actions"], true, never>;
+}

package/lib/components/edit-bar/edit-bar.model.d.ts

@@ -0,0 +1,2 @@
+export type EditBarPosition = 'fixed' | 'sticky' | 'static' | 'absolute';
+export type EditBarWidth = 'full' | 'layout';

package/lib/components/edit-bar/index.d.ts

@@ -0,0 +1,4 @@
+export * from './edit-bar.component';
+export * from './edit-bar.model';
+export * from './edit-bar-actions/edit-bar-actions.component';
+export * from './edit-bar-message/edit-bar-message.component';

package/lib/components/form-field/file-upload/file-upload.component.d.ts

@@ -35,6 +35,13 @@ export declare class FileUploadComponent implements ControlValueAccessor {
     private resetFile;
     private correctFileSize;
     private correctFileType;
+    /**
+     * Ensures that the provided File has a valid MIME type.
+     *
+     * NOTE: Some file extensions are not automatically mapped to a valid MIME type by the operating system.
+     * In such cases, the MIME_TYPE_MAP is used to assign the correct MIME type.
+     */
+    private ensureFileType;
     static ɵfac: i0.ɵɵFactoryDeclaration<FileUploadComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<FileUploadComponent, "ndw-file-upload", never, { "allowedFileTypeRegex": { "alias": "allowedFileTypeRegex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fileUploadText": { "alias": "fileUploadText"; "required": false; "isSignal": true; }; "maxFileSizeInBytes": { "alias": "maxFileSizeInBytes"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "uploadDate": { "alias": "uploadDate"; "required": false; "isSignal": true; }; "draggingOver": { "alias": "draggingOver"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "incorrectFileSize": { "alias": "incorrectFileSize"; "required": false; "isSignal": true; }; "incorrectFileType": { "alias": "incorrectFileType"; "required": false; "isSignal": true; }; "selectedFile": { "alias": "selectedFile"; "required": false; "isSignal": true; }; "success": { "alias": "success"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "draggingOver": "draggingOverChange"; "error": "errorChange"; "incorrectFileSize": "incorrectFileSizeChange"; "incorrectFileType": "incorrectFileTypeChange"; "selectedFile": "selectedFileChange"; "success": "successChange"; }, never, never, true, never>;
 }

package/lib/components/index.d.ts

@@ -9,6 +9,7 @@ export * from './card';
 export * from './collapsible';
 export * from './dashboard-card';
 export * from './dropdown';
+export * from './edit-bar';
 export * from './form-field';
 export * from './icon';
 export * from './layout';

package/lib/components/layout/layout.component.d.ts

@@ -9,6 +9,7 @@ export declare class LayoutComponent {
     menuFooterTexts: import("@angular/core").InputSignal<string[] | undefined>;
     topMenuItems: import("@angular/core").InputSignal<MenuItem[]>;
     version: import("@angular/core").InputSignal<string | undefined>;
+    environment: import("@angular/core").InputSignal<"local" | "staging" | "acceptance" | undefined>;
     static ɵfac: i0.ɵɵFactoryDeclaration<LayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "ndw-layout", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; "menuFooterTexts": { "alias": "menuFooterTexts"; "required": false; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "ndw-layout", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; "menuFooterTexts": { "alias": "menuFooterTexts"; "required": false; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; "environment": { "alias": "environment"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/lib/components/main-navigation/main-navigation.component.d.ts

@@ -2,7 +2,7 @@ import { ConnectedPosition } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { AfterViewInit, ElementRef, OnDestroy, TemplateRef } from '@angular/core';
 import { MainNavigationMenuComponent } from '../main-navigation-menu';
-import { MenuItem, NdwBrand, SimpleMenuItem } from './main-navigation.model';
+import { Environment, MenuItem, NdwBrand, SimpleMenuItem } from './main-navigation.model';
 import * as i0 from "@angular/core";
 export declare class MainNavigationComponent implements AfterViewInit, OnDestroy {
     #private;
@@ -13,6 +13,7 @@ export declare class MainNavigationComponent implements AfterViewInit, OnDestroy
     isCollapsible: import("@angular/core").InputSignal<boolean>;
     topMenuItems: import("@angular/core").InputSignal<MenuItem[]>;
     version: import("@angular/core").InputSignal<string | undefined>;
+    environment: import("@angular/core").InputSignal<Environment | undefined>;
     closeButtonLabel: import("@angular/core").InputSignal<string>;
     menuButtonLabel: import("@angular/core").InputSignal<string>;
     isExpanded: import("@angular/core").ModelSignal<boolean>;
@@ -21,6 +22,7 @@ export declare class MainNavigationComponent implements AfterViewInit, OnDestroy
     childMenuTemplate: import("@angular/core").Signal<TemplateRef<MainNavigationMenuComponent>>;
     isMobile: import("@angular/core").WritableSignal<boolean>;
     brandImagePath: import("@angular/core").Signal<string>;
+    environmentPillColor: import("@angular/core").Signal<"gray" | "green" | "blue" | "yellow">;
     activeId?: number;
     protected mobilePortal?: TemplatePortal<MainNavigationMenuComponent>;
     onMouseMove(event: MouseEvent): void;
@@ -38,5 +40,5 @@ export declare class MainNavigationComponent implements AfterViewInit, OnDestroy
     toggleMobileView(): void;
     toggleView(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MainNavigationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationComponent, "ndw-main-navigation", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "footerTexts": { "alias": "footerTexts"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "menuButtonLabel": { "alias": "menuButtonLabel"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; "isMobileExpanded": { "alias": "isMobileExpanded"; "required": false; "isSignal": true; }; }, { "isExpanded": "isExpandedChange"; "isMobileExpanded": "isMobileExpandedChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MainNavigationComponent, "ndw-main-navigation", never, { "applicationName": { "alias": "applicationName"; "required": true; "isSignal": true; }; "bottomMenuItems": { "alias": "bottomMenuItems"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "footerTexts": { "alias": "footerTexts"; "required": false; "isSignal": true; }; "isCollapsible": { "alias": "isCollapsible"; "required": false; "isSignal": true; }; "topMenuItems": { "alias": "topMenuItems"; "required": true; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; "environment": { "alias": "environment"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "menuButtonLabel": { "alias": "menuButtonLabel"; "required": false; "isSignal": true; }; "isExpanded": { "alias": "isExpanded"; "required": false; "isSignal": true; }; "isMobileExpanded": { "alias": "isMobileExpanded"; "required": false; "isSignal": true; }; }, { "isExpanded": "isExpandedChange"; "isMobileExpanded": "isMobileExpandedChange"; }, never, never, true, never>;
 }

package/lib/components/main-navigation/main-navigation.imports.d.ts

@@ -6,4 +6,5 @@ import { BadgeComponent } from '../badge';
 import { IconComponent } from '../icon';
 import { MainNavigationMenuComponent } from '../main-navigation-menu';
 import { TooltipDirective } from '../tooltip';
-export declare const MAIN_NAVIGATION_IMPORTS: (typeof BadgeComponent | typeof IconComponent | typeof NgTemplateOutlet | typeof RouterLink | typeof NgClass | typeof TooltipDirective | typeof MainNavigationMenuComponent | typeof CdkPortalOutlet | typeof OverlayModule)[];
+import { PillComponent } from '../pill';
+export declare const MAIN_NAVIGATION_IMPORTS: (typeof NgTemplateOutlet | typeof IconComponent | typeof NgClass | typeof TooltipDirective | typeof BadgeComponent | typeof CdkPortalOutlet | typeof MainNavigationMenuComponent | typeof OverlayModule | typeof PillComponent | typeof RouterLink)[];

package/lib/components/main-navigation/main-navigation.model.d.ts

@@ -10,3 +10,4 @@ export interface MenuItem extends SimpleMenuItem {
     notifications?: number;
 }
 export type NdwBrand = 'NDW' | 'NWB';
+export type Environment = 'local' | 'staging' | 'acceptance';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "peerDependencies": {
     "@angular/animations": "~19.0.0",
     "@angular/cdk": "~19.0.0",

package/styles/base/_variables.scss

@@ -72,8 +72,15 @@
   /* Modal */
   --ndw-modal-width-sm: 31.25rem;
   --ndw-modal-width-md: 45rem;
+
+  /* Navigation */
+  --main-navigation-collapse-width: 2.75rem;
+  --main-navigation-expanded-width: 12.5rem;
+  --main-navigation-mobile-header-height: 6.25rem;
 }
 
 /* Screen sizes */
+$ndw-screen-2xs: 480px;
+$ndw-screen-xs: 768px;
 $ndw-screen-sm: 1024px;
 $ndw-screen-md: 1440px;

package/styles/components/_edit-bar.scss

@@ -0,0 +1,97 @@
+@use '../../styles/base/variables';
+
+$min-width-sm: variables.$ndw-screen-sm + 0.1;
+
+.ndw-edit-bar {
+  --left-position: 0;
+
+  display: block;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  padding: var(--ndw-spacing-md);
+  border-block-start: 1px solid var(--ndw-color-grey-300);
+
+  background-color: var(--ndw-color-white);
+
+  &.ndw-edit-bar--fixed {
+    position: fixed;
+    left: var(--left-position);
+
+    @media screen and (min-width: $min-width-sm) {
+      [data-main-navigation-expanded='true'] & {
+        --left-position: var(--main-navigation-expanded-width);
+      }
+
+      [data-main-navigation-expanded='false'] & {
+        --left-position: var(--main-navigation-collapse-width);
+      }
+    }
+  }
+
+  &.ndw-edit-bar--full-width {
+    left: 0;
+    right: 0;
+  }
+
+  &.ndw-edit-bar--layout-width {
+    right: 0;
+  }
+
+  &.ndw-edit-bar--sticky {
+    position: sticky;
+  }
+
+  &.ndw-edit-bar--static {
+    position: static;
+  }
+
+  &.ndw-edit-bar--absolute {
+    position: absolute;
+  }
+
+  &.ndw-edit-bar--grid {
+    padding-inline: 0;
+  }
+
+  &__inner {
+    gap: var(--ndw-spacing-xs);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .grid {
+    box-sizing: border-box;
+  }
+}
+
+.ndw-edit-bar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ndw-spacing-xs);
+  width: 100%;
+
+  > * {
+    flex: 1;
+    white-space: nowrap;
+  }
+
+  @media screen and (min-width: variables.$ndw-screen-xs) {
+    width: max-content;
+    margin-left: auto;
+
+    > * {
+      flex: unset;
+    }
+  }
+}
+
+.ndw-edit-bar-message {
+  display: block;
+  font-size: var(--ndw-font-size-sm);
+  color: var(--ndw-color-grey-700);
+}

package/styles/components/_input.scss

@@ -63,7 +63,7 @@
   &[disabled],
   &[readonly],
   &:has([ndwInput]:disabled),
-  &:has([ndwInput]:read-only) {
+  &:has([ndwInput]:read-only):not(:has(select[ndwInput])) {
     background-color: var(--ndw-color-grey-100);
     border-color: var(--ndw-color-grey-300);
     color: var(--ndw-color-grey-500);

package/styles/components/_summary-card.scss

@@ -1,8 +1,23 @@
 .ndw-summary-card {
-  display: block;
+  position: relative;
+  box-sizing: border-box;
+
+  display: grid;
+  gap: var(--ndw-spacing-md);
+  padding: var(--ndw-spacing-lg);
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-white);
+  border-radius: var(--ndw-border-radius-md);
+
+  background-color: var(--ndw-color-white);
+  box-shadow: 0 var(--ndw-border-radius-xs) var(--ndw-border-radius-xs) 0 rgba(64, 78, 84, 0.05);
+  transition: var(--ndw-animation-speed-fast);
+
+  &:has(.ndw-summary-card-header a:hover) {
+    border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
+    box-shadow: 0 var(--ndw-border-radius-xs) var(--ndw-border-radius-md) 0 rgba(64, 78, 84, 0.2);
+  }
 
   &__wrapper {
-    position: relative;
     overflow: hidden;
 
     display: grid;
@@ -100,10 +115,6 @@
         text-decoration: none;
         font-family: var(--ndw-font-family-heading);
 
-        &:hover {
-          text-decoration: underline;
-        }
-
         &:after {
           content: '';
           position: absolute;

package/styles/components/index.scss

@@ -2,6 +2,7 @@
 @forward 'card';
 @forward 'divider';
 @forward 'dropdown';
+@forward 'edit-bar';
 @forward 'filter-button';
 @forward 'input';
 @forward 'label';

package/styles/layout/_grid.scss

@@ -5,6 +5,8 @@
 }
 
 .grid {
+  $grid-columns-2xs: 2;
+  $grid-columns-xs: 4;
   $grid-columns-sm: 6;
   $grid-columns-md: 12;
 
@@ -18,13 +20,55 @@
   min-width: min-content;
   max-width: $ndw-screen-md;
 
+  &--no-padding {
+    padding: 0;
+  }
+
   @for $i from 1 through $grid-columns-md {
     .column-#{$i} {
-      // Use min to make sure we don't span more columns than available
       @include column(min($i, var(--grid-columns)));
     }
   }
 
+  @media screen and (max-width: $ndw-screen-2xs) {
+    --grid-columns: #{$grid-columns-2xs};
+    --grid-spacing: var(--ndw-spacing-sm);
+
+    @for $i from 1 through $grid-columns-md {
+      .column-xs-#{$i},
+      .column-sm-#{$i},
+      .column-md-#{$i} {
+        display: none;
+      }
+    }
+
+    @for $i from 1 through $grid-columns-2xs {
+      .column-2xs-#{$i} {
+        @include column($i);
+        display: initial;
+      }
+    }
+  }
+
+  @media screen and (max-width: $ndw-screen-xs) {
+    --grid-columns: #{$grid-columns-xs};
+    --grid-spacing: var(--ndw-spacing-sm);
+
+    @for $i from 1 through $grid-columns-md {
+      .column-sm-#{$i},
+      .column-md-#{$i} {
+        display: none;
+      }
+    }
+
+    @for $i from 1 through $grid-columns-xs {
+      .column-xs-#{$i} {
+        @include column($i);
+        display: initial;
+      }
+    }
+  }
+
   @media screen and (max-width: $ndw-screen-sm) {
     --grid-columns: #{$grid-columns-sm};
     --grid-spacing: var(--ndw-spacing-md);

package/styles/layout/grid.stories.ts

@@ -2,29 +2,34 @@ import { type Meta, type StoryObj } from '@storybook/angular';
 
 interface StoryArgs {
   columnClasses: string[][];
+  disablePadding?: boolean;
 }
 
 /**
- * Create a grid layout with columns. There is one responsive breakpoint at 1024px
- * screen width;
- * - Above 1024px, the grid has 12 columns.
- * - Below 1024px, the grid has 6 columns.
- * - The grid has a maximum width of 1440px.
+ * Create a responsive grid layout with columns. There are multiple breakpoints:
+ * - Above 1024px (sm): 12 columns
+ * - 768px-1024px (xs): 6 columns
+ * - 480px-768px (2xs): 4 columns
+ * - Below 480px: 2 columns
+ * - Maximum width: 1440px
  *
- * The grid needs a container element with the class `grid` and each column element
- * should have a `column-{span}`, `column-sm-{span}` or `column-md-{span}`
- * class where `{span}` is the number of grid columns the element should span.
+ * The grid needs a container element with the class `grid`. Column elements
+ * should have classes like:
+ * - `column-{span}`: all screen sizes
+ * - `column-2xs-{span}`: below 480px
+ * - `column-xs-{span}`: 480px-768px
+ * - `column-sm-{span}`: 768px-1024px
+ * - `column-md-{span}`: above 1024px
  *
- * `column-{span}` classes set the column width for all screen sizes. Different column
- * widths can be set for different screen sizes using `column-sm-{span}` and
- * `column-md-{span}` classes. Columns with only a `column-md-{span}` class will
- * only be visible on screen widths above 1024px.
+ * Where `{span}` is the number of columns to span.
  *
- * When viewing a specific story, use the viewport tool to see how the grid layout
- * responds to different screen sizes.
+ * Use the viewport tool to see responsive behavior.
  *
- * The colors of the background and grid columns are for illustrative purposes.
+ * ## Disable padding
+ * Sometimes you may want to disable padding on the columns, for example when using a card component.
+ * To do this, add the class `grid--no-padding` to the `.grid` element.
  */
+
 const meta: Meta<StoryArgs> = {
   tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
   title: 'Core/Grid',
@@ -48,7 +53,7 @@ const meta: Meta<StoryArgs> = {
       `,
     ],
     template: `
-      <div class="grid">
+      <div class="grid ${props.disablePadding ? 'grid--no-padding' : ''}">
         ${props.columnClasses
           .map(
             (classes, index) =>
@@ -64,6 +69,9 @@ const meta: Meta<StoryArgs> = {
     columnClasses: {
       description: 'Array of classes to apply to each column.',
     },
+    disablePadding: {
+      description: 'Disable the inline padding on the grid.',
+    },
   },
 };
 export default meta;
@@ -72,10 +80,10 @@ type Story = StoryObj<StoryArgs>;
 export const Default: Story = {
   args: {
     columnClasses: [
-      ['column-sm-1', 'column-md-1'],
-      ['column-sm-1', 'column-md-1'],
-      ['column-sm-1', 'column-md-1'],
-      ['column-sm-1', 'column-md-1'],
+      ['column-2xs-1', 'column-xs-1', 'column-sm-1', 'column-md-1'],
+      ['column-2xs-1', 'column-xs-1', 'column-sm-1', 'column-md-1'],
+      ['column-xs-1', 'column-sm-1', 'column-md-1'],
+      ['column-xs-1', 'column-sm-1', 'column-md-1'],
       ['column-sm-1', 'column-md-1'],
       ['column-sm-1', 'column-md-1'],
       ['column-md-1'],
@@ -91,12 +99,12 @@ export const Default: Story = {
 /**
  * Use the viewport button to see different column sizes for different screen sizes.
  */
-export const ChangeOnMobile: Story = {
+export const ResponsiveColumns: Story = {
   args: {
     columnClasses: [
-      ['column-md-4', 'column-sm-3'],
-      ['column-md-4', 'column-sm-3'],
-      ['column-md-4', 'column-sm-6'],
+      ['column-12', 'column-md-4', 'column-sm-3'],
+      ['column-12', 'column-md-4', 'column-sm-3'],
+      ['column-12', 'column-md-4', 'column-sm-6'],
     ],
   },
 };
@@ -104,14 +112,28 @@ export const ChangeOnMobile: Story = {
 export const MixedColumnWidth: Story = {
   args: {
     columnClasses: [
-      ['column-3'],
-      ['column-3'],
+      ['column-6'],
+      ['column-2'],
       ['column-4'],
       ['column-2'],
       ['column-2'],
-      ['column-4'],
+      ['column-2'],
       ['column-6'],
       ['column-12'],
     ],
   },
 };
+
+export const NoPadding: Story = {
+  args: {
+    columnClasses: [
+      ['column-6'],
+      ['column-6'],
+      ['column-2'],
+      ['column-2'],
+      ['column-2'],
+      ['column-6'],
+    ],
+    disablePadding: true,
+  },
+};