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

package/src/components/bs5/footer/footer.scss

@@ -0,0 +1,205 @@
+.qld-footer {
+
+	//Refine --custom-variables at this .qld-footer scope
+	--#{$prefix}body-font-size: 0.875rem;
+
+	//White text on dark background (Default footer)
+	--#{$prefix}footer-border-width: 4px;
+	--#{$prefix}footer-padding-y: 4rem;
+	
+	//Default palette values (white background)
+	--#{$prefix}footer-bg: var(--#{$prefix}white);
+	--#{$prefix}footer-color: var(--body-color);
+	--#{$prefix}link-visited: var(--#{$prefix}link-color);
+
+	--#{$prefix}footer-border-color: var(--#{$prefix}brand-secondary);
+	--#{$prefix}footer-column-border-color: rgba(255, 255, 255, 0.2);
+	
+	--#{$prefix}brand-accent: var(--#{$prefix}brand-secondary-dark);
+	
+	--component-icon-color: #131212;
+
+	//Default palette (white text on blue)
+	&.dark,
+	&.dark-alt {
+		--body-color: var(--#{$prefix}white);
+		--#{$prefix}footer-bg: var(--#{$prefix}brand-primary);
+		--#{$prefix}footer-color: var(--#{$prefix}white);
+		--#{$prefix}footer-border-color: var(--#{$prefix}brand-secondary);
+		--#{$prefix}footer-column-border-color: rgba(255, 255, 255, 0.2);
+		--#{$prefix}link-color: #FFF;
+		--#{$prefix}link-color-rgb: 255, 255, 255;
+		--#{$prefix}link-hover-color: 255, 255, 255;
+		--#{$prefix}link-hover-color-rgb: 255, 255, 255;
+		--#{$prefix}link-visited: #FFF;
+
+		--#{$prefix}brand-accent: var(--#{$prefix}golden-yellow);
+		--component-icon-color: #FFF;
+	}
+
+	//Dark alternative palette (white text on dark blue)
+	&.dark-alt {
+		--#{$prefix}footer-bg: var(--#{$prefix}brand-primary-dark);
+	}
+		
+}
+
+@include color-mode(dark) {
+	.qld-footer {
+		--#{$prefix}footer-bg: var(--#{$prefix}brand-primary-dark);
+	}
+}
+
+.qld-footer {
+	//Padding
+	padding-top: var(--#{$prefix}footer-padding-y);
+	padding-bottom: var(--#{$prefix}footer-padding-y);
+
+	//Border
+	border-top: solid;
+	border-top-width: var(--#{$prefix}footer-border-width);
+	border-top-color: var(--#{$prefix}footer-border-color);
+
+	//Colors
+	background: var(--#{$prefix}footer-bg);
+	color: var(--#{$prefix}footer-color);
+
+	//Adjust font size
+	font-size: var( --#{$prefix}body-font-size );
+
+	a:visited {
+		color: var(--#{$prefix}link-color);
+	}
+
+	.footer-site-name {
+		font-size: 1.25rem;
+		line-height: 1.5;
+		font-weight: 600;
+		margin-bottom: 2rem;
+		display: block;
+		color: var(--#{$prefix}footer-color);
+	}
+
+	.footer-column {
+		position: relative;
+		margin-right: 2rem;
+		margin-bottom: 1rem;
+	}
+
+	@include media-breakpoint-down(lg) {
+		.footer-column {
+			margin-top: 2rem;
+		}
+	}
+
+	//Bordered columns in the footer should only show above medium breakpoint
+	.border-column {
+		position: relative;
+			
+		&:before {
+			position: absolute;
+			content: "";
+			width: 2px;
+			background: var(--#{$prefix}footer-column-border-color);
+			top: 0;
+			bottom: 0;
+			left: -1rem;
+		}
+	}
+
+	.footer-heading {
+		color: var(--#{$prefix}footer-color);
+		font-size: 1.25rem;
+		margin-bottom: 1rem;
+		line-height: 1.5;
+		font-weight: 600;
+	}
+
+	.footer-contact-item {
+		display: flex;
+		align-items: center;
+		margin-bottom: 1.25rem;
+
+		.qld-icon {
+			--#{$prefix}icon-color: var(--#{$prefix}brand-accent);
+			display: block;
+			width: 1.5rem;
+			margin-right: 0.5rem;
+			background-color: var(--#{$prefix}icon-color);
+		}
+	}
+
+	.footer-crest {
+		display: block;
+		width: 252px;
+		margin-bottom: 1.5rem;
+	}
+
+	//Footer Nav classes
+	.nav {
+		--#{$prefix}nav-link-color: var(--#{$prefix}link-color);
+		--#{$prefix}nav-link-hover-color: var(--#{$prefix}hover-color);
+
+		&.footer-link-list {
+			a.nav-link {
+				font-weight: 400;
+				margin-bottom: 0.75rem;
+				padding: 0;
+
+				&:first-child {
+					margin-top: 0.5rem;
+				}
+
+				&:focus-visible {
+					box-shadow: 0 0 0 3px var(--#{$prefix}white);
+				}
+
+				&:visited {
+					color: var(--#{$prefix}link-color);
+				}
+			}
+
+			&--social .nav-link {
+
+				&:first-child {
+					margin-top: -2px;
+				}
+
+				display: flex;
+				margin-bottom: 1.25rem;
+
+				svg {
+					width: 1.25rem;
+					margin-right: 0.75rem;
+				}
+
+				&:hover {
+					--component-icon-color: var(--#{$prefix}brand-accent);
+				}
+			}
+		}
+	}
+
+	svg path {
+		fill: var(--component-icon-color);
+	}
+
+	.btn {
+        --#{$prefix}btn-color: var(--#{$prefix}link-color);
+        --#{$prefix}btn-border-color: var(--#{$prefix}brand-accent);
+        --#{$prefix}btn-hover-border-color: var(--#{$prefix}brand-accent);
+        --#{$prefix}btn-hover-color: var(--#{$prefix}white);
+        --#{$prefix}btn-hover-bg: transparent;
+        --#{$prefix}btn-active-color: #03213f;
+        --#{$prefix}btn-active-bg: var(--#{$prefix}light-grey);
+        --#{$prefix}btn-active-border-color: var(--#{$prefix}light-grey);
+		font-size: var( --#{$prefix}body-font-size );
+    }
+
+	.footer-contact {
+		.btn {
+            min-width: 200px;
+			margin-top: 0.5rem;
+		}
+	}
+}

package/src/components/bs5/footer/footer.stories.js

@@ -0,0 +1,61 @@
+// footer.stories.js
+import { Footer, FooterForgov } from './Footer.js';
+
+import defaultdata from './footer.data.json';
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Footer',
+  render: (args) => new Footer(args).html,
+};
+
+/**
+ * Example footer
+ */
+export const Default = {
+  args: defaultdata,
+  parameters: {
+    controls: { include: [] },
+  },
+};
+
+
+/**
+ * Footer: White
+ */
+export const Dark = {
+  args: {
+    ...defaultdata,
+    variantClass: "dark",
+  },
+  parameters: {
+    controls: { include: [] },
+  },
+};
+
+/**
+ * Footer: Dark Alternative
+ */
+export const DarkAlt = {
+  args: {
+    ...defaultdata,
+    variantClass: "dark-alt",
+  },
+  parameters: {
+    controls: { include: [] },
+  },
+};
+
+
+/**
+ * Forgov footer
+ */
+
+export const Forgov = {
+  args: {
+    ...defaultdata,
+    variantClass: "dark",
+    sitename: "For Government",
+  },
+  render: (args) => new FooterForgov(args).html,
+};

package/src/components/bs5/formcheck/Formcheck.js

@@ -0,0 +1,13 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./formcheck.hbs?raw";
+
+export class Formcheck {
+
+  // Use the global Component class to create a new instance of the Breadcrumbs component.
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+  
+  constructor( data = {} ) {
+    return new Component(template, data);
+  }
+
+}

package/src/components/bs5/formcheck/_formcheck.stories.bak.js

@@ -0,0 +1,432 @@
+// Formcheck.stories.js
+import { Formcheck } from './Formcheck.js';
+
+import radiodata from './formcheck.radio.data.json';
+import checkboxdata from './formcheck.checkbox.data.json';
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Formcheck/Radio',
+  render: (args) => {
+    return `${new Formcheck(args).html}`
+  },
+  //https://storybook.js.org/docs/api/arg-types 
+  argTypes: {
+  },
+
+  
+};
+
+// Default story for Formcheck component
+export const Default = {
+  args: {...radiodata},
+  parameters: {
+    controls: { include: `listitems` },
+  },
+};
+
+export const RadioDark = {
+  args: {...radiodata},
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+export const Checkbox = {
+  title: 'Components/Formcheck/Checkbox',
+  args: {...checkboxdata},
+};
+
+export const CheckboxDark = {
+  
+  args: {...checkboxdata},
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+export const RadioSmall = {
+  
+  args: {...radiodata, id: "radioSmall"},
+  decorators: [
+    (Story) => {
+      return `
+      <div class="small">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+export const RadioSmallDark = {
+  
+  args: {...radiodata, id: "radioSmallDark"},
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark"><div class="small">
+          ${Story()}
+      </div></div>
+      `;
+    },
+  ],
+};
+
+export const CheckboxSmall = {
+  args: {...checkboxdata, id: "checkboxSmall"},
+  decorators: [
+    (Story) => {
+      return `
+      <div class="small">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+};
+
+export const CheckboxSmallDark = {
+  args: {...checkboxdata, id: "checkboxSmallDark"},
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark">
+      <div class="small">
+          ${Story()}
+      </div>
+      </div>
+      `;
+    },
+  ],
+};
+
+export const RadioValid = {
+  args: {...radiodata, id: "radioValid"},
+  render: (args) => {
+    return `
+    <div class="valid">${new Formcheck(args).html}</div>
+    `
+  },
+}
+
+export const RadioValidSmall = {
+  args: {...radiodata, id: "radioValidSmall"},
+  render: (args) => {
+    return `
+    <div class="small"><div class="valid">${new Formcheck(args).html}</div></div>
+    `
+  },
+}
+
+export const RadioValidDark = {
+  args: {...radiodata, id: "radioValidDark"},
+  render: (args) => {
+    return `
+    <div class="dark">
+    <div class="valid">${new Formcheck(args).html}</div></div>
+    `
+  },  
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark"><div class="valid">
+          ${Story()}
+      </div></div>
+      `;
+    },
+  ],
+}
+
+export const RadioValidSmallDark = {
+  args: {...radiodata, id: "radioValidSmallDark"},
+  render: (args) => {
+    return `
+    <div class="dark">
+    <div class="valid">${new Formcheck(args).html}</div></div>
+    `
+  },  
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark"><div class="small"><div class="valid">
+          ${Story()}
+      </div></div></div>
+      `;
+    },
+  ],
+}
+
+export const CheckboxValid = {
+  args: {...checkboxdata, id: "checkboxValid"},
+  render: (args) => {
+    return `
+    <div class="valid">${new Formcheck(args).html}</div>
+    `
+  },
+}
+
+export const CheckboxValidSmall = {
+  args: {...checkboxdata, id: "checkboxValidSmall"},
+  render: (args) => {
+    return `
+    <div class="small"><div class="valid">${new Formcheck(args).html}</div></div>
+    `
+  },
+}
+
+export const CheckboxValidDark = {
+  args: {...checkboxdata, id: "checkboxValidDark"},
+  render: (args) => {
+    return `
+    <div class="dark">
+    <div class="valid">${new Formcheck(args).html}</div></div>
+    `
+  },  
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark"><div class="valid">
+          ${Story()}
+      </div></div>
+      `;
+    },
+  ],
+}
+
+export const CheckboxValidSmallDark = {
+  args: {...checkboxdata, id: "checkboxValidSmallDark"},
+  render: (args) => {
+    return `
+    <div class="dark">
+    <div class="valid">${new Formcheck(args).html}</div></div>
+    `
+  },  
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark"><div class="small"><div class="valid">
+          ${Story()}
+      </div></div></div>
+      `;
+    },
+  ],
+}
+
+export const RadioInvalid = {
+  args: {...radiodata, id: "radioInvalid"},
+  render: (args) => {
+    return `
+    <div class="invalid">${new Formcheck(args).html}</div>
+    `
+  },
+}
+
+export const RadioInvalidSmall = {
+  args: {...radiodata, id: "radioInvalidSmall"},
+  render: (args) => {
+    return `
+    <div class="small"><div class="invalid">${new Formcheck(args).html}</div></div>
+    `
+  },
+}
+export const RadioInvalidDark = {
+  args: {...radiodata, id: "radioInvalidDark"},
+  render: (args) => {
+    return `
+    <div class="invalid"><div class="dark">${new Formcheck(args).html}</div></div>
+    `
+  },  
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="small">
+          ${Story()}
+      </div>
+      `;
+    },
+  ],
+}
+
+export const RadioInvalidSmallDark = {
+  args: {...radiodata, id: "radioInvalidSmallDark"},
+  render: (args) => {
+    return `
+    <div class="dark">
+    <div class="invalid">${new Formcheck(args).html}</div></div>
+    `
+  },  
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark"><div class="small"><div class="invalid">
+          ${Story()}
+      </div></div></div>
+      `;
+    },
+  ],
+}
+
+export const CheckboxInvalid = {
+  args: {...checkboxdata, id: "checkboxInvalid"},
+  render: (args) => {
+    return `
+    <div class="invalid">${new Formcheck(args).html}</div>
+    `
+  },
+}
+
+export const CheckboxInvalidSmall = {
+  args: {...checkboxdata, id: "checkboxInvalidSmall"},
+  render: (args) => {
+    return `
+    <div class="small"><div class="invalid">${new Formcheck(args).html}</div></div>
+    `
+  },
+}
+
+export const CheckboxInvalidDark = {
+  args: {...checkboxdata, id: "checkboxInvalidDark"},
+  render: (args) => {
+    return `
+    <div class="dark">
+    <div class="invalid">${new Formcheck(args).html}</div></div>
+    `
+  },  
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark"><div class="invalid">
+          ${Story()}
+      </div></div>
+      `;
+    },
+  ],
+}
+
+export const CheckboxInvalidSmallDark = {
+  args: {...checkboxdata, id: "checkboxInvalidSmallDark"},
+  render: (args) => {
+    return `
+    <div class="dark">
+    <div class="invalid">${new Formcheck(args).html}</div></div>
+    `
+  },  
+  parameters: {
+    backgrounds: {
+      default: 'Dark',
+      values: [
+        { name: 'Dark', value: 'var(--qld-sapphire-blue)' },
+      ],
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+      <div class="dark"><div class="small"><div class="invalid">
+          ${Story()}
+      </div></div></div>
+      `;
+    },
+  ],
+}

package/{docs/storybook-static/assets → src}/components/bs5/formcheck/formcheck.hbs

@@ -14,7 +14,7 @@
   
   {{#each listitems}}
   <div class="form-check">
-    <input class="form-check-input" type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {{state}}>
+    <input class="form-check-input" type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}}>
     <label class="form-check-label" for="{{id}}">
       {{label}}
     </label>