USWDS - Web components: Initial setup

.storybook/preview.js

@@ -1,4 +1,7 @@
 import "../packages/uswds-core/src/js/start";
+import { defineCustomElements } from "../web-components/loader";
+
+defineCustomElements();
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -10,12 +13,7 @@ export const parameters = {
   },
   options: {
     storySort: {
-      order: [
-        "Design Tokens",
-        "Components",
-        "Patterns",
-        "Pages",
-      ],
+      order: ["Design Tokens", "Components", "Patterns", "Pages"],
     },
   },
 };

package.json

@@ -59,6 +59,7 @@
     "prepare": "npx gulp",
     "preversion": "npm test",
     "release": "gulp release",
+    "prefederalist": "cd ./web-components/ && npm install && npm run build",
     "federalist": "npm run build && npm run build:storybook",
     "start": "npm run start:storybook",
     "test": "snyk test && npm run lint && gulp typecheck && gulp test",

packages/usa-button/src/usa-button.stories.js

@@ -104,3 +104,10 @@ LinksStyledAsButtons.argTypes = {
     },
   },
 };
+
+const WCTemplate = (args) => `<usa-button text="${args.text}"></usa-button>`;
+
+export const WCButton = WCTemplate.bind({});
+WCButton.args = {
+  text: "Hello world",
+};

packages/usa-link/src/usa-link.stories.js

@@ -1,9 +1,11 @@
-import Component from "./usa-link.twig";
+// import Component from "./usa-link.twig";
 
 export default {
   title: "Components/Link",
 };
 
-const Template = (args) => Component(args);
+// const Template = (args) => Component(args);
+const Template = (args) =>
+  `<usa-link href="${args.href}">a text link</usa-link>`;
 
 export const Link = Template.bind({});

web-components/.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

web-components/.gitignore

@@ -0,0 +1,26 @@
+dist/
+www/
+loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env

web-components/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "consistent",
+  "printWidth": 180,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

web-components/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.