This backstop js library is being used to an extent on the DTA website. Lets add this to our build piplelines

Nice pick up @MattFredBrooks.

The heading in the header should be a h1, since it's the top level heading.

• include documentation in text

Npm install the table component so that its ready to go if someone needs

It'd be nice for local testing to be able to delete everything really quickly. We do a similar thing in the component and site repo: https://github.com/govau/design-system-components/blob/master/package.json#L22

We should probably use rimraf or some other light package to run the delete scripts for.

When using the select component on local host the default dropdown icon does not get removed. This is probably an issue with our scripts/autoprefixer.

1. npm i @gov.au/card

2. Remove this hideous thing
   

3. Use something like this instead:

Following a11y discussion

• Make form hint same size
• Make form hint same colour
• Remove underline from form hint
• The "R" in "Required" should be lower case

As a new user getting started with the design system, I should be able to use the starter pack to see a realistic example of components being used to create an sample homepage.

The design system components sketch file has full page examples of components being used in context. These should be used as a base for the update to the starter pack.

Refer:
https://github.com/govau/design-system-starter/blob/draft-media-release/docs/media-release/index.html#L163

Expected markup pattern using POSH:

<dl class="media-release__metadata">
  <dt>Published:</dt>
  <dd><time datetime="2019-04-10">10 April 2019</time></dd>
  <dt>Agency:</dt>
  <dd>Digital Transformation Agency</dd>
  <dt>Author:</dt>
  <dd>Kelly Smith</dd>
</dl>

We should be automating the build process to test if we're pushing broken changes.

This should go under the articles list like so:

As mentioned in here:

https://community.digital.gov.au/t/form/111/13

We may need to adjust our hint text and error messages, so that they have a full stop at the end.

Search/results pages are common in government websites. Would be good if we could create a template that focuses good UX

Should it be left aligned or right aligned?

Probably left, unless we can give good reasoning for right.

Would be good to do some a11y testing in CI

Draft a media release template

When running npm run watch, the serve and watch:sass scripts don't run concurrently on windows.

Will need to install npm-run-all to make it work.

Lets Docker-ise!

Should probably do the same for ds-website repo...and others

This will be corrected in @gov.au/[email protected]

is that any way I could see how the styleguild(docs/index.html) be generated?

In the root README.md file all the links under the Templates and Development environment headings are broken. They are trying to link to a github pages site that does not exist.

We need more pages in the uikit-starter:

• Add code comments so it's easy to follow and read
• home page
• basic page
• form page

It will tie in quite well with the page if we include a link to https://guides.service.gov.au/content-guide/.

Also change the text from one to three levels to 1 to three levels in the second last paragraph as per the content guide

As per the below topic of discussion, we should probably have meta tags in our tempaltes

https://community.digital.gov.au/t/ausgov-compliance-with-metadata-standards/994

Error generated on fresh Windows 10 environment after NodeJS install and running through build instructions for uikit-starter:

C:\Users\USER\Documents\Code\uikit-starter\node_modules\uws>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild ) 
gyp ERR! configure error 
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.16299
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\USER\Documents\Code\uikit-starter\node_modules\uws
gyp ERR! node -v v8.11.1
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok

Running npm install sass manually before re-running npm install for ui-kit-starter appeared to solve the issue

Remove word navigation from the aria-label in the <nav> element in footer and main nav according to version 3.0.4 and 1.0.6 respectively

Chrome among others fails to import the css as no type is defined.

Otherwise it comes up with
https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type

Could of done a pull, but not worth it - I'll be playing with this soon enough :)

• Actually the whole index.html looks like it needs updating as it still referrences uikit- CSS classes, when the UI2KIT is now au- (correct me if I'm wrong)..

We had some user feedback around the documentation being hard to understand:

• How the site is built into the docs folder
• How the generated files get made by pancake

Currently there are a few confusing and different implementations of the Uikit dependent on what code you are using.

Having a starter for all of the implementations will allow people to quickly understand how to set up their index.html, files and folders dependent on the implementation they are using.

HTML5 validation is not accessible and isn't well supported in older browsers.

Some ideas from a11y catchup

• on submit, if there are validation errors, error labels appear between <input> and <label> for that input
• page-alert appears, focus is shifted to this page-alert, which contains a list of errors on the form.
• the page alert contains a list of form inputs that are invalid, with links to each of these

Details in this community post: https://community.digital.gov.au/t/linux-machine-uikit-starter-npm-i-error/188/2

Latest version
Node version: v6.11.4
NPM version: 3.5.2
Linux Distribution : Ubuntu 17.04

On the content page, there are some odd characters in the html page that causes a gap on the top.

Ensure manifest.json can be downloaded and seen as part of a sample PWA.

Expected values as a starting point:

• short_name
• name
• author
• icons
• start_url
• background_color

Update to assets to include icons (default branding), author, etc.

Consider also adding to design-system-site.

Refer:
https://developers.google.com/web/fundamentals/web-app-manifest/
https://developer.mozilla.org/en-US/docs/Web/Manifest
http://www.w3.org/TR/appmanifest/

We have positioned them correctly in our docsite. But not in this repo.
They should be above the text input

When users add a body around the page alerts that are inside the main it causes some odd problems. We should refactor the code so that it only targets the first child main > .au-body or we give that element a new class and give the margin to it so it can not cause any problems with the uikit.

<body class="au-grid">
  <main>
    <section class="au-body">
      <div class="container-fluid">
       <div class="row">
        <div class="col-sm-12" id="content">
          <div role="alert" class="au-body au-body--dark au-page-alerts au-page-alerts--dark au-page-alerts--info au-page-alerts--dark">
           <h3>Important</h3>
           <p>Alert Content</p>
          </div>
        </div>
        </div>
      </div>
    </section>
  </main>
</body>

https://github.com/govau/uikit-starter/blob/4295f2df91440fb7601e01e9b5340d201bef78b3/src/sass/main.scss#L26-L34

Some description of solutions here:
https://community.digital.gov.au/t/css-conflicts-between-in-page-components/1076/9

from the docs says npm install? install what? is this a no more update?

The URL for browsersync doesn't work with windows as it adds single quotes to the URL.
The watch functionality is also broken in windows due to this.

http://localhost:3000/'docs'

Looking at the documentation for onchange it says:

NOTE: Windows users may need to use double quotes rather than single quotes. If used in an npm script, remember to escape the double quotes.

Found out that non existent folders causes an issue with onchange in windows: #Qard/onchange#50

A PR for this issue can be found here #1