Merge pull request #75 from WestpacGEL/develop

merge develop to main
WestpacGEL · Sep 29, 2023 · 3bb9171 · 3bb9171
2 parents 27d7b16 + 3182ae2
commit 3bb9171
Show file tree

Hide file tree

Showing 338 changed files with 12,623 additions and 571 deletions.
diff --git a/.changeset/khaki-queens-travel.md b/.changeset/khaki-queens-travel.md
@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+added auto complete, date picker, progress rope, panel, list, mega input, pagination and compacta
diff --git a/.circleci/config.yml b/.circleci/config.yml
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -28,7 +28,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Create Release Pull Request or Publish to npm
+      - name: Publish to npm
         uses: changesets/action@v1
         with:
           publish: pnpm ci:publish

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,48 @@
+name: Test
+
+on:
+  pull_request:
+    branches:
+      - develop
+      - main
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.2.0
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run build
+        run: pnpm build
+
+      - name: Run tests
+        run: pnpm ci:test
diff --git a/.github/workflows/version.yml b/.github/workflows/version.yml
@@ -0,0 +1,47 @@
+name: Version
+
+on:
+  push:
+    branches:
+      - develop
+  workflow_dispatch:
+
+jobs:
+  version:
+    name: Version
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.2.0
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Create Release Pull Request
+        uses: changesets/action@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/apps/docs/content/components/autocomplete.yaml b/apps/docs/content/components/autocomplete.yaml
@@ -0,0 +1 @@
+name: Autocomplete
diff --git a/apps/docs/content/components/autocomplete/code.mdoc b/apps/docs/content/components/autocomplete/code.mdoc
@@ -0,0 +1,101 @@
+## Autocomplete
+
+### Default
+
+```jsx
+<Autocomplete aria-label="Animals">
+  <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+  <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+  <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+  <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+  <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+  <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+</Autocomplete>
+```
+
+### Controlled
+
+```jsx
+() => {
+  const [selectedKey, setSelectedKey] = useState<Key>();
+  const handleSelectionChange = (key: Key) => {
+    setSelectedKey(key);
+  };
+  return (
+    <Autocomplete onSelectionChange={handleSelectionChange} selectedKey={selectedKey} aria-label="Animals">
+      <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+      <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+      <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+      <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+      <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+      <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+    </Autocomplete>
+  );
+};
+```
+
+### Invalid
+
+```jsx
+<Autocomplete aria-label="Animals" invalid>
+  <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+  <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+  <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+  <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+  <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+  <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+</Autocomplete>
+```
+
+### Disabled
+
+```jsx
+<Autocomplete aria-label="Animals" disabled>
+  <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+  <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+  <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+  <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+  <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+  <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+</Autocomplete>
+```
+
+### Sizes
+
+```jsx
+() => {
+  const [selectedKey, setSelectedKey] = useState<Key>();
+  const handleSelectionChange = (key: Key) => {
+    setSelectedKey(key);
+  };
+  return (
+    <Fragment>
+      {['small', 'medium', 'large', 'xlarge'].map(size => (
+        <div className="py-2" key={size}>
+          <Autocomplete label={size} size={size as any} aria-label={`size ${size}`}>
+            <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+            <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+            <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+            <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+            <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+            <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+          </Autocomplete>
+        </div>
+      ))}
+    </Fragment>
+  );
+};
+```
+
+### Footer
+
+```jsx
+<Autocomplete aria-label="Animals" disabled footer={<h3>Footer message</h3>}>
+  <Autocomplete.Item key="red panda">Red Panda</Autocomplete.Item>
+  <Autocomplete.Item key="cat">Cat</Autocomplete.Item>
+  <Autocomplete.Item key="dog">Dog</Autocomplete.Item>
+  <Autocomplete.Item key="aardvark">Aardvark</Autocomplete.Item>
+  <Autocomplete.Item key="kangaroo">Kangaroo</Autocomplete.Item>
+  <Autocomplete.Item key="snake">Snake</Autocomplete.Item>
+</Autocomplete>
+```
diff --git a/apps/docs/content/components/button-dropdown.yaml b/apps/docs/content/components/button-dropdown.yaml
@@ -0,0 +1 @@
+name: Button Dropdown
diff --git a/apps/docs/content/components/button-dropdown/code.mdoc b/apps/docs/content/components/button-dropdown/code.mdoc
@@ -0,0 +1,38 @@
+## Default usage
+
+```jsx
+<ButtonDropdown text="Dropdown" look="primary" soft>
+    <p>
+        Example dropdown <a href="#" className="text-[blue] underline">content</a>...
+    </p>
+</ButtonDropdown>
+```
+
+## Dropdown with headings
+
+```jsx
+<ButtonDropdown text="Dropdown" look="primary" soft>
+    <ButtonDropdown.Heading>Dropdown heading #1</ButtonDropdown.Heading>
+    Example dropdown content...
+    <ButtonDropdown.Heading>Dropdown heading #2</ButtonDropdown.Heading>
+    Example dropdown content...
+</ButtonDropdown>
+```
+
+## Dropdown box sizes (min-widths)
+```jsx
+<div>
+    <h3 className="font-bold">Small</h3>
+    <ButtonDropdown text="Dropdown" dropdownSize="small" look="primary" soft>
+        <ButtonDropdown.Heading>Small</ButtonDropdown.Heading>
+    </ButtonDropdown>
+    <h3 className="font-bold">Medium</h3>
+    <ButtonDropdown text="Dropdown" dropdownSize="medium" look="primary" soft>
+        <ButtonDropdown.Heading>Medium</ButtonDropdown.Heading>
+    </ButtonDropdown>
+    <h3 className="font-bold">Large</h3>
+    <ButtonDropdown text="Dropdown" dropdownSize="large" look="primary" soft>
+        <ButtonDropdown.Heading>Large</ButtonDropdown.Heading>
+    </ButtonDropdown>
+</div>
+```
diff --git a/apps/docs/content/components/collapsible.yaml b/apps/docs/content/components/collapsible.yaml
@@ -0,0 +1 @@
+name: Collapsible
diff --git a/apps/docs/content/components/collapsible/code.mdoc b/apps/docs/content/components/collapsible/code.mdoc
@@ -0,0 +1,61 @@
+## Collapsible sizes
+
+```jsx
+    <div>
+        <div className="mb-2">
+            <h2 className="typography-body-10 mb-1">Small</h2>
+
+            <Collapsible text="Toggle collapsible" size="small">
+                <p>
+                    Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur
+                    adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti
+                    praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet,
+                    consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta
+                    nobis modi officia incidunt eos dolores atque, unde error delectus officiis.
+                </p>
+            </Collapsible>
+        </div>
+        <hr className="mb-2"/>
+        <div className="mb-2">
+            <h2 className="typography-body-10 mb-1">Medium (default)</h2>
+
+            <Collapsible text="Toggle collapsible" size="medium">
+                <p>
+                    Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur
+                    adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti
+                    praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet,
+                    consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta
+                    nobis modi officia incidunt eos dolores atque, unde error delectus officiis.
+                </p>
+            </Collapsible>
+        </div>
+        <hr className="mb-2"/>
+        <div className="mb-2">
+            <h2 className="typography-body-10 mb-1">Large</h2>
+
+            <Collapsible text="Toggle collapsible" size="large">
+                <p>
+                    Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur
+                    adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti
+                    praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet,
+                    consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta
+                    nobis modi officia incidunt eos dolores atque, unde error delectus officiis.
+                </p>
+            </Collapsible>
+        </div>
+        <hr className="mb-2"/>
+        <div className="mb-2">
+            <h2 className="typography-body-10 mb-1">XLarge</h2>
+
+            <Collapsible text="Toggle collapsible" size="xlarge">
+                <p>
+                    Hello vivamus sagittis lacus vel augue laoreet rutrum faucibus. Lorem ipsum dolor sit amet, consectetur
+                    adipisicing elit. Nesciunt laboriosam, mollitia magnam ad magni consequuntur hic et quos optio corrupti
+                    praesentium veniam aspernatur minima aperiam ut quas, possimus non architecto. Lorem ipsum dolor sit amet,
+                    consectetur adipisicing elit. Aut animi velit in? Suscipit nostrum itaque voluptatibus dolorem qui soluta
+                    nobis modi officia incidunt eos dolores atque, unde error delectus officiis.
+                </p>
+            </Collapsible>
+        </div>
+    </div>
+```
diff --git a/apps/docs/content/components/compacta.yaml b/apps/docs/content/components/compacta.yaml
@@ -0,0 +1 @@
+name: Compacta