Merge pull request #730 from WestpacGEL/develop

Develop to main

apps/protoform/CHANGELOG.md

@@ -0,0 +1,8 @@
+# protoform
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [31167d7]
+  - @westpac/ui@0.16.0

apps/protoform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "protoform",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

apps/site/CHANGELOG.md

@@ -1,5 +1,12 @@
 # site
 
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [31167d7]
+  - @westpac/ui@0.16.0
+
 ## 0.1.2
 
 ### Patch Changes

apps/site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "site",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "scripts": {
     "build": "next build",

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @westpac/ui
 
+## 0.16.0
+
+### Minor Changes
+
+- 31167d7: added data visualisation colours
+
 ## 0.15.0
 
 ### Minor Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",

packages/ui/src/components/compacta/compacta.styles.ts

@@ -14,7 +14,7 @@ export const styles = tv(
       addBtn: 'h-auto p-0 no-underline hover:underline',
       toggleBtn: 'p-0',
       collapsible: '',
-      content: 'px-3 pb-5 pt-0 xsl:pl-9',
+      content: 'px-3 pb-5 pt-0 md:px-9',
       footer: '',
       titlePrimary: 'typography-body-9 font-bold',
       titleSecondary: 'mt-1 items-center',

packages/ui/src/components/icon/components/child-care-icon.tsx

@@ -0,0 +1,43 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ChildCareIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Child Care',
+  copyrightYear = '2024',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path d="M12 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" fill="currentColor" />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12 9c3.338 0 10 1.519 10 4.533v5.934c0 1.321-1.28 2.355-3 3.1-.32.139-.655.267-1 .386v-3.286C18 17.893 14.002 17 12 17s-6 .893-6 2.667v.061c.225.104.483.21.773.316 1.547.562 3.416.88 4.747.944V21a1.5 1.5 0 1 1-.285 2.977c-1.537-.09-3.508-.431-5.235-1.024-2.199-.756-4-1.919-4-3.486v-5.934C2 10.52 8.662 9 12 9Zm2.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+            fill="currentColor"
+          />
+          <path d="M12 17a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" fill="currentColor" />
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12 24a1 1 0 1 0 0-2c-1.054 0-2.548-.182-4-.543v-.466c.175-.122.476-.28.92-.439C9.947 20.187 11.22 20 12 20c.78 0 2.053.187 3.08.552.444.159.745.317.92.44v2.52a18.837 18.837 0 0 0 2-.56c2.199-.755 4-1.918 4-3.485v-5.934C22 10.52 15.338 9 12 9S2 10.519 2 13.533v5.934c0 1.567 1.801 2.73 4 3.486l.144.048c.6.2 1.229.37 1.856.51 1.456.326 2.906.489 4 .489Zm5.569-11.984C15.712 11.341 13.443 11 12 11c-1.443 0-3.712.341-5.569 1.016-.93.338-1.627.713-2.054 1.071a1.52 1.52 0 0 0-.348.379.283.283 0 0 0-.028.06L4 13.533v5.934l.001.007a.283.283 0 0 0 .028.06c.043.075.142.207.348.379.358.3.906.613 1.623.905v-.151C6 18.893 9.998 18 12 18s6 .893 6 2.667v.151l.067-.028c.684-.284 1.21-.587 1.556-.877a1.52 1.52 0 0 0 .348-.379.279.279 0 0 0 .028-.06v-.005l.001-.002v-5.936l-.001-.005a.279.279 0 0 0-.028-.06 1.52 1.52 0 0 0-.348-.379c-.427-.357-1.123-.733-2.054-1.071Z"
+            fill="currentColor"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

packages/ui/src/components/icon/components/child-icon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ChildIcon({ 'aria-label': ariaLabel = 'Child', copyrightYear = '2024', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path
+        d="M15.333 12a1.61 1.61 0 0 1-1.183-.483 1.61 1.61 0 0 1-.483-1.184c0-.466.16-.86.483-1.183a1.61 1.61 0 0 1 1.183-.483c.467 0 .861.16 1.184.483.322.322.483.717.483 1.183 0 .467-.161.861-.483 1.184a1.61 1.61 0 0 1-1.184.483ZM8.667 12a1.61 1.61 0 0 1-1.184-.483A1.61 1.61 0 0 1 7 10.333c0-.466.161-.86.483-1.183a1.61 1.61 0 0 1 1.184-.483c.466 0 .86.16 1.183.483.322.322.483.717.483 1.183 0 .467-.16.861-.483 1.184A1.61 1.61 0 0 1 8.667 12ZM12 19c-1.333 0-2.539-.367-3.617-1.1A6.536 6.536 0 0 1 6 15h12a6.536 6.536 0 0 1-2.383 2.9C14.539 18.633 13.333 19 12 19Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.262.003A12.24 12.24 0 0 0 12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C24 5.56 18.928.306 12.56.013A1.007 1.007 0 0 0 12.4 0c-.046 0-.092 0-.138.003ZM12 22c5.523 0 10-4.477 10-10 0-5.424-4.318-9.84-9.705-9.996C11.603 2.061 11 2.674 11 3.5c0 .867.665 1.5 1.4 1.5.347 0 .668-.134.918-.368a1 1 0 1 1 1.364 1.463c-.599.558-1.4.905-2.282.905C10.484 7 9 5.394 9 3.5c0-.38.06-.748.17-1.094C5.027 3.626 2 7.46 2 12c0 5.523 4.477 10 10 10Z"
+        fill="currentColor"
+      />
+    </Icon>
+  );
+}

packages/ui/src/components/icon/index.ts

@@ -36,6 +36,8 @@ export { CardlessCashIcon } from './components/cardless-cash-icon.js';
 export { CartIcon } from './components/cart-icon.js';
 export { ChatIcon } from './components/chat-icon.js';
 export { CheckIcon } from './components/check-icon.js';
+export { ChildCareIcon } from './components/child-care-icon.js';
+export { ChildIcon } from './components/child-icon.js';
 export { ClearIcon } from './components/clear-icon.js';
 export { ClockIcon } from './components/clock-icon.js';
 export { CloseIcon } from './components/close-icon.js';

packages/ui/src/components/repeater/repeater.styles.ts

@@ -20,7 +20,7 @@ export const styles = tv(
         true: {
           item: 'border-t-2 border-neutral pt-[0.625rem]',
           content: 'px-0 pb-7 pt-0 md:px-6',
-          removeBtn: 'relative mb-5 ml-3',
+          removeBtn: 'relative mb-5 md:ml-6',
           footer: 'border-t-2 border-neutral',
         },
       },

packages/ui/src/stories/foundation/colours.stories.tsx

@@ -2,7 +2,8 @@ import { type Meta, StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
 import { Field, Select } from '../../components/index.js';
-import { BASE_COLORS } from '../../tailwind/constants/colors.js';
+import { BASE_COLORS, DATA_VIS_COLORS } from '../../tailwind/constants/colors.js';
+import { BrandKey } from '../../tailwind/index.js';
 import { ALL_THEMES } from '../../tailwind/themes/index.js';
 import { generateColorTints } from '../../tailwind/utils/generate-color-tints.js';
 
@@ -254,6 +255,18 @@ const LOAD_COLORS = {
     'bg-system-10',
     'bg-system-5',
   ],
+  'data-a-solid': ['bg-data-a-solid', 'bg-data-a-solid/30'],
+  'data-a-tint': ['bg-data-a-tint'],
+  'data-b-solid': ['bg-data-b-solid', 'bg-data-b-solid/30'],
+  'data-b-tint': ['bg-data-b-tint'],
+  'data-c-solid': ['bg-data-c-solid', 'bg-data-c-solid/30'],
+  'data-c-tint': ['bg-data-c-tint'],
+  'data-d-solid': ['bg-data-d-solid', 'bg-data-d-solid/30'],
+  'data-d-tint': ['bg-data-d-tint'],
+  'data-e-solid': ['bg-data-e-solid', 'bg-data-e-solid/30'],
+  'data-e-tint': ['bg-data-e-tint'],
+  'data-f-solid': ['bg-data-f-solid', 'bg-data-f-solid/30'],
+  'data-f-tint': ['bg-data-f-tint'],
 };
 
 /**
@@ -378,3 +391,80 @@ export const ReservedWithNoTints = () => (
     </div>
   </div>
 );
+
+/**
+ * Examples for all data visualisation colors, name in brackets are what it could be referred to in Figma etc.
+ */
+export const DataVisualisationColors: Story = {
+  render: (args, { globals: { theme } }) => {
+    const currThemeToken: Exclude<BrandKey, 'btfg'> = theme ? theme.toLowerCase() : 'wbc';
+    const dataVisSolidColors = [
+      'data-a-solid',
+      'data-b-solid',
+      'data-c-solid',
+      'data-d-solid',
+      'data-e-solid',
+      'data-f-solid',
+    ];
+    const dataVisTintColors = [
+      'data-a-tint',
+      'data-b-tint',
+      'data-c-tint',
+      'data-d-tint',
+      'data-e-tint',
+      'data-f-tint',
+    ];
+
+    return (
+      <>
+        <div className="flex flex-wrap">
+          {dataVisSolidColors.map(color => (
+            <div className="flex w-[16%] min-w-[100px] max-w-[300px] flex-col">
+              <div className=" p-2" key={color}>
+                <div className={`bg-${color} h-[80px]`} />
+                <div className="divide-y divide-border border border-border p-2">
+                  <div className="pb-2 font-bold">{color}</div>
+                  <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}`}</div>
+                  {/* Below comments to get rid of type nightmare when trying to get hex value */}
+                  {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                  {/* @ts-ignore */}
+                  <div className="typography-body-10 pt-2 font-light">{DATA_VIS_COLORS[currThemeToken][color]}</div>
+                </div>
+              </div>
+            </div>
+          ))}
+          {dataVisTintColors.map(color => (
+            <div className="flex w-[16%] min-w-[100px] max-w-[300px] flex-col">
+              <div className=" p-2" key={color}>
+                <div className={`bg-${color} h-[80px]`} />
+                <div className="divide-y divide-border border border-border p-2">
+                  <div className="pb-2 font-bold">{color}</div>
+                  <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}`}</div>
+                  {/* Below comments to get rid of type nightmare when trying to get hex value */}
+                  {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                  {/* @ts-ignore */}
+                  <div className="typography-body-10 pt-2 font-light">{DATA_VIS_COLORS[currThemeToken][color]}</div>
+                </div>
+              </div>
+            </div>
+          ))}
+          {dataVisSolidColors.map(color => (
+            <div className="flex w-[16%] min-w-[100px] max-w-[300px] flex-col">
+              <div className=" p-2" key={`${color}/30`}>
+                <div className={`bg-${color}/30 h-[80px]`} />
+                <div className="divide-y divide-border border border-border p-2">
+                  <div className="pb-2 font-bold">{`${color}/30`}</div>
+                  <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}/30`}</div>
+                  {/* Below comments to get rid of type nightmare when trying to get hex value */}
+                  {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                  {/* @ts-ignore */}
+                  <div className="typography-body-10 pt-2 font-light">{DATA_VIS_COLORS[currThemeToken][color]}4D</div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </>
+    );
+  },
+};