@qld-gov-au/qgds-bootstrap5 1.0.1 → 1.0.2

package/src/main.scss

@@ -0,0 +1,115 @@
+// DEV Notes:
+// ~bootstrap is an alias for node_modules/bootstrap/ as defined in vite.config.js
+// ~fontawesome is an alias for node_modules/fontawesome/ as defined in vite.config.js
+
+// Guidelines for this setup: https://getbootstrap.com/docs/5.3/customize/sass/
+
+// External fonts
+@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&family=Noto+Sans:wght@400;600&display=swap');
+$font-family-sans-serif: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sitename: "Fira Sans";
+
+//Icons
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css");
+@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
+
+
+//Prefix to namespace design-system classes
+$prefix: "qld-";
+$enable-cssgrid: true;
+$color-mode-type: data;
+$enable-dark-mode: true;
+
+
+// 1. Include bootstraps functions and variables first (so they can be referenced by proceeding files)
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/variables-dark";
+
+// 2. QLD Design System variables (Bootstrap overrides)
+@import "./scss/qld-variables";
+// @import "./scss/qld-variables-dark"; //future state
+@import "./scss/qld-type";
+
+// 3. Include remainder of bootstrap
+// 3.1 Required
+@import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+
+// 3.2 Recommended, Resets and shared
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/helpers";
+
+// 3.3 Optional components
+@import "~bootstrap/scss/accordion";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/offcanvas";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/placeholders";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/tooltip";
+
+// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+@import "~bootstrap/scss/utilities/api";
+
+
+// 8. QLD Design System components (bootsrap overrides and custom). Please maintain naming consistency
+@import "./components/bs5/accordion/accordion.scss";
+@import "./components/bs5/banner/banner.scss";
+@import "./components/bs5/blockquote/blockquote.scss";
+@import "./components/bs5/breadcrumbs/breadcrumbs.scss";
+@import "./components/bs5/button/button.scss";
+@import "./components/bs5/callout/callout.scss";
+@import "./components/bs5/card/card.scss";
+@import "./components/bs5/correctincorrect/correctincorrect.scss";
+@import "./components/bs5/dateinput/dateinput.scss";
+@import "./components/bs5/formcheck/formcheck.scss";
+@import "./components/bs5/footer/footer.scss";
+@import "./components/bs5/globalAlert/globalAlert.scss";
+@import "./components/bs5/header/header.scss";
+@import "./components/bs5/icons/icons.scss";
+@import "./components/bs5/inpageAlert/inpageAlert.scss";
+@import "./components/bs5/inpagenav/inpagenav.scss";
+@import "./components/bs5/modal/modal.scss";
+@import "./components/bs5/navbar/navbar.scss";
+@import "./components/bs5/pagination/pagination.scss";
+@import "./components/bs5/quickexit/quickexit.scss";
+@import "./components/bs5/sidenav/sidenav.scss";
+@import "./components/bs5/spinner/spinner.scss";
+@import "./components/bs5/table/table.scss";
+@import "./components/bs5/tag/tag.scss";
+@import "./components/bs5/textbox/textInput.scss";
+@import "./components/bs5/typography/typography.scss";
+@import "./components/bs5/video/video.scss";
+
+
+// Common Layout Blocks, under review
+@import "./components/common/layout/content.scss";
+
+// Themes, under review
+@import "./scss/qld-theme.scss";

package/src/scss/qld-theme.scss

@@ -0,0 +1,29 @@
+// Dark mode.  
+// Note that you can't read custom variables into media queries (as at Sep 2023).
+// Example: "background: var(--theme-background);"  
+
+// However, you can set them, however:
+// example: --theme-background: #000;
+
+//You can also fall back to SASS variable to set at compile time.
+
+@include color-mode(dark) {
+    :root {
+        --#{$prefix}body-bg: var(--qld-brand-primary-dark);
+        --#{$prefix}body-color: #FFF;
+        --#{$prefix}heading-color: #FFF;
+        --#{$prefix}link-color: #FFF;
+        --#{$prefix}link-hover-color: var(--qld-brand-accent);
+    }
+
+    //...etc
+}
+
+
+.light {
+    background: var(--#{$prefix}light-background);
+}
+
+.alt {
+    background: var(--#{$prefix}light-alt-background);
+}

package/src/scss/qld-type.scss

@@ -0,0 +1,134 @@
+//Typography
+$font-family-sans-serif: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+
+$body-color: $qld-text-grey;
+$body-font-weight: 400;
+
+$font-size-base:              1rem;
+$h1-font-size:                $font-size-base * 2.5;
+$h2-font-size:                $font-size-base * 2;
+$h3-font-size:                $font-size-base * 1.5;
+$h4-font-size:                $font-size-base * 1.25;
+$h5-font-size:                $font-size-base * 1;
+$h6-font-size:                $font-size-base * 0.875;
+
+$headings-font-weight:        600;
+$headings-line-height:        2;
+$headings-color:              $qld-text-headings;
+
+$link-color:                  $qld-brand-primary;
+$link-hover-color:            $qld-brand-primary;
+$link-visited-color:          $qld-link-visited;
+
+
+//Links
+.default,
+.light,
+.alt,
+:root {
+    --qld-link-underline-offset: 0.3rem;
+    --qld-link-underline-thickness: 0.5px;
+    --qld-link-underline-thickness-hover: 2px;
+    --qld-headings-color: #{$headings-color};
+    --qld-body-color: #{$body-color};
+    --qld-body-font-weight: #{$body-font-weight};
+    --qld-link-font-weight: 400;
+    --qld-link-color: #{$link-color};
+    --qld-link-color-rgb: #{to-rgb($link-color)};
+    --qld-link-hover-color: var(--qld-link-color);
+    --qld-link-hover-color-rgb: var(--qld-link-color-rgb);
+    --qld-selection-color: var(--qld-white);
+    --qld-selection-bg: var(--qld-brand-primary);
+    --qld-focus-color: var(--qld-light-blue);
+}
+
+.dark,
+.dark-alt,
+:root[data-bs-theme=dark] {
+    --qld-headings-color: #FFF;
+    --qld-body-color: #FFF;
+    --qld-body-bg: var(--qld-brand-primary);
+
+    --qld-link-color: #FFF;
+    --qld-link-color-rgb: 255, 255, 255;
+
+    --qld-link-hover-color: #FFF;
+    --qld-link-hover-color-rgb: 255, 255, 255;
+
+    --qld-link-visited: var(--qld-link-visited-dark);
+
+    --qld-selection-color: var(--qld-brand-primary);
+    --qld-selection-bg: var(--qld-white);
+
+    --qld-focus-color: var(--qld-dark-focus);
+}
+
+
+
+//Content and links
+body {
+    -webkit-font-smoothing: antialiased;
+}
+
+.dark,
+.dark-alt {
+    body & {
+        color: var(--qld-body-color);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: var(--qld-headings-color);
+    }
+}
+
+a {
+    font-weight: var(--qld-link-font-weight);
+}
+
+a,
+a.nav-link {
+    text-decoration: underline;
+    text-underline-offset: var(--qld-link-underline-offset);
+    text-decoration-thickness: var(--qld-link-underline-thickness);
+
+    &:hover {
+        text-decoration-thickness: var(--qld-link-underline-thickness-hover);
+    }
+
+    &:visited {
+        color: var(--qld-link-visited);
+    }
+
+    &:focus {
+        outline: 2px solid var(--qld-focus-color);
+        outline-offset: 2px
+    }
+}
+
+
+a.nostyle {
+
+    text-decoration: unset;
+    text-underline-offset: unset;
+    text-decoration-thickness: unset;
+
+    &:hover {
+        text-decoration-thickness: unset;
+    }
+}
+
+::-moz-selection {
+    background: var(--qld-selection-bg);
+    text-shadow: none;
+}
+
+::selection {
+    color: var(--qld-selection-color);
+    background: var(--qld-selection-bg);
+    text-shadow: none;
+}

package/src/scss/qld-variables.scss

@@ -0,0 +1,285 @@
+// GLOBALLY SCOPED VARIABLES
+// These variables are avaiable to the full project and all components. (This file is included at the top of main.scss to ensure this)
+
+// These variables include new $variables for the project, or replace existing out-of-the-box bootstrap variables defined under /node_modules/bootstrap/.../_variables.scss,
+
+//QLD Names Colours
+$qld-dark-blue : #05325F;
+$qld-sapphire-blue : #09549F;
+$qld-light-blue : #0085B3;
+$qld-light-green : #6BBE27;
+$qld-dark-green : #008635;
+$qld-golden-yellow : #FFE500;
+$qld-maroon-traditional : #771E32;
+$qld-maroon-modern : #A70240;
+$qld-dark-text: #FFFFFF;
+$qld-dark-border: #1D9AC6;
+$qld-dark-alt-border: #09ACFE;
+$qld-alt-button-hover: #005B23;
+$qld-general-info-alert: #e5eef5;
+$qld-red-border: #8A1220;
+$qld-blue-border: #5C94C0;
+$qld-yellow-border: #B38800;
+$qld-dark-blue-shade : #052C53;
+$qld-light-background: #EFF4F9;
+$qld-light-background-shade: #E5EEF5;
+$qld-light-border: #ECEDE9;
+$qld-dark-focus: #01B0E5;
+$qld-link-visited: #8B63B0;
+$qld-link-visited-dark: #E1C2FF;
+$qld-text-light-blue-dark : #DEEBF9;
+$qld-light-green-dark : #ADD33F;
+$qld-dark-green-dark : #78BA00;
+$qld-light-yellow : #FFEF60;
+$qld-button-dark-blue : #003E7D;
+$qld-text-darkest : #121940;
+$qld-dark-hover : #044a8f;
+
+//Hypothetical
+$cobrand-blue : #132D4E;
+$cobrand-grey : #294d7b;
+$cobrand-maroon : #A70240;
+$cobrand-purple : #634B78;
+$cobrand-yellow : #FBAF54;
+$cobrand-orange : #FD855D;
+
+
+//QGOV Brand Mapping - QLD.GOV.AU
+$qld-brand-primary-dark : $qld-dark-blue;
+$qld-brand-primary : $qld-sapphire-blue;
+$qld-brand-primary-light : $qld-light-blue;
+$qld-brand-secondary-dark : $qld-dark-green;
+$qld-brand-secondary : $qld-light-green;
+$qld-brand-accent : $qld-golden-yellow;
+
+
+// Uncoment to switch primary palette
+// $qld-brand-primary-dark   : $cobrand-grey;
+// $qld-brand-primary        : $cobrand-maroon;
+// $qld-brand-primary-light  : $cobrand-blue;
+// $qld-brand-secondary-dark : $cobrand-orange;
+// $qld-brand-secondary      : $cobrand-purple;
+// $qld-brand-accent         : $cobrand-yellow;
+
+
+//Grays
+$qld-system-darkest : #1D1D1D;
+$qld-text-grey : #414141;
+$qld-hint-text-color: #6F777b;
+$qld-hint-text-color-muted: #DEEBF9;
+$qld-color-dark-button-hover: #ADD33F;
+$qld-text-headings : #04284C;
+$qld-dark-grey : #595959;
+$qld-dark-grey-muted : #636363; // --QLD-color-light-text__muted
+$qld-medium-grey : #78797E;
+$qld-soft-grey : #7A7A7A;
+$qld-alt-grey : #DADADA;
+$qld-grey : #E0E0E0;
+$qld-light-grey : #EBEBEB;
+$qld-light-grey-alt : #E8E8E8;
+$qld-extra-light-grey : #F5F5F5;
+$qld-white : #FFFFFF;
+$qld-white-underline : rgba(255, 255, 255, 0.72);
+$qld-dark-underline : rgba(3, 33, 63, 0.72);
+$qld-maroon-traditional: #771E32;
+$qld-maroon-modern : #A70240;
+$qld-notify-warning : #E22339;
+$qld-notify-information: #0085B3;
+$qld-notify-success : #339D37;
+$qld-notify-alert : #FFCC2C;
+$qld-syntax-values : #6BBE27;
+$qld-syntax-elements : #A7E5FF;
+$qld-syntax-properties : #C88DF7;
+$qld-syntax-comments : #C0D7EC;
+$qld-textbox-border-color: #003E7D;
+$qld-color-error-light: #FFF6F6;
+$qld-color-success-light: #F7FBF8;
+
+$qld-light-link: #1E5866;
+
+// Define new figma variables as SASS variables
+$qld-color-background: #FFFFFF;
+$qld-color-background--shade: #F5F5F5;
+$qld-color-light-background: #EFF4F9;
+$qld-color-light-background--shade: #E5EEF5;
+$qld-color-light-alt-background: #E8E8E8;
+$qld-color-light-alt-background--shade: #E0E0E0;
+
+$qld-color-dark-background: #09549F;
+$qld-color-dark-background--shade: #04498F;
+$qld-color-dark-alt-background: #05325F;
+$qld-color-dark-alt-background--shade: #052C53;
+
+$qld-light-action-primary: $qld-sapphire-blue;
+$qld-light-action-primary-hover: $qld-button-dark-blue;
+$qld-light-action-secondary: #008635;
+$qld-light-action-secondary-hover: #005B23;
+
+$qld-dark-action-primary: $qld-dark-green-dark;
+$qld-dark-action-primary-hover: $qld-light-green-dark;
+$qld-dark-action-secondary: #FFE500;
+$qld-dark-action-secondary-hover: #FFEF60;
+$qld-dark-action-text: $qld-text-darkest;
+
+$primary : $qld-brand-primary;
+$primary-dark : $qld-brand-primary-dark;
+$secondary : $qld-dark-green;
+$success : $qld-notify-success;
+$info : $qld-notify-information;
+$warning : $qld-notify-alert;
+$danger : $qld-notify-warning;
+$light : $qld-extra-light-grey;
+$dark : $qld-dark-grey;
+
+$qld-fluid-width-full: 100%;
+$qld-fluid-width-3-quarters: 75%;
+$qld-fluid-width-half: 48.5%;
+$qld-fluid-width-1-quarter: 25%;
+
+// The Bootstrap map-merge will create custom CSS variables against the ::root node.
+// These will be available to all components via the PREFIXED variable, for example: var(--qld-dark-green)
+// The PREFIX is defined at the top of main.SCSS file (ie CSS entry point)
+
+$project-colors: (
+  "brand-primary-dark": $qld-brand-primary-dark,
+  "brand-primary": $qld-brand-primary,
+  "brand-primary-light": $qld-brand-primary-light,
+  "brand-secondary": $qld-brand-secondary,
+  "brand-secondary-dark": $qld-brand-secondary-dark,
+  "brand-secondary-light": $qld-brand-secondary,
+  "brand-accent": $qld-brand-accent,
+  //...
+  "dark-blue": $qld-dark-blue,
+  "sapphire-blue": $qld-sapphire-blue,
+  "light-blue": $qld-light-blue,
+  "light-green": $qld-light-green,
+  "dark-green": $qld-dark-green,
+  "golden-yellow": $qld-golden-yellow,
+  "system-darkest": $qld-system-darkest,
+  "text-grey": $qld-text-grey,
+  "dark-grey": $qld-dark-grey,
+  "dark-grey-muted": $qld-dark-grey-muted,
+  "soft-grey": $qld-soft-grey,
+  "medium-grey": $qld-medium-grey,
+  "grey": $qld-grey,
+  "alt-grey": $qld-alt-grey,
+  "light-grey": $qld-light-grey,
+  "light-grey-alt": $qld-light-grey-alt,
+  "extra-light-grey": $qld-extra-light-grey,
+  "white": $qld-white,
+  "white-underline": $qld-white-underline,
+  "dark-underline": $qld-dark-underline,
+  "maroon-traditional": $qld-maroon-traditional,
+  "maroon-modern": $qld-maroon-modern,
+  "notify-warning": $qld-notify-warning,
+  "notify-information": $qld-notify-information,
+  "notify-success": $qld-notify-success,
+  "notify-alert": $qld-notify-alert,
+  "syntax-values": $qld-syntax-values,
+  "syntax-elements": $qld-syntax-elements,
+  "syntax-properties": $qld-syntax-properties,
+  "syntax-comments": $qld-syntax-comments,
+  "primary": $qld-sapphire-blue,
+  "primary-dark": $qld-brand-primary-dark,
+  "secondary": $qld-dark-green,
+  "success": $qld-notify-success,
+  "info": $qld-notify-information,
+  "warning": $qld-notify-alert,
+  "danger": $qld-notify-warning,
+  "light": $qld-extra-light-grey,
+  "dark": $qld-dark-grey,
+  "dark-text": $qld-dark-text,
+  "dark-border": $qld-dark-border,
+  "dark-alt-border": $qld-dark-alt-border,
+  "alt-button-hover": $qld-alt-button-hover,
+  "dark-blue-shade": $qld-dark-blue-shade,
+  "dark-focus": $qld-dark-focus,
+  "text-light-blue-dark": $qld-text-light-blue-dark,
+  "light-green-dark": $qld-light-green-dark,
+  "dark-green-dark": $qld-dark-green-dark,
+  "light-yellow": $qld-light-yellow,
+  "button-dark-blue": $qld-button-dark-blue,
+  "text-darkest": $qld-text-darkest,
+  "dark-hover" : $qld-dark-hover,
+
+  "light-action-primary": $qld-light-action-primary,
+  "light-action-primary-hover": $qld-light-action-primary-hover,
+  "light-action-secondary":  $qld-light-action-secondary,
+  "light-action-secondary-hover":  $qld-light-action-secondary-hover,
+
+  "dark-action-primary": $qld-dark-action-primary,
+  "dark-action-primary-hover": $qld-dark-action-primary-hover,
+  "dark-action-text": $qld-dark-action-text,
+  "dark-action-secondary": $qld-dark-action-secondary,
+  "dark-action-secondary-hover": $qld-dark-action-secondary-hover,
+
+  //Define new BEM colour variables from Figma
+  //These will become properties on ::root node that you can reference by e.g: background: var(--qld-light-text-text)
+  "default-background": $qld-color-background,
+  "default-background-shade": $qld-color-background--shade,
+
+  "light-text-heading": $qld-text-headings,
+  "light-text-text": $qld-text-grey,
+  "light-background": $qld-light-background,
+  "light-background-shade": $qld-light-background-shade,
+  "light-border": $qld-light-border,
+
+  "light-alt-background": $qld-color-light-alt-background,
+  "light-alt-background-shade": $qld-color-light-alt-background--shade,
+
+  "dark-background": $qld-color-dark-background,
+  "dark-background-shade": $qld-color-dark-background--shade,
+  "dark-alt-background": $qld-color-dark-alt-background,
+  "dark-alt-background-shade": $qld-color-dark-alt-background--shade,
+
+  "link-visited": $qld-link-visited,
+  "link-visited-dark": $qld-link-visited-dark,
+
+);
+
+$theme-colors: map-merge($theme-colors, $project-colors);
+
+
+// Cusotm GRID breakpoints: https://getbootstrap.com/docs/5.2/layout/grid/#variables
+$grid-breakpoints: (
+  xs: 0,
+  sm: 400px,
+  md: 700px,
+  lg: 992px,
+  xl: 1312px
+);
+
+
+
+// Default border radius
+$border-radius: 0.25rem;
+$border-radius-sm: 0.25rem;
+$border-radius-lg: 0.25rem;
+
+
+
+// QGOV Borders
+$qld-border-width-thin : 1px;
+$qld-border-width-default : 2px;
+$qld-border-width-medium : 3px;
+$qld-border-width-thick : 4px;
+$qld-border-width-extra-thick : 8px;
+
+
+
+// Extended spacers to procude 8px and 16px increments
+// use px-16, py-sm-16, ml-40, mr-40, etc
+$qld-custom-spacers: (
+  16: $spacer,
+  20: ($spacer * 1.25),
+  24: ($spacer * 1.5),
+  32: ($spacer * 2),
+  40: ($spacer * 2.5),
+  48: ($spacer * 3.0),
+  56: ($spacer * 3.5),
+  64: ($spacer * 4),
+  72: ($spacer * 4.5),
+  80: ($spacer * 5)
+);
+
+$spacers: map-merge($spacers, $qld-custom-spacers);

package/src/stories/Introduction.mdx

@@ -0,0 +1,14 @@
+import { Meta, Markdown } from "@storybook/blocks";
+
+import Readme from "../../README.md?raw"
+
+<Meta title="Welcome" />
+
+[//]: # (# Welcome to QGDS QOL BS MVP Storybook)
+
+[//]: # ()
+[//]: # (Welcome to Queensland Government Design System Qld Online Mvp Storybook, this documentation is mainly for development and testing purposes.)
+
+[//]: # (For user orientated documentation, please visit https://www.forgov.qld.gov.au/swe.)
+
+<Markdown>{Readme}</Markdown>

package/src/stories/helpers/getDecoratedParameters.js

@@ -0,0 +1,7 @@
+export const getDecoratedParameters = (template) => ({
+  docs: {
+    source: {
+      code: template,
+    },
+  },
+});

package/src/stories/helpers/getMobileProps.js

@@ -0,0 +1,21 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import {allModes} from "./../../../.storybook/modes.js";
+
+export const getCanvasMobileProps = () => ({ style: INITIAL_VIEWPORTS.iphone12.styles });
+
+export const getStoryMobileParameters = () => ({
+  viewport: {
+    defaultViewport: 'iphone12',
+  },
+  docs: {
+    // Opt-out of inline rendering
+    story: {
+      inline: false,
+    },
+  },
+  chromatic: {
+    modes: allModes["mobile"],
+  },
+});
+
+export const getStoryMobileHeight = () => INITIAL_VIEWPORTS.iphone12.styles.height;

package/src/stories/helpers/index.js

@@ -0,0 +1,2 @@
+export * from './getMobileProps';
+export * from './getDecoratedParameters';

package/src/stories/templates/ContentPage/ContentPage.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Meta, Story } from "@storybook/blocks";
+import * as ContentPageStories from './ContentPage.stories';
+
+import { getCanvasMobileProps } from "../../helpers";
+
+<Meta of={ContentPageStories} />
+
+# Content Page
+
+## Default
+
+<Canvas sourceState="close">
+  <Story of={ContentPageStories.Default} />
+</Canvas>
+
+[//]: # ()
+[//]: # (## No aside)
+
+[//]: # ()
+[//]: # (<Canvas sourceState="close">)
+
+[//]: # (  <Story of={ContentPageStories.NoAside} />)
+
+[//]: # (</Canvas>)
+
+[//]: # ()
+[//]: # (## Without location)
+
+[//]: # ()
+[//]: # (<Canvas sourceState="close">)
+
+[//]: # (  <Story of={ContentPageStories.WithoutLocation} />)
+
+[//]: # (</Canvas>)
+
+## Mobile
+
+<Canvas withSource="none" >
+  <Story of={ContentPageStories.Mobile} />
+</Canvas>

package/src/stories/templates/ContentPage/ContentPage.stories.js

@@ -0,0 +1,36 @@
+import {
+  getStoryMobileParameters,
+  getStoryMobileHeight,
+} from '../../helpers';
+
+//import DefaultTemplate from '../../../templates/page/contentpage.html';
+// import NoAsideTemplate from '../../../template-pages/content-page-no-asides.html';
+// import WithoutLocationTemplate from '../../../template-pages/content-page-without-location.html';
+
+export default {
+  title: 'Templates/ContentPage',
+};
+
+export const Default = {
+  render: () => { return `
+  comingsoon
+   ` }, //DefaultTemplate,
+};
+
+// export const NoAside = {
+//   render: () => NoAsideTemplate,
+//   name: 'NoAside',
+// };
+//
+// export const WithoutLocation = {
+//   render: () => WithoutLocationTemplate,
+//   name: 'WithoutLocation',
+// };
+
+export const Mobile = {
+  render: () => { return `
+  comingsoon
+   ` }, //DefaultTemplate,
+  parameters: getStoryMobileParameters(),
+  height: getStoryMobileHeight(),
+};